最低限知っておくべきHTML

ホームページを自分で作成管理するためにHTMLは必要な知識です。

HTMLすべてを完全にマスターするまでの努力は必要ありませんが、ここにあげる最低限知っておくべきHTMLは理解できるようにできる限り分かりやすく解説させて頂きます。

HTML中のコメント

タグ説明	コメントタグコメントを記述するタグ
開始タグ	<!--
終了タグ	-->

コメントとは

自分で作成したHTMLの中身を後で見てわかりやすいようにコメントをHTML内に記載することができます。

コメントはプログラムのソースコードにおいて「実行しない部分」のことで、一般ユーザーが通常閲覧する画面には表示されません。

コメントタグはコメントを書き加えるだけではなく、一旦その部分のコードのみを実行させたく無い時にコメントタグで囲んで強制的にその部分を実行させないなどの利用方法もあり、これを「コメントアウト」と呼びます。

HTMLのソースを確認しようと思えば誰でも簡単に見れてしまいますので、見られて困るような内容は記載しないように注意しましょう。

コメントサンプルデモ

 HTML
<!-- コメント文章1行目
コメント文章2行目
コメント文章3行目 -->

改行を表すbrタグ

タグ説明	brタグは文章を改行するタグ
構造	意味無し
表現	改行する
開始タグ	<br>
終了タグ	なし

brタグとは

HTMLを使った文章表現において改行はbrタグを使います。

brタグを入れたところで改行されます。

英語の「break」の略です。

brタグの注意点

長文を書くときに通常「。」が入る文の区切りで改行します。

こういった改行の時にbrタグを使います。

メールなどを書く時に見やすさ目的である程度の文字数で改行を入れる使い方などをされる方がいますが、こういった見やすさ目的での改行としてbrコードを利用するとみる側のブラウザー環境によって意図しないカ所で改行されるなどのトラブルに繋がりますので見た目目的での改行にはbrタグを使わずCSSで対処してください。

brタグサンプルデモ

 HTML
<p>文章を書くときには、文章はいくつかの内容ごとに文節に分かれます。<br>
文節はHTMLにおいてpタグで囲み、句点で終わる一続きの言葉である文はbrタグで改行します。</p>

表示例

文章を書くときには、文章はいくつかの内容ごとに文節に分かれます。
文節はHTMLにおいてpタグで囲み、句点で終わる一続きの言葉である文はbrタグを使って改行を行います。

段落を表すpタグ

タグ説明	pタグは段落を表すタグ
構造	一つの段落を表す
表現	段落単位で改行する
開始タグ	<p>
終了タグ	</p>

pタグとは

文章を内容ごとに区切った、いわゆる一つの段落を表すタグがpタグです。

pタグで囲った範囲が一つの段落を表し、pタグの前後は改行されます

pタグサンプルデモ

 HTML
<p>文章を書くときには、文章はいくつかの内容ごとに文節に分かれます。<br>
文節はHTMLにおいてpタグで囲み、句点で終わる一続きの言葉である文はbrタグで改行します。</p>

表示例

見出しを表すhタグ

開始タグ<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

タグ説明	hタグは見出しを表すタグ
構造	見出しと見出しレベルの定義
表現	変化無し
終了タグ	</h1> </h2> </h3> </h4> </h5> </h6>

hタグとは

見出しはh1〜h6の6段階あり、h1はページ毎のタイトル内容と意味が重複する事が多いのでページ内では通常h2を大見出し、h3を中見出し、h4を小見出しのように運用します

hタグで囲まれた範囲が見出しを表します。

段落を束ねるsectionタグ

タグ説明	sectionタグは段落を束ねるタグ
構造	段落の固まりを表す
表現	変化無し　終了タグで改行する
開始タグ	<section>
終了タグ	</section>

sectionタグとは

HTML文章の中で単独の段落を表すタグがsectionタグです。

章や段落単位の区切りの構文をGoogleのクローラーに認識させる事ができますのでSEOを意識してユーザーにわかりやすいWebサイトを作る上で重要な役割を果たします。

段落（セクション）を表現する意味的に使用し、必ずではありませんが、通常は段落（セクション）には見出しがあり、hタグとpタグ部分を合わせてsectionタグで囲みます。

sectionタグの注意点

sectionタグと混同しがちなタグにarticleタグやdivタグがあります。

articleタグはページ単位など独立したコンテンツとして一つの記事になってる場合などに完結した一つのコンテンツであることを構造的にクローラーに認識させるためのタグです。

