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つのタグを使うと見出しとして表すことができます。

index.html

<h1>テキストテキスト</h1>
<h2>テキストテキスト</h2>
<h3>テキストテキスト</h3>
<h4>テキストテキスト</h4>
<h5>テキストテキスト</h5>
<h6>テキストテキスト</h6>

h1~h6までありますが、例を用いて使い方を考えましょう。
書籍の中で見出しとなる部分は以下のようなものが考えられます。

本のタイトル
各章のタイトル
さらにその章の中に含まれる区切りのタイトル

それぞれ、同じタイトルではありますが、

本のタイトル　→　本全体の見出し
各章のタイトル　→　本の中の文章をいくつかに区切った際の見出し
章の中の区切りのタイトル　→　さらに章を区切った際の塊につく見出し

というように、上から順に細かい内容になっていきます。
HTMLでは細かくなるごとにh*の数字が大きくなっていきます。
つまり、前述の例をHTMLで書くと、

例

<h1>本のタイトル</h1>
<h2>各章のタイトル</h2>
<h3>さらにその章の中に含まれる区切りのタイトル</h3>

といったようになります。
見出しタグを使う際には、ページ内のコンテンツを区切っていき、どの位置にいるかに注意して使うようにしましょう。

段落

段落を表す場合には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タグはありますので、デザインやページ構成に合わせて適切にタグを選択できるようにしてください。