ドットインストール HTML入門　学習メモ

ドットインストールのHTML入門を学んで、気になったところなどをメモ。

http://dotinstall.com/lessons/basic_html_v3

jsstudy.hatenablog.com

#01 HTMLとはなにか？ (02:56)
#02 必要なツールを用意しよう (02:55)
#03 タグと属性を理解しよう (02:20)
#04 はじめてのHTML (02:07)
#05 meta､linkタグを使ってみよう (02:44)
#06 styleタグを使ってみよう (02:33)
#07 id､class､style属性を使ってみよう (02:28)
#08 セクションについて理解しよう (02:35)
#09 アウトラインを意識してみよう (02:43)
#10 h1-h6タグで見出しを付けよう (02:28)
#11 p､hr､pre､blockquote､divを使おう (02:52)
#12 ol､ul､li､dl､dt､ddでリストを作ろう (02:48)
#13 strong､br､spanを使ってみよう (01:45)
#14 aタグでリンクを設定しよう (02:37)
#15 imgタグで画像を表示させよう (01:27)
#16 tableタグで表組みを作ろう (02:57)
#17 formタグでフォームを作ろう (03:00)
#18 inputタグで入力部品を作ろう (02:53)
#19 textarea､buttonタグを使ってみよう (02:44)
#20 checkbox､radio､labelを使ってみよう (02:57)
#21 selectタグでセレクトボックスを作ろう (02:41)
#22 HTML5から使える属性を使ってみよう (02:31)
#23 文字参照を使ってみよう (02:30)
#24 コンテンツモデルを理解しよう (02:54)
まとめ

#01 HTMLとはなにか？ (02:56)

HTMLは、<html>や<div>みたいな記号（タグ）を使って、素の文章にいろんな情報を付けられる言語のこと。

HTMLの仕様は「W3C」という機関で策定 → https://www.w3.org/（英語）
ブラウザーのHTML対応状況 → http://caniuse.com/（英語）

caniuseは、「Can I use」の略なんですね。

#02 必要なツールを用意しよう (02:55)

ブラウザー　→　Chromeを使ってます。
エディター　→　Web制作だと、Visual Studio Codeを使ってます。
フォント　→　プログラミング用に、Myricaを使ってます。

「1」「l」「|」など、英数字や記号が見分けやすいフォントが便利ですね。

qiita.com

#03 タグと属性を理解しよう (02:20)

「tag」（タグ）は、日本語だと「札」（ふだ）という意味です。

タグ　<p>のような記号のこと。（「<」で始まり「>」で終わる記号）
属性　<p class="message">のように、細かい設定を指定する部分のこと。

HTMLは、素の文章にタグをぶち込んで、様々な情報（見出し、段落など）を追加する道具ですね？

#04 はじめてのHTML (02:07)

HTML文書の基本構造は、これだけです。

<html>
  <head>
    ここに付加情報（ブラウザーで表示されない）
  </head>
  <body>
    ここに本文（ブラウザーで表示される）
  </body>
</html>

<html>で始まり、</html>で終わる。
<head>と</head>の間に、付加情報（メタ情報）＝ページのタイトルなどを入れる。
<head>のところに書いた情報は、ブラウザー上には表示されない。
<body>と</body>の間に、本文を入れる。
<body>のところに書いた情報は、ブラウザー上に表示される。

デフォルトのWebページ名は、Webサーバーの設定で変えられます。

Apache（Webサーバーソフト）の場合、「index.html」や「default.html」というファイル名のWebページが、最初に表示されるページになります。
（ブラウザーで、URLのページ名を指定しなかった場合、Webサーバーが「index.html」を探して表示する）

この慣例によって、Webページのファイル名には「index.html」という名前がよく使われます。

#05 meta､linkタグを使ってみよう (02:44)

HTMLタグに全角スペース文字を混ぜ込むとエラーの原因になるので注意！

（例）

<meta charset="UTF-8">というメタタグの中で、「meta」と「charset」の間は半角スペース文字「」でないといけない。
間違えて全角スペース文字「　」を書いてしまうと、ブラウザーがmetaタグと認識しなくて、文字化けエラーの原因になったりする。

日本語のWebページだと結構ありがちなミスなので、HTMLの文法・記述をチェックするツールが役立ちます。

programming-study.com

#06 styleタグを使ってみよう (02:33)

<head>タグ内に書ける情報として、<style>タグなどがある。

<style>タグで見た目の情報（CSSの設定）を追加できる。
（ただし、CSSは別ファイルに分離して用意する方法のほうが一般的）