よってsection要素の内容が単独で意味をもつ場合は、代わりにarticleを使用します。

divタグはCSSを使って見た目を変える際の範囲指定などのために利用するものですので構造化においては意味を持ちません。

段落（セクション）単位で見え方を変えたいときはsectionタグをdivタグで囲んでCSSを設定します。

自己完結した文章ブロックを囲むarticleタグ

タグ説明	articleタグは自己完結した文章ブロックを表すタグ
構造	一つの完結した文章ブロックを定義する
表現	変化無し　終了タグで改行する
開始タグ	<article>
終了タグ	</article>

articleタグとは

ページ内で自己完結した文章ブロックを表します。

通常1記事1ページでWebを作成する際には記事にあたるボディ部分全体をarticleタグで囲むことでクローラーは一つの独立した記事であることを認識します。

1記事1ページで作ってる場合ならarticleタグで囲んで無くても必然的に一つのコンテンツとして認識されるでしょうから本来の使い方は1ページの中に複数の独立したコンテンツを記載するときに、コンテンツごとにarticleタグで囲むことでよりクローラーに正しく構造を理解してもらえる事に繋がると思われます。

メインのコンテンツを表すmainタグ

タグ説明	mainタグはページ内で一番メイン部分を表すタグ
構造	ページ内の主要な内容の範囲を表す
表現	変化無し
開始タグ	<main>
終了タグ	</main>

mainタグとは

文章<body>の主要な内容を表します。

ページ内で一番メインとなる部分を表します。

ページ内では複数指定することはできませんので2つ以上置くことはできません。

ナビゲーションを表すnavタグ

タグ説明	navタグはページ内ナビゲーション部分を表すタグ
構造	メニュー・パンくず・目次などを表す
表現	変化無し
開始タグ	<nav>
終了タグ	</nav>

navタグとは

navタグは現在のページ内他の部分や文章へのナビゲーションリンクを提供するためのタグです。

ナビゲーションの利用例としてメニューやパンくずリストや目次などがあります。

間接的な内容・余談を表すasideタグ

タグ説明	asideタグは間接的な内容・余談を表すタグ
構造	間接的な内容・余談・サイドバーを表す
表現	変化無し
開始タグ	<aside>
終了タグ	</aside>

asideタグとは

asideタグは、文章のメインコンテンツと間接的な関係しか持っていない文章の範囲を表現します。

具体的にはサイドバーのようなエリアをします際に使われます。

段落区切りを表すhrタグ

タグ説明	hrタグは段落内で区切りを表すタグ
構造	段落内の要素間における区切りを表す
表現	水平線
開始タグ	<hr>
終了タグ	なし

hrタグとは

hrタグは、horizontal rule（水平線）の略で、段落内の要素間においての区切りを表します。

hrタグの注意点

ブラウザー上でhrタグは水平線で表示されますが、ただ単に水平線を引く見た目のために使うときはCSSを使用して水平線を引いてください。

以前は属性で「線の長さ」「線の太さ」「水平位置」「影付きor影無しの選択」などができましたがHEML5では廃止されましたので見た目の変更はCSSを使って設定してください。

hrタグサンプルデモ

 HTML
<p>これはサンプル文です
これはサンプル文です
これはサンプル文です
</p>
<hr>
<p>これはサンプル文です
これはサンプル文です
これはサンプル文です
</p>

表示例

これはサンプル文です
これはサンプル文です
これはサンプル文です

重要な要素を強調するstrongタグ

タグ説明	strongタグは重要な要素を強調して表すタグ
構造	重要な要素を強調する
表現	太字
開始タグ	<strong>
終了タグ	</strong>

strongタグとは

strongタグは文章の一部で強い重要な部分を囲むことで重要要素であることを表します。

ブラウザーで見た時には一般的に太字で表現されます。

strongタグの注意点

重要な要素ではないカ所を太字で表示したいだけの時はstrongタグを利用せずにCSSを使って表現します。

SEOを意識してページ作りをするときにはページテーマに関連する重要なキーワード以外を必要以上にstrongタグを使うとクローラーが文章の構造を解析したときに重要なキーワードがぼやけてしまいます。

このようなケースにはstorongタグではなくてbタグを使います。

逆にペーににおける主要テーマの重要キーワード部分にはstronタグを使うことで重要であることを強調できます。

strongタグサンプルデモ

 HTML
