今回は、マークアップ言語のHTMLについてまとめました。
HTMLは、Web開発をするにあたって欠かせない知識となっています。
ぜひ最後までお読みください！
【HTML】基本のまとめ | 初心者向け
1. HTMLとは
HTMLとは、マークアップ言語の1つです。
正式名称を「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」といいます。
マークアップとは、文書の各部分が「どのような役割を持っているのか」を示すことです。
また、ハイパーテキストとは、ハイパーリンクを埋め込むことができる高機能なテキストのことをいい、ハイパーリンクとは、Webページで下線の付いたテキストをクリックすると別ページへ移動するリンクのことをいいます。
2. HTMLでマークアップする理由
HTMLでマークアップする理由には、以下のようなものがあります。
・コンピュータに意味を伝えるため
・Webアクセシビリティため
・検索エンジンに正確な情報を提示する(SEO対策の)ため
HTMLは、装飾や見た目を整えるために使用するのではなく、文章の意味に基づいてマークアップするようにしましょう。
3. タグとは
タグとは、テキストに意味を与える目印のことです。
タグの種類を示す文字や記号を、< と >で括った部分を指します。
タグは基本的に、以下のように書きます。
<タグ名>テキスト<タグ名>先頭のタグを「開始タグ」といい、末尾のタグを「終了タグ」といいます。
開始タグから終了タグまでのひとかたまりを「要素」といいます。
基本的には開始タグと終了タグはセットで記述されますが、例外もあります。
3-1. 属性とは
属性とは、HTMLの要素に追加する情報のことです。
すべてのタグに属性があるわけではありません。
属性は基本的に、以下のように書きます。
すべてのタグに属性があるわけではありません。
属性は基本的に、以下のように書きます。
<タグ名 追加の情報=”内容”>テキスト<タグ名>4. よく使われるタグ
よく使われるタグには、以下のようなものがあります。
・h1〜h6タグ
・pタグ
・brタグ
・liタグ
・ulタグ
・olタグ
・dlタグ・dtタグ・ddタグ
・aタグ
・imgタグ
・tableタグ・trタグ・thタグ・tdタグ
順番に見ていきましょう。
4-1. h1〜h6タグ
h1〜h6タグは、見出しをあらわすタグです。
見出しの重要性に合わせて、h1〜h6を使い分けます。
h1がもっとも重要度が高く、h6がもっとも重要度が低いです。
hは「heading」の頭文字をとったものです。
4-10. tableタグ・trタグ・thタグ・tdタグ
tableタグ・trタグ・thタグ・tdタグは、表をあらわすタグです。
それぞれ以下のような意味をもちます。
・「teble low」の略
・「teble header」の略
・「teble data cell」の略
tableタグ・trタグ・thタグ・tdタグは、以下のように使用します。
それぞれ以下のような意味をもちます。
tableタグ
・いちばん外側を囲むタグtrタグ
・表の行をあらわすタグ・「teble low」の略
thタグ
・表の見出しをあらわすタグ・「teble header」の略
tdタグ
・表の中身をあらわすタグ・「teble data cell」の略
tableタグ・trタグ・thタグ・tdタグは、以下のように使用します。
<table>
<tr><th>年</th><th>売上</th><th>備考</th></tr>
<tr><td>2020</td><td>2000万</td><td>初年度</td></tr>
<tr><td>2021</td><td>2200万</td><td>特になし</td></tr>
<tr><td>2022</td><td>2500万</td><td>特になし</td></tr>
</table>
4-2. pタグ
pタグは、段落(文章のまとまり)をあらわすタグです。
pタグを使用すると自動的に改行されます。
pタグ内で改行してもブラウザの表示で改行されません。
pは「paragraph」の頭文字をとったものです。
4-3. brタグ
brタグは、改行をおこなうタグです。
終了タグはなく、単独で使用します。
brは「break」の略です。
4-4. liタグ
liタグは、リストの項目をあらわすタグです。
必ずulタグやolタグと一緒に使用します。
リスト全体をulタグまたはolタグで囲み、各項目をliタグで囲みます。
liは「list item」の略です。
4-5. ulタグ
ulタグは、項目の順序に「意味をもたない」リストをあらわすタグです。
ulタグは、必ずliタグと一緒に使用します。
ulは「unordered list」の略で、以下のように使用します。
<ul>
<li>可愛い犬</li>
<li>可愛い猫</li>
</ul>
4-6. olタグ
olタグは、順序の項目に「意味をもつ」リストをあらわすタグです。
順序の項目に「意味をもつ」リストとは、手順や順位、目次のようなもののことです。
olタグもulタグと同様に、必ずliタグと一緒に使用します。
olは「ordered list」の略で、以下のように使用します。
順序の項目に「意味をもつ」リストとは、手順や順位、目次のようなもののことです。
olタグもulタグと同様に、必ずliタグと一緒に使用します。
olは「ordered list」の略で、以下のように使用します。
<ol>
<li>右に曲がる</li>
<li>左に曲がる</li>
<li>まっすぐ進む</li>
</ol>
4-7. dlタグ・dtタグ・ddタグ
dlタグ・dtタグ・ddタグは、定義リストや説明リストをあらわすタグです。
それぞれ以下のような意味をもちます。
・リスト全体を囲む
・「definition list」の略
・「definition term(用語)」の略
・「definition description(説明)」の略
dlタグ・dtタグ・ddタグは、以下のように使用します。
それぞれ以下のような意味をもちます。
dlタグ
・説明リスト・リスト全体を囲む
・「definition list」の略
dtタグ
・用語や名前に使用する・「definition term(用語)」の略
ddタグ
・用語や名前の説明に使用する・「definition description(説明)」の略
dlタグ・dtタグ・ddタグは、以下のように使用します。
<dl>
<dt>柴犬</dt>
<dd>茶色くて可愛い生き物</dd>
<dt>チワワ</dt>
<dd>小さくて可愛い生き物</dd>
</dl>
4-8. aタグ
aタグは、リンクを指定するタグです。href(エイチレフ)属性で、リンク先を指定します。
aタグは「アンカータグ」や「リンクタグ」ともよばれ、以下のように使用します。
<a href="https://exsample.com">Webサイト</a>aは「anchor」の略で、終了タグはありません。
4-9. imgタグ
imgタグは、画像を表示させるタグです。
src(ソース)属性で、ファイルの場所を指定します。
imgタグは、以下のように使用します。
alt属性は、アクセシビリティの向上やSEO対策のために重要です。
imgは「image」の略で、終了タグはありません。
src(ソース)属性で、ファイルの場所を指定します。
imgタグは、以下のように使用します。
<img src="画像のURL" alt="画像の説明">alt属性は、アクセシビリティの向上やSEO対策のために重要です。
imgは「image」の略で、終了タグはありません。
5. おわりに
今回は、HTMLの基礎について解説しました。
「もっとHTMLについて知りたい！」という方は、ぜひ参考記事を読んだり、ご自身で調べてみたりしてください。
また、HTMLと同じくWeb開発に重要なCSSについても学んでみてください。
参考記事
https://developer.mozilla.org/ja/docs/Web/HTML
https://www.htmq.com/