【初心者向け】重要な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>pタグの中には一つの段落のまとまりを記述します。<br>
        brたぐによって改行されます。
    </p>
    <ul>
        <li>リストはulかolで囲みます</li>
        <li>ulで囲むと、順序のないリストになります</li>
        <li>olで囲むと順序のあるリストになります</li>
    </ul>
 </body>
</html>

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

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

見出しタグのh1~h6

見出しタグをどのように使うのかは、非常に大切なことです。
Googleなどの検索エンジンは、見出しタグから、「どんなことが書いてあるのだろう」ということを分析したりするからです。

h1から順に、上位の見出しになります。(Resultボタンを押してみて!)

See the Pen mdPMxzZ by M2RnRT (@m2rnrt) on CodePen.

<p>タグと<br>タグ

<p>タグは段落を囲みます。そして<br>タグは改行します。(Resultボタンで結果が表示されます)

See the Pen poyrLYP by M2RnRT (@m2rnrt) on CodePen.

<img>タグ

<img src=”URL”>のURLの部分に、挿入したい写真のパスを挿入します。すると、ブラウザ上で写真が表示されます。

ちょっと何言ってるか分からないですね。

画像をうまく配置する方法はこちら↓

https://doku-pro.com/?p=82

aタグ

aタグで囲ったところは、リンクがつきます。
<a href=”リンク先のURL”></a>で囲むと、囲んだ文字から、リンク先へ飛ぶことができます。

See the Pen ExKvpBR by M2RnRT (@m2rnrt) on CodePen.

<ul>, <ol>, <li>はリストを作る

リスト形式で表現したいときは、リストの一つ一つを<li></li>で囲み、全体を<ul></ul>もしくは<ol></ol>で囲みます。
ulで囲むときは、番号のないリストの時、olで囲むときは番号ありのリストの時です。

See the Pen abNyaba by M2RnRT (@m2rnrt) on CodePen.

<table>, <tr>, <th>, <td>は表を作る

これらのタグは、表を作る時に用います。
全体を<table></table>で囲み、<tr></tr>で行を作ります。<th></th>は列の見出し、<td></td>は列のデータを囲みます。

See the Pen gOrxdwP by M2RnRT (@m2rnrt) on CodePen.

イメージとしては次の画像のようなものです。

tableタグの使い方
tableタグの使い方

<form>タグの使い方

<form>タグの正しい使い方は、この記事を参考にしてみてください。

https://doku-pro.com/?p=108

 

ブロック要素のタグの使い方

<header>や<nav>、<div>などの、グループ分け用ブロック要素のタグの使い方は、HTMLの神髄でもある、ブロック要素やインライン要素などの概念と一緒に学ぶのが最適でしょう。

以下の記事を読めば、簡単に理解することができます。

https://doku-pro.com/?p=138

 

HTMLのタグ,おさらい

HTMLにはたくさんの種類のタグがあります。それぞれ用途があり、全部覚えるのは簡単ではありませんが、コードを書いているといつの間にか身についていることが実感できるでしょう。

それに、タグをひたすら覚えるよりも、ウェブサイト設計の基本を学ぶのが優先です。
ウェブページはどんな要素からできているのだろうか、というところを理解すれば、そこに用いるべきタグも必然的に覚えることができるようになるでしょう。

要するに、もっと広い視点から、HTMLの全体像を把握してから勉強すると確実に身に付くというわけだ。

ふむふむ….

 

スポンサーリンク