<p>文章にはメリハリがあり<strong>特に重要な文章と</strong>一般的な文章があります。</p>

表示例

文章にはメリハリがあり特に重要な文章と一般的な文章があります。

フォントサイズを小さくするsmallタグ

タグ説明	smallタグは付随的なテキストを一回り小さなフォントで表すタグ
構造	注釈や著作権表示や法的表記を表す
表現	小さなフォントで表示
開始タグ	<small>
終了タグ	</small>

smallタグとは

注釈や著作権表示や法的表記を表します。

著作権表示・法的表記・付随コメント・注釈など印刷物の習慣で小文字になるような付帯的なテキストを表す時に使用します。

ブラウザーでは小さなフォントで表示されますがCSSで適切に設定します。

smallタグサンプルデモ

 HTML
<p>さんま定食　定価800円<small>（税別）</small></p>

表示例

さんま定食　定価800円（税別）

略語や短縮語を表すabbrタグ

タグ説明	addrタグは略語や短縮語を表すタグ
構造	略語や短縮語を表す
表現	下線付き文字で表示・マウスポインターが上で静止時タイトル属性で定めた文字を表示
開始タグ	<addr>
終了タグ	</addr>

abbrタグとは

abbrタグはabbreviation（略語）の略で、略語や短縮語の表記部分を表します。

title属性を指定することで、省略していない名称を示す事ができます。

title属性は略語の完全形または説明のみで使用し、その他を含んではいけません。

以前はacronymタグがあり単に頭文字を並べたものはacronymタグを使い、略語全体ではabbrタグを使うなど運用面で分かりにくかったのですがHTML5ではacronymタグが廃止されたので略語＝abbrタグという使い方で問題ありません。

必ずしもすべての略語をaddrタグでマークアップする必要はありません。

読み手にとって馴染みのない略語が文書中に記載される場合はaddrタグとtitle属性を使って略語の完全形を提供してください。

abbrタグサンプルデモ

 HTML
<p>ホームページ制作のため<abbr title="Hyper Text Markup Language">HTML</abbr>と<abbr title="Cascadion Style Sheets">CSS</abbr>を勉強する</p>

表示例

ホームページ制作のためHTMLとCSSを勉強する

文字列を太字で表すbタグ

タグ説明	bタグは文字列を太字で表すタグ
構造	意味無し
表現	文字で表示
開始タグ	<b>
終了タグ	</b>

bタグとは

bタグはbold（太字）の略で文字を太字にするためのタグです。

強調などの特別な意味合いを持たせることなく、他と区別して注意を引きたい文字列を太字で表します。

長文の説明文などで要点カ所のみを斜め読みしても理解できるような文書の場合、要点カ所のみbタグで太字に変えて表示させるなどといった使い方があります。

文章の構造的に意味を持たず太字で表示される目的であればCSSで設定すべきことですからbタグを利用するニーズはあまりないように思います。

スタイルシートで指定する場合は<span style="font-weight: bold;">～</span>で太字を表せます。

bタグサンプルデモ

 HTML
<p>文字列の中で一部の文字列を<b>太字</b>にしたいときにbタグを使います</p>

表示例

文字列の中で一部の文字列を太字にしたいときにbタグを使います

引用先を表すciteタグ

タグ説明	citeタグは引用先を表すタグ
構造	作品のタイトル
表現	斜体で表示
開始タグ	<b>
終了タグ	</b>

citeタグとは

citeタグはcitation（引用・参照）の略で出典や参照先、引用先へのリンクをを表します。

citeタグの注意点

citeタグと混同しがちなタグがblockquoteタグやqタグです。

<blockquote>タグや<q>タグは文章事態を引用する際に使用しますが、<cite>タグは作品のタイトル、サイト名、規格名などを引用する際に使用されます。

一般的にciteタグはblockquoteタグで囲んだ引用文章の中で引用元を表す場合などに使います。

ホームページでは引用を使うことが多くありますが、引用をする場合に明確に引用した内容であることを示すために引用する部分を長文であれば<blockquote>タグで囲み、短文であれば<q>タグで囲みます。

そしていずれの場合も引用元をciteタグで明確にすることで著作権侵害のトラブルを防ぐ効果がありますので正しい使い方を心がけましょう。

citeタグサンプルデモ

 HTML
<blockquote>
<p>citeは、引用された創作物の参照を表し、作品のタイトルを含む必要があります。</p>
<cite>
<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/cite">MDN web docs</a>
</cite>
</blockquote>

