目次
HTMLでは「タグ」というものを用いて、Webサイトをデザインしていきます。
HTMLで使用するタグは無数にあるため、
「こんなに多くのタグ全てを覚えなければいけないのか？」
と不安に感じる初心者の方も多いのではないでしょうか？
実際は、よく使われるタグを覚えるだけで十分に学習やサイト構築を進めることができます。
この記事では、HTML初心者のためによく使われるHTMLタグを紹介していきます。
HTMLタグとは？
HTMLとは「Hyper Text Markup Language」を略した名称であり、主にWebサイトの見た目や構成をデザインするために使用される言語です。
HTMLでは記述をする際にタグを使用する必要があり、HTMLで使用されるタグのことを「HTMLタグ」といいます。
HTMLのタグとは
HTMLのタグとは「<>」のことを指し、タグを利用することで検索エンジンがタイトルや見出しなど、Webサイトの構成を詳しく認識することができます。
タグを利用して、検索エンジンがサイトを認識しやすくすることで、Webサイトが検索上位に表示される確率を高めることができるため、SEOの施策としても用いられます。
基本的に「<タグ名>テキスト</タグ名>」のようにタグを使用してHTMLを記述し、文頭のタグは開始タグ、文末のタグは終了タグとよばれます。
HTMLタグ付け手順
サイトの構成やデザインに合わせたタグ「<>」を利用して文書をマークアップすることを「タグ付け」と呼びます。
例えば<title>タイトル</title>と記述することで、タグでかこまれているテキストがWebサイトのタイトルであることを検索エンジンに伝えることができます。
また「<タグ名 属性＝”属性値”>テキスト</タグ名>」という記述方法もよく活用され、属性値を記述することで、タグに設定のようなものをつけることができます。
例えば<img>タグでは以下のような属性を指定することができます。
- src属性：画像のURLを指定
- title属性：画像のタイトルを設定
- alt属性：画像が表示されない際の代替テキストを指定
HTMLタグ一覧
ここではサイトの基礎を構成するためのタグや、よく使われるタグを具体的に紹介していきます。
HTMLの基本構造タグ一覧
Webサイトの基本的な構造をデザインすることができるタグには、主に以下の5つがあります。
htmlタグ
テキストがHTML文書であることを示すために使用されるタグであり、タグ付けを行うテキスト全体の最初に<html>、最後に</html>と記述します。
また、html文書の最初ではDOCTYPE宣言をすることで、HTML5に指定することが一般的です。
headタグ
サイトの情報を指定したり、外部ファイルの情報を追加することができるタグであり、<head></head>と記述します。
headタグ内では以下のようなタグを使用することができます。
- タイトルを指定するtitleタグ
- 文字コードを指定するmetaタグ
- CSSファイルを指定するためのlinkタグ
headerタグ
Webページ上部にナビゲーションを表示したり、見た目を整えるためのタグであり、<header></header>と記述します。
headタグの情報はブラウザ上に表示されないのに対して、headerタグは表示される点で名称が似ていますが、全く異なります。
bodyタグ
Webサイトの内容に関わる部分を指定するタグで、<body></body>と記述します。
文章の見出しの指定や画像の表示、リンクの挿入など、Webブラウザの表示に関わるタグ付けは基本的にbodyタグの中で行います。
ページ下部、フッター情報の表示を指定したり、デザインを整えたりするためのタグであり、<footer></footer>と記述します。
フッター部分では主にWebページの制作者や関連文書、会社名に関する情報を記載します。
HTMLでよく使うタグ一覧
以下の5つのHTMLタグはよく使われるので、覚えておくようにしましょう。
h1~h6タグ（見出し）
見出しに使われるタグであり、テキストに見出しをつけることで構成が理解しやすくなります。
大きな見出しの順にh1からh6まであり、<h1>見出し</h1>と記述し、h1タグの中にもう一つ小さな見出しを入れたい場合は、h2をh1タグの中に入れ子のようにして記載します。
pタグ（段落）
文章の段落を表すことができるタグであり、<p>文章</p>と記述することで、タグで囲まれた文章を一つの塊として表示することができます。
一般的に文頭から文末までをpタグで囲むように使用し、pタグの前後には1行の空白が入ることで文章が見やすくなります。
aタグ（リンク）
リンクを指定することができるタグであり、<a href=”リンク先”>リンク</a>と記述することで、サイト内のリンクをクリックしてリンク先へ移動することができます。
aタグでは原則href属性をつけ、リンク先を指定しますが、リンク先を指定する際はURLを間違えないようにしましょう。
imgタグ（画像）
画像を表示するために使うタグであり、<img src=”画像.png”>と記述することで、src属性にて指定した画像を表示することができます。
imgタグでは他のタグと異なり、終了タグを使用しないことには注意しましょう。
divタグ（webサイトのブロックを指定）
divタグはそれ自体は画面表示とは関係ないのですが、テキストをブロックとして指定することができます。
<div>テキスト</div>と記述することで、divで囲んだ部分の文字の大きさや色、高さなど、CSSを用いて様々な装飾をする際に役立ちます。
まずは基本的なHTMLタグを覚えよう！
HTMLのタグについて、タグの使い方から、基本的なタグ、そしてよく使われるタグまで詳しく紹介してきました。
HTMLのタグは無数にありますが、無理に全て覚える必要はなく、まずは基本的なタグや良く使われるタグから覚えていくようにしましょう。
基本的なタグを使いながら、他の機能やデザインが必要となった際には、その都度調べていくことがオススメです。
■HTMLについてこちらの記事でも紹介しています。
HTMLとは？基本知識やタグ一覧も紹介
HTML独学のおすすめの学習方法をご紹介
