HTML5/CSS3の授業ノート

HTML

Date.2022.1.14

2日目　文書の構造を明確にする

文書構造を明確にするタグ

<section>〜</section>

文書の論理構造を表すための最も基本的な要素で、その範囲が章や節など意味のある1つのかたまりであることを示します。通常は見出しとセットで使用します。
ただし、以下のような場合は、その意味に適した要素を使用するようにします。

主要なナビゲーションである場合…<nav>要素
メインコンテンツである場合…<main>要素
1つの完結した記事である場合…<article>要素
補足的なコンテンツである場合…<aside>要素
レイアウトのためだけにグループ化したい場合…<div>要素

<address>要素の子孫要素として配置してはいけません。

<article>〜</article>

ブログエントリやニュース記事のように、その部分だけを抜き出しても成立する「独立したコンテンツ」を示します。通常は見出しとセットで使用します。

<address>要素の子孫要素として配置してはいけません。

<aside>〜</aside>

その部分を取り除いたとしても本文には影響が出ないコンテンツや、本文には関係しているが本筋からは外れているコンテンツなどを示します。記事内の補足情報やサイドバーに利用できます。

<address>要素の子孫要素として配置してはいけません。

<nav>〜</nav>

navigation。そのサイト内の移動で必要となる主要なリンクメニュー(ナビゲーション)を示します。グローバルナビゲーションやパンくずリストに用います。

<nav>要素同士の入れ子はできません

<main>〜</main>

その文書内で主な内容となる部分を指します。1ページに一度しか使用できません。

hidden属性(今は関連性がないことを示す)を記述すれば複数でもOKとされています。

<header>〜</header>

文書やセクションのヘッダーを示します。見出しや概要、ナビゲーションメニューなどを記述する場合に使用します。多くの場合見出し要素が入りますが、必須ではありません。
<body>直下に配置した場合は、文書全体のヘッダー、セクション内に配置した場合はセクションヘッダーを示します。

<header>,<footer>との入れ子はできず、<address>要素の子孫要素として配置してはいけません。

<footer>〜</footer>

文書やセクションのフッタを示します。著者情報や関連記事へのリンクを記述することが多い。ページの内容によっては1ページに複数使っても構いません。

<header>,<footer>との入れ子はできず、<address>要素の子孫要素として配置してはいけません。

<address>〜</address>

個人、団体、組織の連絡先を示します。名前(必須)、住所、URL、メールアドレス、電話番号、ソーシャルメディアのアカウント、地理上の座標など、連絡先と言われるものはなんでも含めることができます。

<address>の入れ子はできません。

<div>〜</div>

ひとかたまりの範囲を示します。<div>には特別な意味はないので、class属性やid属性を使用してレイアウトを指定するためのコンテナ要素として使用することもできます。
<div>は大変便利なタグですが、他に適切な要素がない場合の使用に留めてください。
より適切な要素があるにも関わらず<div>を使用していると、WEBページのアクセシビリティやメンテナンス性が低下してしまうからです。

HTML4.01やXHTML1.0まではこれらのタグは存在せず、<div class="navigation">などと記述していました。これでは単に「このかたまりはnavigationという名前ですよ」と言っているだけで、構造が伝わっていたとは言えません。
ブラウザにWebサイトの構造を正確に伝え、読み上げアプリや音声アシスタントなどに「これはナビゲーションボタンですよ」「これがこのページのメインコンテンツですよ」という構造的な意味を正しく伝えるために、HTML5から採用されたタグです。

HTMLを適切な要素によって区分し、コンテンツの意味を明確化したことで、機械・人間の両方がそのWebサイトの構造を理解しやすく、使いやすくなりました。

見出しタグ

<h1>〜</h1>(h1〜h6)

<h1><h2><h3><h4><h5><h6>タグは、見出しを付ける際に使用します。
h1に近いほど見出しのランクが高くなり、h6に近いほど低くなります。
同じ数値のものが複数ある場合には同じランクとなります。

See the Pen h1-h6,p by minato (@minatoxxx)on CodePen.

必ずページ内でh1⇒h2⇒h3⇒h4のように順番に使用します。
h1⇒h3⇒h4と順番を飛ばしたり、h1⇒h3⇒h2と順序が逆になってはいけません。（2度目以降は大丈夫です）。
文字の強調など見た目のために使うのも間違いです。

段落と改行のタグ

<p>〜</p>

Paragraph(段落)の略で、一つの段落であることを示します。
<p>タグを二つ続けて書くと段落ごとに改行されて段落の間には1行分程度のスペースができます。長い文章は読みにくくなるので、段落を分けて表示するといいでしょう。
しかし単に改行する目的で二つのpに分けてはいけません。
マークアップに悩んだらとりあえず<p>にしておきましょう。
しかし、より適切な要素が他にある場合には、そちらの要素を使用するようにします。