表示例

citeは、引用された創作物の参照を表し、作品のタイトルを含む必要があります。

MDN web docs

プログラミングコードを記述するcodeタグ

タグ説明	codeタグはプログラミングコードを表すタグ
構造	プログラミングのソースコード
表現	斜体で表示
開始タグ	<code>
終了タグ	</code>

codeタグとは

codeタグは各種プログラミングのソースコードを表します。

一般的なホームページでは利用する機会は少ないでしょうが、このページの様にHTMLなどの解説をするときにはソースコードをそのままHTMLに記述すると変換されて表示されてしまうためcodeタグで囲んだ範囲をソースコードそのままで表現できます。

codeタグの注意点

WordPress使用時はcodeタグを使って記述してもうまく表示されません。

wordpressでcodeをそのまま表示させたい場合は「テキスト」モードではなく「ビジュアル」モードで記述すれば「＜」などがテキストモードで見たときに「<a」のように変換されることでソースコードをそのまま表示できます。

用語の定義を表すdfnタグ

タグ説明	dfnタグは用語の定義を表すタグ
構造	定義
表現	斜体で表示
開始タグ	<dfn>
終了タグ	</dfn>

dfnタグとは

dfnタグはdefinition（定義）の略で、用語の意味を定義する

dfnタグで用語の定義をする場合には、dfnタグを囲む「pタグ」「sectionタグ」または「dlタグ」の同じグループ中に用語に対する定義を含める必要があります。

dfnタグにtitle属性を指定する場合は、title属性の値が定義用語になります。

用語の定義は一般的に略語であることが多いのでdfnタグでabbrタグを囲んで定義する使い方がオススメです。

dfnタグサンプルデモ

 HTML
<p><dfn>
<abbr title="Search Engin Optimization">SEO</abbr>
とは検索エンジン最適化のことです。</dfn></p>

表示例

SEOとは検索エンジン最適化のことです。

強調したい文字を表すemタグ

タグ説明	emタグは強調したい文字を表すタグ
構造	強調
表現	斜体で表示
開始タグ	<em>
終了タグ	</em>

emタグとは

emタグはemphasis（強調）の略で文字列を強調するときに使います。

emタグの注意点

emタグと混同しがちなstrongタグやbタグがありますが、下記の様な関係になります。

strongタグ（重要）>emタグ（強調）>bタグ（意味無し）

正直いって重要と強調を文書内で使い分ける機会ってそんなにありませんので、私の場合は特にemを使わないといけないようなカ所がありませんのでstrongタグを使うようにしています。

emタグサンプルデモ

 HTML
<p>文字列の中で<em>強調したい部分</em>にemタグを使います。</p>

表示例

文字列の中で強調したい部分にemタグを使います。

イタリック体で表示するiタグ

タグ説明	iタグは文字をイタリック体にするためのタグ
構造	意味無し/td>
表現	斜体で表示
開始タグ	<i>
終了タグ	</i>

iタグとは

iタグとは文字をイタリック体（右に傾いた斜体）にするためのタグで、～のタグで囲まれた間の文字はイタリック体になります。

iタグはHTML5では、分類学上の名称、専門用語、他言語の慣用句、思考の内容、船の名前といった、印刷物であれば意味論的にイタリックを使う場面でiタグを使うとされています。

文字を強調として表したいときはemタグが推奨されます。

用語の定義を表したいときはdfnタグが推奨されます。

他に適切なタグがある場合はそちらを使用し、斜体に見せたいだけの場合はスタイルシート{font-style:italic;}で代替できるので通常はスタイルシートで指定します。

iタグサンプルデモ

 HTML
<p>囲った部分が<i>イタリック体</i>で表示されます</p>

表示例

囲った部分がイタリック体で表示されます

 command
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMLの体系</title>
</head>
<body>
<nav>
</nav>
<main>
<h1>HTMLの体系</h1>
<p>HTMLは見た目の表示と構造化によってタグが変わる</p>
<article>
<h2>見た目を変えるタグ</h2>
<p>ｈ2タイトルに対する文章を記載<br>
句読点はbrで改行する。</p>
<section>
<h3>divタグ</h3>
<p>範囲してCSSを指定するdivタグ</p>
</section>
</article>
<article>
<h2>構造化を示すタグ</h2>
<p>mainタグやarticleタグ、sectionタグは<br>
クローラーに文章の構造を理解させるために使う</p>
</article>
</main>
</body>
</html>