【初心者向け】重要なHTMLのタグ一覧

HTMLは、タグで文章の構造を作るものです。
人間ならば、文字の大きさや配置を見るだけで文章の構造が分かるものですが、コンピューターには、それをいちいち教えてあげなくてはなりません。

本記事ではよくつかわれるタグの種類と、その使用例を紹介します。

本記事では、
・HTMLのタグにはどんな種類がある？
・タグはどうやって使うの？
という疑問に答えていきます。

Contents

重要なHTMLのタグ一覧
HTMLのタグを使いこなす
HTMLのタグ,おさらい

重要なHTMLのタグ一覧

HTMLの基本的な構造を示すタグの一覧

タグ	用途
<html>	すべてのHTMLはこの中に記述する
<head>	ブラウザに表示はされない、重要な要素を記述
<meta>	言語や説明文など、ページ情報を記述
<title>	ウェブページのタイトルを書く
<link>	参照する外部ファイルを示す
<body>	目に見える部分を記述

HTMLの基本構造

<body>タグの中のコンテンツ部分のタグの一覧

タグ	用途
<h1~h6>	見出しを表示する。数字が増えるほどサイズは小さくなる。
<p>	段落
<img>	画像を表示
<a>	リンクを貼る
<ul>	リストを囲む。番号はない。
<ol>	リストを囲む。番号付き。
<li>	リストの一つ一つを囲む
<br>	改行する
<strong>	強調する
<blockquote>	引用時に利用
<small>	著作権表示や法的表記
<span>	意味を持たないインライン要素で、装飾目的でつかわれる
<audio>	音楽ファイルを埋め込む
<video>	動画ファイルを埋め込む

コンテンツ部分のタグ一覧

表を作成するときに用いるタグ一覧

タグ	用途
<table>	表を作る時、表全体を囲む
<tr>	表の一行を囲む
<th>	表の見出し
<td>	表のデータ

フォームの作成時に用いるタグ一覧

タグ	用途
<form>	入力フォームを作る
<input>	主に4種類の入力を作る
<select>	セレクトボックス
<option>	セレクトボックスの選択項目
<textarea>	複数行テキスト入力欄
<label>	フォームのラベル付け

フォームを作るためのタグ

グループ分け用のブロック

タグ	用途
<header>	ページの上のほうを囲む
<nav>	メインのナビゲーションメニュー
<article>	記事を囲む
<section>	テーマのあるグループ
<main>	ページのコンテンツ部分
<aside>	サイドバーを囲む
<footer>	ページの一番下の部分を囲む
<div>	意味を持たないブロック要素

ブロック要素を作るためのタグ

HTMLのタグを使いこなす

上で紹介したHTMLのタグについて、それぞれの役割と使用法を見ていきたいと思います。

<!DOCTYPE html>

これは、HTMLを書くときに一番初めに使用します。HTMLで書きますよ、という宣言です。

実は、HTMLには様々なバージョンがあり、これを宣言することでどんなタイプのHTMLを使うか指定することができます。
しかしながら、ほとんどの場合、最新のHTML5を使うので、考えることはやめて上記の様に書けば、最新のHTMLを使うという宣言になります。

一種のおまじないみたいなもんだな。
必ず最初に書くんだ。

<html>

<!DOCTYPE html>と宣言したら、<html>すべてのHTMLのコード</html>といった具合に、HTMLコードはこのタグの中に記述します。

<html>は開始タグ、</html>は終了タグと言い、そのはざまに要素を書いていくんだ。
終了タグには必ずスラッシュをつけるんだぜ。

<head>と<body>

<head>ブラウザに表示されない情報</head>
<body>ブラウザに表示される情報</body>

と考えていただければよいでしょう。
headタグの中には、metaタグによる検索エンジンのための情報や、linkタグでCSSファイルの場所を指定したり、titleタグで、そのページのタイトルなどを書き込みます。

bodyタグの中には目に見えるコンテンツを作成します。

下のコード例と、表示結果を見て、雰囲気を掴んでみて！

<!DOCTYPE html>
<!-- lang="ja"というのは日本語でHTMLを書きますよということ -->
<html lang="ja">
　<!-- <head>タグの中に検索エンジンのための情報を書きます -->
　<head> 
    <meta charset="UTF-8">　<!--UTF-8という文字形式で書きますよ、という意味-->
    <title>Document</title>　<!--ここにタイトルが表示されます-->
    <link rel="stylesheet" href="style.css">　<!--これはCSSファイルの場所を示しています-->
　</head>
　<!-- ここから下がブラウザに表示されます -->
　<body>
    <h1>これはタイトルです</h1>
    <p>ｐタグの中には一つの段落のまとまりを記述します。<br>
        brたぐによって改行されます。
    </p>
    <ul>
        <li>リストはulかolで囲みます</li>
        <li>ulで囲むと、順序のないリストになります</li>
        <li>olで囲むと順序のあるリストになります</li>
    </ul>
　</body>
</html>

これをブラウザで表示すると次のようになります。