br(空要素)

Break(改行)の略で、テキストや画像等をブラウザ上で改行させたいときに使用します。
HTMLソース中の改行は一般的なブラウザでは半角スペースとして表示され、改行されません。
HTMLソース中の改行をブラウザ上でそのまま表示させるには<pre>タグを用います。
スペースを取る為に改行「br」を使うのは文法的に間違いですし、ユーザーと制作者が同じウィンドウサイズやフォントサイズで見ているとは限らないので、レイアウト目的で改行してはいけません。CSSで指定しましょう。

See the Pen p,br by minato (@minatoxxx)on CodePen.

テキストに意味を持たせるタグ

強調や引用、リンクなど、他の部分とは区別する為に使うタグです。

<a>〜</a>

anchor(アンカー/船の錨・つなぎ止めて固定する)の略です。href属性を用いて、別のWEBページやファイル、メールアドレス、同一ページ内の別の場所(ページ内リンク)、または他のURLへのハイパーリンクを作成します。

<a␣href="リンク先のパス">ページの内容を示す文字列</a>

指定した場所同士をつなぐことで関連する情報を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。<a>〜</a>の内容は、「ここをクリック」や「こちら」ではなく、多少文脈に無理が生じたとしてもリンク先の内容を示すものにします。

×→ 私たちの製品については<a␣href="/products">こちら</a>をご覧ください。
○→ 詳しくは<a␣href="/products">私たちの製品について</a>をご覧ください。

a要素にtarget=""を追加すると、リンク先の文書をどのタブ(ウィンドウ)に表示するかを指定できます。
通常、今開いているタブでページ遷移しますが、外部のサイトにリンクを設定する時は自身のサイトからの離脱回避のため「target="_blank"」を指定して新規のタブに表示させるようにします。

target="_blank"の脆弱性について

target="_blank"を指定するとき、問題が二つあります。

リンク先のページで高負荷のプログラム(JavaScript)が実行されている場合、リンク元のページのパフォーマンスが低下する可能性がある
リンク元とリンク先両方のページがブラウザ内に存在しているため、リンク先のページに悪意のあるJavaScriptが書かれていたらリンク元のホームページが改ざんされてしまう恐れがある

以上の問題を回避するため、「rel="noreferrer"」を追記してください。

<a␣href="リンク先のパス"␣target="_blank"␣rel="noreferrer">ページの内容を示す文字列</a>

<strong>〜</strong>

高い重大性や緊急性のある警告など「強い重要性」のある内容を示します。
HTML4.01以前は単に「より強い強調」という意味でしたが、HTML5では「内容の強い重要性」を表すものと定義しています。strong要素は入れ子にすることができ、入れ子の段階に応じてより強い強調を表すことができます。
既定値では太字で表示されますが、「太字にするため」に使用してはいけません。

<em>〜</em>

テキストの一部にアクセントをつけたい(強調したい)場合に使用します。
em要素は入れ子にすることができ、入れ子の段階に応じてより強い強調を表すことができます。
既定値では斜体で表示されますが、「斜体にするため」に使用してはいけません。

<i>〜</i>

声や心の中で思ったこと、他言語の慣用句、専門用語など、文字列が周囲の文字列とは意味が違うことを示します。
HTML4.01以前は「文字列をイタリック体で表示する」要素でした。現在でも多くのブラウザで斜体で表示されますが、「斜体にするため」に使用してはいけません。

<b>〜</b>

文書内のキーワードや製品名など、読み手の注意を惹きたい場合で、他の特別な重要性が与えられないものに使用します。
HTML4.01以前は太字要素と呼ばれておりほとんどのブラウザで文字列を太字で表現しますが、HTML5では「太字にするため」に使用してはいけません。

<small>〜</small>

免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表します。強調や反対に重要性を弱める意味などはありません。
HTML4.01ではテキストを小さく表示する要素でした。HTML5では注釈や細目を表す要素となり、これまでとは意味が変更されています。

<span>〜</span>

他のタグと違い、特に何かを表すものではなく汎用的な行内コンテナーとして使います。
他の要素が見た目のためだけに使ってはいけないのに対して、スタイル付けや属性を共有したりするために要素をグループ化する用途で使用することができます。
ただし、他に適切な意味的要素がない時にのみ使用してください。
div要素と似ていますが、divはブロックレベル要素、spanはインライン要素です。

コンテンツの埋め込み

<img(空要素)>