HTMLのコメントタグ

「」の間に書いた文章はコメントになり、表示や動作には関係ない。
コメントアウト → コードをコメントにして無効化すること
アンコメント → （コメントアウトして無効化した）コードのコメント記号を外して、再び有効なコードにすること

#07 id､class､style属性を使ってみよう (02:28)

属性（attribute、property）の名前や値の書き方

<p class="message">文章</p>は、pタグ（パラグラフ＝段落）に、classという属性を設定して、classにmessageという属性値を設定している。
「id」「class」「style」という属性は、CSS（見た目の設定）で使われるものなので、その意味や機能はCSSを勉強するときに理解すればOK？
とりあえず、HTMLタグには「属性」という情報が設定できることを知っておけばOK？

#08 セクションについて理解しよう (02:35)

HTML文書の「アウトライン」って何？

（参考）

アウトラインとは - IT用語辞典 Weblio辞書

(1) 物の外側の線。輪郭。

(2) あらまし。あらすじ。大要。「事件の－を話す」

アウトラインとは、一般的には輪郭や大筋といった意味を表す単語である。

アウトラインとは？｜HTML5基礎知識｜アウトラインのルール

アウトラインとはHTML5文書の概要を階層的に表すもので本に例えるならば、章・節・項といった目次のようなものです。

Webページを本のように文章から章・節・項といった見出しになるようなものを抜き出してアウトライン、すなわち、文書の階層的な目次を作ろうというわけです。

HTML5文書ではこのアウトラインを強く意識して作成する必要があります。

HTMLのカテゴリーとコンテンツモデルを理解する | できるネット

HTMLのセクションとアウトラインを理解する | できるネット

HTMLのアウトラインは、文章の階層構造って意味ですね？

HTML4とHTML5の違いについて、新たに追加された「コンテンツモデル」などの概念を知っておく必要があるようです。（面倒）

HTML5で追加された<section>タグや<article>タグの使い分けがよく分からなかったのですが、何となく分かって来ました。

article: 独立しているコンテンツ
section: それ以外の情報の塊

#09 アウトラインを意識してみよう (02:43)

<section>と<article>のマークアップの見本が見られます。

なるほど、こんなふうに分けていくんですね！

<section>で区切る。
１つの記事（読み物）に該当する部分を<article>で囲む。

#10 h1-h6タグで見出しを付けよう (02:28)

<h1>、<h2>、…、<h6>の見出しタグは、ヘッディング・コンテンツ（Heading content）と呼ばれてます。

ドットインストールの説明では、<section>タグが適切に区切られていれば、<h1>を何度も使ってマークアップできる、とのこと。

→ しかし、ちょっと違和感があったので、SEO的にどうなのか？調べてみました。

<h1>を何度も使って良い派の見解

SEOに有利？不利？エンジニアが見るHTML5とSEO | SEO HACKS公式ブログ

最上位の見出しであるh1要素はSEO上、1つの文書内で1度しか利用できないというルールがありました。HTML5の場合も、このルールに従っていれば何ら問題はありません。

一方でHTML5の場合、新たに追加されたsection要素のようなセクショニング・コンテンツの深さを使ってセクションを表現することもできます。h1要素を複数使用されていても、それぞれのセクションにおける見出しのレベルを区別できるようになっています。

上述の２つの例に優劣はありません。単に選択肢が増えただけなので、使いやすい方を選べばよいでしょう。

<h1>は1回だけ派の見解

SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント | creive

HTML5では1ページ内に複数のh1タグを使用してもよいことになっていますが、それはあくまでsectionタグのようなHTML5タグを用いて各h1タグを含む文章が正しく構造的にマークアップされているときだけです。

本当は中見出しや小見出しを用いるべきところでh1タグを用いると文章構造が崩れてしまい、コンテンツ作成者が意図しない構造として検索エンジンに解釈されてしまう恐れがあります。これは検索エンジン対策としては逆効果です。

もちろん、sectionタグを適切に使用してh1タグのみで見出しを構成するとサイトリニューアル時に見出しのナンバリングを気にする必要がないメリットがあります。ただ、そのかわり文章構造を厳密に気にする必要が生じるデメリットが生じます。さらに、sectionタグで囲む作業に時間と労力がかかること、加筆・再編集には不向きなこともh1タグのみでの見出し付けの懸案事項です。

sectionタグを用いてh1タグのみでの見出し付けも中見出しと小見出しを用いた見出し付けも検索エンジンに伝わる文章構造は同じであることを考えると、h1タグは1ページに1つだけ用いる方がサイト運営上無難です。