Webサイトの校正やスクレイピングのためにHTMLファイルのつくりを把握しておくことを主な目的とした備忘録です．

タグには属性が付加される場合があります．
属性はタグの持つ動作を調整する役割を担っています．
例えば，aタグは>で閉じるまでにhref属性としてhttps://example.comという値を与えることで，テキスト上にhttps://example.comへのリンクを作成します．

<a href="https://example.com">テキスト</a>

href属性の値を変えることで，違うページのリンクを作成することができます．

タグに囲まれた（またはタグの有効な）範囲で，タグを含んだものを要素といいます．

要素はいくつかの「カテゴリー」に分類されており，要素ごとにどのようなカテゴリーの要素を入れ子にしてよいかを定めた「コンテンツ・モデル」の考え方に立っています．

HTMLファイルの構成

よくあるHTMLファイルは

書類形式の宣言
html要素
1. head要素
2. body要素

の形で構成されています．

例えば，次のような形です．

<!DOCTYPE html>
<html lang="ja">
	<head>
		<!-- head部分 -->
	</head>
	<body>
		<!-- body部分 -->
	</body>
</html>

冒頭の<!DOCTYPE html>はこれがHTMLファイルであることを表しています．
<html lang="ja">はhtmlタグにlang属性を付加しており，その値がja，つまり日本語のサイトであることを表しています．

head要素は検索エンジンやブラウザでよりよい表示結果を出力するために作ります．
body要素はコンテンツを作ります．

コメントアウト

順番が前後してしまいましたが，HTMLでのコメントアウトはで括ることで行います．

タイトル

サイトのタイトルはtitleタグによって，head要素の1つとして書かれます．

<title>サイトのタイトル</title>

CSSの適用

ファイル全体に適用するデザインはhead要素の1つとして書かれます．

HTMLは文章の構造を定めるために用い，デザインとは分離することが望ましいとされています．
拡張子cssの別ファイルを作ることの多いCSSは，各構成要素にデザインを与えます．

リセットCSSの適用

デフォルトのCSSはブラウザの影響を受けるため，リセットするCSSを用いる場合があります．

リセットCSSを適用するには，提供しているサイトを適当に決めて

<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">

のようにします．

外部ファイル読み込み

外部にCSSファイルを置く場合，HTMLファイルのhead要素として，

<link rel="stylesheet" href="CSSファイル">

とします．
外部のCSSファイルは文字化け防止のため，@charset "UTF-8";を冒頭に入れておきます．

外部ソースであるファビコンなどもほぼ同じ方法で設定できます．

HTMLファイルへのCSS埋め込み

HTMLファイルに直接CSSを埋め込む場合には，styleタグにより

<style type="text/css">
	埋め込むCSS
</style>

とします．

タグ内指定

推奨されませんが，タグ内で直接CSSを指定したい場合には，

<h1 style="color: #fff">白文字の見出し</h1>

のようにstyle属性を使用します．

メタ情報

サイトのメタ情報は，サイトの表示方法や検索時等に利用される情報です．
head要素の1つとして，metaタグにより記述されます．

文字コード

文字コードがUTF-8であることを伝える方法です．

<meta charset="UTF-8">

メタディスクリプション

サーチエンジンで検索したときに表示されるサイトの説明文です．

<meta name="description" content="ホームページの説明">

レスポンシブデザインへの対応

表示を閲覧デバイスのディスプレイ幅に合わせるようにする方法です．

<meta name="viewport" content="width=device-width, initial-scale=1">

検索結果に表示されたくない場合

サーチエンジンの検索結果に表示されたくない場合はnoindexを指定します．

<meta name="robots" content="noindex">

著者

著者名の入れ方です．

<meta name="author" content="著者名">

OGPタグ

OGP（オープン・グラフ・プロトコル）はSNSでサイトがシェアされたときに適切な表示を行ってもらうための要素です．
はじめにheadタグでprefix属性を追加して，OGPを使用することを宣言して使います．
表示形式やサムネイル画像を細かく設定することができます．

コンテンツ

コンテンツはbodyタグ内に記します．
表組みや箇条書きなどデザインと関わるものやフォームのように機能と関わるものは長くなるので別の記事に分け，ここでは見出しや記事の区分に関するタグを扱います．

見出し

見出しを作るにはh1〜h6タグを使います．
また，段落はpタグで囲みます．

<h1>ページタイトル</h1>

	<h2>節見出し</h2>

		<p>段落1</p>
		<p>段落2</p>

	<h2>節見出し</h2>

		<p>段落1</p>
		<p>段落2</p>

コンテンツに応じたブロックの分割

以下のようなタグを使うことで，ファイルの中で各コンテンツがどのようなポジションであるか明確になります．

<header>：ヘッダー
<footer>：フッター
<nav>：ナビゲーションメニュー
<article>：記事
<section>：セクション
<main>：メインコンテンツ
<aside>：補足情報
<div>：単なる一かたまり

論理構造に応じて，CSSでそれぞれのブロックごとに統一したデザインを適用すれば，見た目にも使いやすくなるでしょう．

SEO（サーチエンジン最適化），すなわち，検索によく引っ掛けるようにする上で，サイトを巡回しているボットが理解しやすい構成にすることや利用者が使いやすいサイトにすることが重要とされています．

改行

HTMLファイルでは空白や改行は原則として無視されるため，改行には指示が必要です．

brタグによって改行を指示することができます．

改行前の文章<br>改行後の文章

参考文献

Mana (2019)「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」SBクリエイティブ．

HTMLファイルの概説

目次

枠組み