文書に画像を埋め込みます。
src属性(必須)で、埋め込みたい画像のパスを指定します。
alt属性は画像のテキストによる説明で、HTML5では必須ではありませんがアクセシビリティのために設定した方がいいでしょう。ネットワークエラーやコンテンツのブロック、リンク切れ等の理由で画像が読み込めなかった場合に代替テキストが表示されたり、音声ブラウザがこの内容を読み上げることで、画像が何を表すかをユーザーが知ることができます。そのため、「ロゴ」などの抽象的な言葉ではなく、「〇〇株式会社」など実態を表す言葉にしてください。alt属性に空文字列を設定(alt="")すると、この画像がコンテンツにおいて重要ではない装飾するものになります。

<img␣src="画像のパス"␣alt="説明テキスト"␣width="300"␣height="200">

また、width属性とheight属性の両方を使用して画像のサイズを指定(pxはつけない。%指定は不可)しておくと、画像の読み込みを待たずに文書全体が表示されるようになります。そのため、感覚的には表示速度が高まります。また、レンダリング中に画像が読み込まれるごとにレイアウトがズレる「レイアウトシフト」がなくなります。

左側の例では、画像が表示されるまでの間画像の領域をテキストが埋めてしまっているので、画像表示後にレイアウトがズレます。
急にレイアウトがズレて読んでいた箇所を見失ったり、レイアウトがスレたせいで誤ったボタンをクリックしてしまったりすると、ユーザーにストレスを与えます。
ユーザーにストレスを与えないようにすることはSEO対策にも有効ですので、ぜひ設定しましょう。
その際CSSで{width:100%; height:auto;}などの設定を忘れないようにしましょう。

HTML5.1から追加されたsrcset属性とsizes属性を使用すると、レスポンシブイメージ(画像サイズの最適化)を設定することができます。
サイズの異なる複数の画像候補を用意しておくことで、ユーザーの閲覧環境に適した画像が自動的に選択され、必要のない画像は読み込みせず最適なものだけを表示するので表示速度UPや処理負担が軽減されます。SEOの面でも大きな役割を果たします。

<img　srcset="small.jpg␣320w,medium.jpg␣640w,large.jpg␣800w"
	sizes="(max-width:1280px) 100vw,1280px"
	src="large.jpg"
	alt="画像の説明">

srcset="…"(srcset属性): 使用される画像の候補とその画像が読み込まれる条件を指定します。それぞれの画像候補には、画像ファイルの横幅(w/ピクセルだけど単位はpxではない)またはデバイスピクセル比(x)のどちらかを指定することができます。
sizes="…"(sizes属性): その画像をどのサイズで表示したいのか指定します。
メディアクエリーの条件(ブレイクポイント)毎に、複数の値を指定することもできますが、その場合は条件分けができなくなるのでwidth属性を指定しないようにしてください。
src="…"(src属性): srcsetに対応していないブラウザのための記述。未対応のブラウザはここで指定された画像を読み込みます。

<picture>〜</picture>

様々な画面や端末の条件に応じた画像を表示します。ブラウザーは複数の<source>子要素の中から最も適切なものを選びます。適切なものがない場合やブラウザーが<picture>要素に対応してない場合は、<img>要素のsrc属性で指定された画像を表示します。
pictureタグの中にはsourceタグ(複数)とimgタグ(必須)を入れ子にし、sourceタグには3つの属性を指定します。

<picture>
	<source media="(max-width:600px)" srcset="small.jpg 600w" sizes="100vw">
	<source media="(max-width:960px)" srcset="medium.jpg 960w" sizes="100vw">
	<img src="large.jpg">
</picture>

media="…"(media属性): 画像の埋め込み対象とするメディアを指定します。メディアクエリ。
srcset="…"(srcset属性): 画像候補のファイル名とサイズ指定。それぞれの値の間には半角スペースが入ります。
それぞれの画像候補には、画像ファイルの横幅(w)またはデバイスピクセル比(x)のどちらかまたは両方をを指定することができます。
sizes="…"(sizes属性): 画像の表示サイズ(横幅)を指定する。ピクセルの場合は「w」、割合での場合は「vw」で指定する。

img srcsetとpictureの違い

imgのsrcset属性では、単にサイズの異なる画像を指定します。たとえばスマートフォン向けにはトリミングをした画像を表示したいという場合はpicture要素を使用します。

embed<(空要素)>

プラグインが必要な非HTMLコンテンツを文書に埋め込みます。
ユーザーのブラウザに対応するプラグインがインストールされていない場合、そのコンテンツは表示できません。しかしHTML5への移行に伴い広く普及していたflashPlayerなどのプラグインの開発が終了したため、不特定多数のユーザーに見てもらいたいコンテンツを埋めこむ場合にはあまり使われなくなりました。

<embed type="video/mp4" src="sample.mp4" width="360" height="200" title="サンプル動画">

<object>〜</object>

画像や動画、音声、HTML文書など様々な形式のファイルを文書に埋め込むための要素です。

