こんにちは、株式会社カスタマトリックスの寺尾です。
こちらは 新卒社員と学ぶWEBプログラミング 企画になります。
可能な限り毎日更新していくのでご期待ください。
本日は第六回、「HTMLの書き方」を説明していきます。
前回はこちら
https://qiita.com/r-terao/items/b081eecf54d4d4e52e8f
第一回はこちら
https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6
HTMLの書き方
HTMLの書き方には少しだけルールがあります。
このルールはどこまでが「表示する内容」でどこまでが「表示しない情報」かを切り分けるために存在します。
<!-- DOCTYPE宣言 -->
<!DOCTYPE html>
<!-- ルート要素 -->
<html lang="ja">
<!-- メタデータ -->
<head>
<title>文書のタイトル</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<!-- コンテンツ -->
<body>
<header>
</header>
<main>
<div>
Test
</div>
</main>
<footer>
</footer>
</body>
</html>
最上部に「DOCTYPE宣言」を記述します。
これはこのドキュメントがHTMLの文書である事を示します。書かなくても動きはしますがブラウザの挙動を統一するために一応書くのが慣例です。
次に「htmlタグ」を記述します。
これはHTML全体の最上位タグになっており、言語設定などの全体設定の記述などが可能です。
その後に「head」「body」と続きます。
headタグはこの文書のタイトルや、読み込む外部ファイル、文字コードなどの文書の内部設定を記述します。
bodyタグは文書コンテンツそのものを入れます。一般的に「header」「main」などで区切って文書を分かりやすく構成します。
HTMLコンテンツの種類
HTMLではメタデータコンテンツとフローコンテンツが存在します。それぞれざっくりheadタグで使うのはメタデータ、bodyタグで使うのはフローと覚えれば問題はありません。
フローコンテンツ内は更に細かいコンテンツに分類が存在します。
画像参照元
- セクショニングコンテンツ
文章の区分などを表す - ヘッディングコンテンツ
見出しを表す - フレージングコンテンツ
文章内部で利用する - エンベッディッドコンテンツ
動画などを埋め込む - インタラクティブコンテンツ
リンクなどのユーザ操作が可能な要素
このように記述するコンテンツが要素ごとに定められているマークアップの構造をコンテンツ・モデルと呼びます。
また、このようにコードの一部を切り取っても意味が伝わるように構造情報自体に意味を与えたものを「セマンティクス」と呼称する事があります。
HTMLには現在110種類ほどのタグが存在します。
全てを使う機会はそうそうないですが、正しい要素を利用する事で検索性を高めたり、自動読み上げなどのアクセシビリティ対応を高める事が可能です。
透明な要素
aタグやvideoタグなど、一部の要素は「機能のみを与えて構造それ自体に影響は与えない要素」が存在します。
これらの要素を「トランスペアレント・コンテンツ・モデル」と呼びます。
トランスペアレントは特徴として「親要素の構造を引き継ぐ」という機能があります。
そのため、リンクなどの機能を構造を崩す事なく与える事が可能なのです。
<p>
フレージングコンテンツしか入れられない
</p>
<span>
<a>
フレージングコンテンツしか入れられない
</a>
</span>
<div>
<a>
ほかのフローコンテンツも入れられる
</a>
</div>
まとめ
- HTMLは構造に意味を持たせる事で「どんな機能（内容）か」「何を子要素に入れられるか」をシンプルに定義している
- トランスペアレントという、構造に影響をほぼ与えず機能を付加する要素が存在する
- 文書の意味や内部情報を定義するメタデータというコンテンツが存在する
HTMLはコンテンツ・モデルを利用する事である程度の自由さを残しつつ、最低限のルールを簡単に守れるようになっている事が分かります。
実際にモデルを厳密に意識しながら記述する事は多くないですが、例えば
- 読み上げ機能に読み上げ不要な情報を読み上げさせない
- 支援技術利用者に「ここはナビゲーションである」と伝えたい
などのUXを高めるプログラミングが可能になります。
次回はCSSのルールなんかを取り扱おうと思います。
おまけ
株式会社カスタマトリックスはエンジニアを募集しています！
完全未経験でも可！