HTMLの移り変わり
“HTML Living Standard”の勉強の仕方
“HTML Living Standard”に関しては、HTML5の仕様が引き継がれているので、慌てて移行する必要がないという解説が多いと思います。とはいえ言語学習は時間がかかるので、HTML Living Standardを学び始めましょう。(日本語訳はこちら)
一つ一つのHTMLの文法や構造を理解することはとても大切です。HTML5までは、詳しい解説本やサイトが沢山ありました。今後は、HLSに関するものが増えてくるでしょう。口コミで人気のあるものや、検索上位のサイトをいくつか選定し、習得したら、ステップアップするといった学習方法も良いと思います。
お薦めは、ベースとなるテンプレートを作ることです。ベーステンプレートを編集し、構築したいアイデアを付け足します。テキストエディタは、Visual Studio Codeがお薦めです。いくつかのブラウザなどでテスト表示させます。イメージ通りの表示にならなければ、ベースに戻り、別のアプローチを試します。地道ですが、確実な方法だと思っています。
HTML Living Standardのテンプレート
<!-- html要素 -->
<!DOCTYPE html><!-- 【必須】DOCTYPE宣言の指定 -->
<html lang="ja" dir="ltr><!-- 【必須】日本語・書字方向左から右指定 -->
<!-- head要素 -->
<head><!-- 【必須】head要素 -->
<title>ページのタイトル</title><!-- 【必須】 -->
<base href="https://www.example.com/" target="_blank"><!-- 【推奨】 -->
<meta http-equiv="content-security-policy" content="default-src 'self' ; font-src * ; img-src *"><!-- 【推奨】フォントと画像以外は他サイトからの読み込み不可(CSP) -->
<meta charset="UTF-8"><!-- 【必須】UTF-8の指定 -->
<!-- meta name属性 -->
<meta name="author" content="ページの著者名" /><!-- 【推奨】 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 【推奨】スマートフォン端末画面の幅に合わせる -->
<meta name="description" content="ページの解説" /><!-- 【推奨】 -->
<meta name="referrer" content="no-referrer-when-downgrade"><!-- 【任意】httpsから httpに対してはリファラーを送信しない -->
<!-- link rel属性 -->
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico"><!-- 【推奨】 -->
<link rel="icon" type="image/png" href="fav.png" /><!-- 【任意】 -->
<link rel="apple-touch-icon" type="image/png" href="apple-touch-icon.png" sizes="180x180" /><!-- 【任意】iOS向けWebクリップの追加 -->
<link rel="icon" type="image/png" href="android-touch-icon.png sizes="192x192"" /><!-- 【任意】Android向けWebクリップの追加 -->
<link rel="canonical" href="https://www.example.com/index.html" /><!-- 【推奨】トップページの絶対URL -->
<link rel="next" href="https://www.example.com/" /><!-- 【任意】次ページのURL -->
<link rel="prev" href="https://www.example.com/" /><!-- 【任意】前ページのURL -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css"><!-- 【任意】CDN製CSSのリセット -->
<link rel="stylesheet" href="css/style.css" media="screen"><!-- 【推奨】画面用CSS -->
<link rel="stylesheet" href="css/print.css" media="print"><!-- 【任意】印刷用CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /><!-- 【任意】FONT AWESOMEアイコンを利用(https://fontawesome.com/icons) -->
<script type="text/javascript" src="https://www.example.com/JavaScript.js" defer></script><!-- 【任意】 -->
</head><!-- 【必須】head要素終了 -->
<!-- body要素 -->
<body><!-- 【必須】 -->
<!-- wrapper class全体レイアウト用 -->
<div class="wrapper"><!-- 【必須】外箱 -->
<!-- header要素 -->
<header><!-- 【必須】ヘッダー -->
<h1>ページのタイトル</h1><!--【推奨】H1ページのタイトル -->
<nav><!-- 【必須】ナビゲーションメニュー -->
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">製品</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header><!-- 【必須】header要素終了 -->
<!-- container classレイアウト用 -->
<div class="container"><!-- 【必須】containerクラス内箱 -->
<!-- main classレイアウト用 -->
<main class="main"><!-- 【必須】メインコンテンツ用 -->
<!-- article要素 -->
<article>
<h2>メイン記事1</h2>
<p>メイン記事1の内容をここに記述します。</p>
</article>
<!-- section要素 -->
<section>
<h3>セクション1</h3>
<p>セクション1の内容をここに記述します。</p>
</section>
<!-- aside要素 -->
<aside>
<h4>補足1</h4>
<p>補足的な内容をここに記述します。</p>
</aside>
</main><!-- 【必須】main終了 -->
<!-- side classレイアウト用 -->
<div class="side"><!-- 【必須】サイドコンテンツ用 -->
<hgroup>
<h2>サイド記事1</h2>
<p>サイド記事1の内容をここに記述します。</p>
</hgroup>
</div><!-- 【必須】side終了 -->
</div><!-- 【必須】container終了 -->
<!-- fotter要素 -->
<footer><!-- 【必須】フッター -->
<h5>フッター情報1</h5>
<p>フッター情報1の内容をここに記述します。</p>
<address>
連絡先情報を表します
</address>
<p>© 2023 サイトの著作権情報</p>
</footer><!-- 【必須】 -->
</div><!-- 【必須】wrapper終了 -->
</body><!-- 【必須】body要素終了 -->
</html><!-- 【必須】html要素終了 -->
テンプレートの使い方と注意点
このテンプレートは、学習用に作成していますので、責任は負いかねますことをご了承いただければと思います。どうぞご自身の責任でご使用ください。コメントアウト、つまり「<!–」「–>」の間はソースコードとして認識されず、無効化するというルールを使って、解説入りで作成してみました。各自で書き換えて分かりやすくしてください。
【必須】HTML Living Standardにおいて必須なものと、今回のサンプル学習用として必須なものが含まれています。
【推奨】通常は入れておいたほうが良いものが含まれています。
【任意】状況により使用することができるものが含まれています。
- PCに、「HLS」といった任意のフォルダを作成してください。
- そのフォルダの中に、「CSS」というフォルダを作ってください。
- 次にこのテンプレートをコピーして、テキストエディタに貼り付けます。
- index.htmlと名前を付けてファイルを「HLS」に保存します。
- 生成されたものをブラウザで開いて表示確認をします。
- テキストエディタを使って、書き換えてください。
- CSSフォルダの中に、CSSファイルを作成します。”シリーズHTMLを学ぶ”第三で使用します。
要素とは
要素とは、HTML文書の構成単位であり、開始タグと終了タグで囲まれた範囲を指します。
開始タグは、要素の名前と属性で構成されます。属性は、要素の動作を制御するために使用されます。コンテンツは、要素のテキストコンテンツまたは子要素です。終了タグは、開始タグと同じ名前で、斜線「/」で始まります。
HTMLの要素と属性の例を次に示します。
<p class="lead">これは、HTMLの要素と属性の例です。</p>
この例では、”p”要素は、”lead”クラスを持つ要素です。”lead”クラスは、例えばCSSで指定することにより、要素を太字で表示するなどのために使用できます。
要素の種類
- Metadata content: 文書のメタデータ(情報)を表す要素です。
<head>や<title>などが該当します。 - Flow content: 文書の流れに沿って配置される要素です。
<div>や<h1>などが該当します。 - Sectioning content: 文書の構造を区分する要素です。
<section>や<article>などが該当します。 - Heading content: セクションの見出しを表す要素です。
<h1>から<h6>までが該当します。 - Phrasing content: 文章の一部を表す要素です。
<span>や<a>などが該当します。 - Embedded content: 外部のリソースを埋め込む要素です。
<img>や<video>などが該当します。 - Interactive content: ユーザーとのインタラクションを可能にする要素です。
<button>や<input>などが該当します。
属性とは
HTMLの属性は、要素の動作を制御するために使用されます。属性は、開始タグの要素名の後ろに半角スペースを開けて、属性名=”属性値”の書式で記述します。
属性とは、要素に付与される追加情報であり、開始タグ内に記述されます。属性は名前と値のペアで構成されます。
属性値を囲む引用符は、ダブルクォーテーションマーク「”」とシングルクォーテーションマーク「’」のどちらでも使用できます。
例えば、以下のコードは、img要素にsrc属性とalt属性を付与しています。
<img src="image.jpg" alt="画像">
属性には以下のような種類があります。
- Global attributes: すべての要素に共通して使用できる属性です。
idやclassなどが該当します。 - Event handler attributes: 要素にイベントリスナーを登録するための属性です。
onclickやonloadなどが該当します。 - Element-specific attributes: 特定の要素にだけ使用できる属性です。
srcやaltなどが該当します。
class属性とは
class属性とは、global attributesの一種であり、要素にスタイルや動作を適用するための識別子です。classは一つだけ指定できますし、空白区切りで複数指定することができます。
class属性の書き方は、以下のようになります。
<要素名 class=”クラス名1 クラス名2 …”>内容</要素名>
例えば、以下のコードでは、p要素にredとboldというクラス名を指定しています。
<p class="red bold">これは赤く太字のテキストです。</p></pre>
classはCSSやJavaScriptで要素を選択する際に便利です。class属性は複数の要素に対し同名クラスを指定することが可能です。CSSにもう少し詳しく説明したいと思うのですが、軽く理解していただくために、触れておきます。
上記のHTML構文の例にCSSで記述すると、redとboldというclassに対して、セレクタに「.記号」を付けて指定します。例えば、以下のように書くと、redクラスには赤色、boldクラスには太字がテキストに適用されます。
.red {
color: red;
}
.bold {
font-weight: bold;
}
id属性とは
id属性とは、HTMLの要素に一意の識別子を付けるための属性です。id属性は、CSSやJavaScriptで要素を操作する際に便利です。
id属性の値は、英数字やハイフン、アンダースコアなどを使って自由に決めることができます。class属性と違い、id属性の値は、同じHTML文書内で重複しないように注意しましょう。id属性の使い方は、以下のようになります。
<要素名 id=”識別子”>内容</要素名>
id属性の使い方は簡単です。HTMLの要素にid属性を追加し、任意の値を指定します。例えば、以下のコードでは、h1要素にid=”title”という属性を付けています。
<h1 id="title">id属性の使い方</h1>
CSSでid属性を使う場合は、セレクタに「#記号」を付けて、id属性の値を指定します。例えば、上記のHTML構文に、以下のようなCSS書くと、id=”title”という属性を持つ要素に、赤色の文字色と太字のスタイルを適用できます。
#title {
color: red;
font-weight: bold;
}
まとめ
今回は、”HTML Living Standard”の勉強の仕方にフォーカスしつつ、要素や属性の関係性をまとめてみました。テンプレート内のコメント注記に、書き込んだものを使って学習すると分かりやすいと思います。自転車の乗り始めの補助輪だと思ってください。慣れてくると、無くても楽しくコーディングできるようになると思います。
テンプレートは、HTML部分のみの記述なので、CSSが無いと、単なる箇条書きのようなものです。”シリーズHTMLを学ぶ”第三では、CSSを使って、装飾していく方法を学んでいきたいと思います。