<object data="images/sample.jpg”　type=“image/jpg”　width="400" height="300">
(object非対応の環境で代わりに表示するもの)
</object>

data="…"(data属性): オブジェクトのファイル名を指定します。
type="…"(type属性): ファイルの型を指定します。

<object data="images/sample.jpg" type=“image/jpg”　width="400" height="300">
<img src="images/sample.jpg” width="400" height="300" alt=“サンプル画像”>
</object>

<iframe>〜</iframe>

WEBサイト内に別のページなどを読み込んで表示するための要素です。動画などのコンテンツを簡単に埋め込むことができます。

<iframe src="http://minatoxxx.main.jp/note" width="660" height="200" title="HTML5/CSS3の授業ノート">
(iframe非対応の環境で代わりに表示するもの)
</iframe>

iframeタグ未対応のブラウザのために開始タグと終了タグのあいだに「このページはiframe対応ブラウザでご覧ください。」などと注意書きを添えるか、該当ファイルのURLなどを記述しておきます。
万が一、インラインフレームが表示されなかった場合はこの文言が表示されます。

こんなふうに表示されます。

youtubeの動画やGoogleマップなどの埋め込みもこのタグを使って簡単に行うことができるほか、

埋め込んだコンテンツは別ページなので、楽天などの文字数制限に引っかからない
ページ数が多くなってもメンテナンスが効率的に行える

などのメリットがあります。
ただし、埋めこむコンテンツが多すぎると重くなり、ページの表示が遅くなるなどのデメリットもありますので注意が必要です。

ブロックレベル要素とインライン要素

要素の多くはブロックレベル要素とインライン要素に大別されます。
<body>の中に直接記述できるのはブロックレベル要素だけで、インライン要素は必ず何らかのブロックレベル要素に含まれていなくてはいけません。

ブロックレベル要素(Block-Level Elements)

見出し・段落・表など、Webサイトの骨格となる一つのまとまりを形作るものです。コンテンツをまとめる箱のようなもと思ってください。
行全体が一つのブロック（かたまり）として扱われるため、範囲が横いっぱいに広がります。
ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは上下に一行分程度の余白が入ります。
他のブロックレベル要素やインライン要素を含むことができます。

インライン要素(Inline Elements)

主に文章の一部として扱われ、データや他のインライン要素を内容とすることのできる要素です。
インライン要素はその名の通り「ラインの中」(=行の中の一部)を定義します。
例えば<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。
文章の一部として表示されるため、一般的なブラウザでは上下の余白は入りません。

これはp(ブロックレベル要素)です。
これはpの中のspan(インライン要素)です

	ブロックレベル要素	インライン要素
並び方	改行して縦に積む	横並び
高さの初期値	内容で決まる	内容で決まる
横幅の初期値	親要素の横幅に対して100%	内容で決まる
widthとheightの指定	可	不可
paddingの指定	上下左右	上下左右＊
marginの指定	上下左右	左右のみ
text-alignの指定	可	不可(そもそも横幅がないから)
vertical-alignの指定	不可	可
主な要素	h1〜h6、div、p、dl、ul、ol、table、hr、address、blockquote、fieldset、form、noscript、pre、map など	a、br、img、span、abbr、b、bdo、cite、code、dfn、em、i、iframe、input、kbd、label、object、q、s、samp、select、small、strong、sub、sup、textarea、u、var など

実は、HTML5ではブロックレベル要素とインライン要素という分類方法はなくなり、現在は正しい文章構造の表現を重視したカテゴリーという考え方でHTMLタグを７つに分類しています。→カテゴリーとコンテンツモデル
ただし、どちらの性質を持つか(初期値がインラインかブロックか)で中に入れていいものとそうでないものがあるので、重要な考え方です。

2日目 文書の構造を明確にする

文書構造を明確にするタグ

<section>〜</section>

<article>〜</article>

<aside>〜</aside>

<nav>〜</nav>

<main>〜</main>

<header>〜</header>

<footer>〜</footer>

<address>〜</address>

<div>〜</div>

見出しタグ

<h1>〜</h1>(h1〜h6)

段落と改行のタグ

<p>〜</p>

br(空要素)

テキストに意味を持たせるタグ

<a>〜</a>

target="_blank"の脆弱性について

<strong>〜</strong>

<em>〜</em>

<i>〜</i>

<b>〜</b>

<small>〜</small>

<span>〜</span>

コンテンツの埋め込み

<img(空要素)>

<picture>〜</picture>

img srcsetとpictureの違い

embed<(空要素)>

<object>〜</object>

<iframe>〜</iframe>

ブロックレベル要素とインライン要素

ブロックレベル要素(Block-Level Elements)

インライン要素(Inline Elements)

2日目　文書の構造を明確にする