HTMLとは
簡単にいうと、文章に意味を持たせるために使う言語のこと。
コンピュータになにかしらの本をテキストにして渡しても、見出しや作者や本文といった区別がつきません。
それをHTMLでタグ付けすることによって、コンピュータに識別させることができるようになります。
この記事では書籍を例に解説していきます。
文章構造
文章構造は各タグを設置して作っていくものですが、htmlであること、コンテンツであることを示すために必須のタグがあります。
<!DOCTYPE html>
<html>
<head>
<!-- ここにページの情報を載せます -->
</head>
<body>
<!-- ここにページ内のコンテンツを載せます -->
</body>
</html>
上記に書かれてるhtml、 head、bodyはHTMLを使ってページを作成する際には必ず必要なタグになります。
それぞれ下記のような役割があります。
- html → HTML文書であることを示す
- head → 文書の基本的な情報を示す
- body → コンテンツの中身を書く
headタグ内の要素
タイトル
後述する見出しとは別に、ブラウザのタブに表記されたりブックマークで表示される用のタイトルが必要になります。
その指定をtitleタグを使って行います。
今開いているブラウザのタブを見ていただくと、「【初学者向け】HTMLの押さえておくべきポイント - Qiita」と表示されているかと思います。それです。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
</body>
</html>
メタ情報
文字コードの指定や検索キーワードなど様々な情報をmetaタグを使って指定します。
この指定をしっかりしておくと、ページの動作やSEO対策など様々な効果があります。
メタタグのざっくりと必要な内容についてはサルワカのこの記事にわかりやすくまとまっていますので、こちらを読んでいただければいいかと思います。
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="メタタグはこんな感じで書きます。">
</head>
</html>
文書の参照
他のCSSファイルを読んだりする際にlinkタグを使います。
これについてもサルワカの記事がわかりやすくまとめてくれています。
<head>
<link rel="stylesheet" href="ここにパスを書く" type="text/css">
</head>
上記のようなmetaタグやlinkタグは最初の頃はおまじないのようにコピペで作っていってもよいですが、何処かのタイミングで必ず確認をしておいた方がいいです。
bodyタグ内の要素
見出し
HTMLでは下記の6つのタグを使うと見出しとして表すことができます。
<h1>テキストテキスト</h1>
<h2>テキストテキスト</h2>
<h3>テキストテキスト</h3>
<h4>テキストテキスト</h4>
<h5>テキストテキスト</h5>
<h6>テキストテキスト</h6>
h1~h6までありますが、例を用いて使い方を考えましょう。
書籍の中で見出しとなる部分は以下のようなものが考えられます。
- 本のタイトル
- 各章のタイトル
- さらにその章の中に含まれる区切りのタイトル
それぞれ、同じタイトルではありますが、
- 本のタイトル → 本全体の見出し
- 各章のタイトル → 本の中の文章をいくつかに区切った際の見出し
- 章の中の区切りのタイトル → さらに章を区切った際の塊につく見出し
というように、上から順に細かい内容になっていきます。
HTMLでは細かくなるごとにh*の数字が大きくなっていきます。
つまり、前述の例をHTMLで書くと、
<h1>本のタイトル</h1>
<h2>各章のタイトル</h2>
<h3>さらにその章の中に含まれる区切りのタイトル</h3>
といったようになります。
見出しタグを使う際には、ページ内のコンテンツを区切っていき、どの位置にいるかに注意して使うようにしましょう。
リスト
本を開くとまず出てくるのが、目次だと思います。
この目次を表現する際にリストを使います。
<ol><!-- Ordered List -->
<li></li>
<li></li>
</ol>
<ul><!-- Unordered List -->
<li></li>
<li></li>
</ul>
<dl><!-- Description List -->
<dt></dt>
<dd></dd>
</dl>
それぞれコメント部分に書かれているものの略になっています。
略される前のものを見れば意味がわかりますが、
olは順序のあるリストになります。
- あいうえお
- かきくけこ
ulは順序のないリストになります。
- あいうえお
- かきくけこ
dlは上の2つと少し使い方が変わりますが、定義・説明リストになります。
要素の説明などで使うことが多いですが、例えば
<dl>
<dt>HTML</dt>
<dd>コンピュータが読めるようにテキストに意味を持たせるためのもの</dd>
<dt>CSS</dt>
<dd>HTMLを装飾するもの</dd>
</dl>
というような書き方をしますが、それぞれのタグが下記を意味しており、辞書のような形にしたいときに使います。
- dt → 定義される言葉
- dd → 定義
それぞれコンピュータが理解する際の意味が異なりますので、特にulとolの使い分けができるようにしておいたほうがいいです。
段落
段落を表す場合にはpタグを使います。
<p>ここに文章が入ります。</p>
<p>
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。<br><!-- <br>は改行を表します -->
ここに文章が入ります。ここに文章が入ります。
</p>
書籍の本文はほとんどこれを使えば賄えるはずです。
特に理由がない場合（他のタグが適切な場合など）は文章はこれで囲うようにしましょう。
小学校の国語の授業で各段落に数字をふって段落分けをするといったことをしたことがあるかと思いますが、あの要領でpタグで囲えば綺麗なマークアップができます。
どうやらアトモスフェアの高い位置まで到達したようだった。空は真っ暗で、星の瞬きもなくなっていた。
丘の上では彼方に広がる水平線が同じ高さに見えるのと同じ錯覚によって、眼下に真っ暗な雲が広がり、車は巨大な暗い空間の真ん中に浮いているように見えた。その空間の上半分は銀色にきらめいていた。
上記のような文章があった場合、下記のようにマークアップします。
<p>どうやらアトモスフェアの高い位置まで到達したようだった。空は真っ暗で、星の瞬きもなくなっていた。</p>
<p>丘の上では彼方に広がる水平線が同じ高さに見えるのと同じ錯覚によって、眼下に真っ暗な雲が広がり、車は巨大な暗い空間の真ん中に浮いているように見えた。その空間の上半分は銀色にきらめいていた。</p>
<!-- この程度であれば以下のような書き方でも問題ないです（brで改行させちゃう） -->
<p>
どうやらアトモスフェアの高い位置まで到達したようだった。空は真っ暗で、星の瞬きもなくなっていた。<br>
丘の上では彼方に広がる水平線が同じ高さに見えるのと同じ錯覚によって、眼下に真っ暗な雲が広がり、車は巨大な暗い空間の真ん中に浮いているように見えた。その空間の上半分は銀色にきらめいていた。
</p>
１行ごとにpタグで囲うとめんどくさいしまとまりとして捕らえられていない可能性があるので、大きな枠として文章をpタグで囲って、brでタグで改行する、というようにした方がスマートかもしれません。
リンク
別ページ部のリンクを貼る場合はaタグを使います。
リンクにしたい箇所をaタグで囲えば囲った部分はすべてリンクになります。
<a href="https://saruwakakun.com/"></a>わかりやすい
上記のように書くと
サルワカわかりやすい
というように、囲われているサルワカ部分のみリンクが張られます。
また、target属性をつけると、リンクの開き方もカスタマイズできます。
<a href="" target="_blank"></a> <!-- _blankを指定すると別タブで開かれます -->
画像
imgタグを使って画像の表示をします。
<img src="ここにパスを入れます" alt="ここに代替テキストを入れます">
src属性で画像のパスを選択し、alt属性で画像が表示されない場合に代わりに表示されるテキストを指定します。
そのほかにもimgタグに直接width=""といったようにサイズの指定をしたりもしますが、見た目の調整はCSSで行った方がいいです。
まとめ
ざっくりとよく出てくるタグの説明をしましたが、HTMLの根本はページの構成をコンピュータに伝えることです。
この記事でまとめたもの以外にもHTMLタグはありますので、デザインやページ構成に合わせて適切にタグを選択できるようにしてください。