「HTMLコードはどんなときに使うの？」
「Webサイトを作成したいけれど、HTMLの書き方がわからない」
「よく使うHTMLタグを知りたい」
今回は、HTMLコードを学びたいとお考えの方に、下記のような項目をわかりやすく解説します。
- HTMLコードとはなんなのか
- どうやってHTMLコードを書けばいいのか？
- よく使うHTMLタグにはどのような種類があるのか？
この記事を読めば、HTMLコードの書き方やHTMLタグの基本がわかります。
- 目次
HTMLとは
HTMLコードの書き方を知る前に、HTMLがどのようなものかを理解しておく必要があります。
HTMLとは
HTMLとは「HyperText Markup Language」の頭文字をとったもので、Webサイトのコンテンツの構造を定義するために用いる、マークアップ言語の1つです。
コンテンツは見出しや段落、箇条書きや表など、さまざまな要素で構成されています。検索エンジンやブラウザが文章の構成を理解できるように、HTMLコードを記述して指定します。
HTMLって簡単にいうと何ができるんですか？
HTMLを使うと、ブラウザ上でWebページが正しく表示されることはもちろん、文字の画像の表示やリンク先への遷移といった機能も与えることができます！
CSS・JavaScriptとの関係
Webページを作成する際には、HTMLだけではなく、CSSやJavaScriptも使用します。
① CSS
CSSとは「Cascading Style Sheets」の頭文字をとったもので、文字のサイズや色、フォントやレイアウトなど、Webページの見た目を指定するためのスタイルシート言語です。
Webページのどの位置にテキストを配置するのかを決めるHTMLに対し、CSSは配置したテキストの見た目を決める役割を担っています。
② JavaScript
JavaScriptは、Webページに動きなどの複雑な機能をつけるプログラミング言語です。
たとえば、文字アニメーションやスライドショー、アコーディオンメニューやポップアップウィンドウなどの作成が可能です。
マークアップ言語であるHTMLに対し、CSSはスタイルシート言語、JavaScriptはプログラミング言語ですので、それぞれ役割が異なります！
HTMLを構成する3つの要素
HTMLは100種類以上もの「要素（element）」で構成されています。
ここでは、HTMLを書く際の基本の要素である、「タグ」「属性」「コンテンツ」のルールを解説します。
① タグ
要素の始まりと終わりを示すものがタグです。要素名を「 <> 」で囲み、基本的に始まりを示す「開始タグ」と終わり示す「終了タグ」をセットで使います。
<要素名></要素名>
また、開始タグと終了タグを含む全体を「要素」と呼びます。
② 属性
属性とは、要素の動きや働きを設定する情報です。要素名の後ろに半角スペースを空け、「属性名=”属性値”」と記述します。
<要素名 属性=”属性値”>内容</要素名>それぞれの要素に対応した属性があります。要素と属性を組み合わせることによって、さまざまな情報をHTMLで表示できます。
③ コンテンツ
開始タグと終了タグに囲まれた部分が、「中身」を意味するコンテンツです。
<要素名>コンテンツ</要素名>たとえば、下記の場合は、見出し文字の「HTMLとは？」がコンテンツとなります。
<h2>HTMLとは？</h2>HTMLコードの書き方「基本編」
まずは、HTMLの基本的な書き方から解説します。
この項目で紹介するタグはHTMLコードを記述する際に必ず使うものですので、これからHTMLの勉強を始める人はぜひチェックしてください。
HTML宣言
ファイルの先頭に記述するのが、HTMLで作成されたことを宣言する <!DOCTYPE html> タグです。ブラウザに対して、「このファイルはHTMLファイルです」と示すために、最初に書くことがルールとなっています。
HTML宣言には終了タグは必要ありません。
htmlタグ
htmlタグは、HTMLで記述した範囲を指定するタグで、ファイルの先頭に書きます。
記述例
<!DOCTYPE html>
<html>
</html><html> は <!DOCTYPE html> の次に必ず書き、最後は </html> で閉じてコード全体を囲みます。
headタグ
<html> の次に書くのが、ヘッド要素を指定するheadタグです。
記述例
<!DOCTYPE html>
<html>
<head>
</head>
</html>headタグの中には、文章全体の情報を示すmeta要素や、文章のタイトルを示すtitle要素など、Webページの情報や設定を記述します。
head内に書いた内容はどこに表示されますか？
head内に書いた内容は、ブラウザや検索エンジンにWebページの情報や設定を伝えるものですので、画面には表示されません。
bodyタグ
<head> の次には、Webページのメインコンテンツを指定するbodyタグを書きます。
記述例
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>ヘッド要素を伝えるheadタグを閉じてから、bodyタグでWebページの内容を書きます。
bodyタグで囲まれた部分が、ユーザーが見るWebページの画面です。画面に表示させたいテキストや画像などを記述します。
pタグ
文字情報を表示させるために用いるのがpタグです。
この「ｐ」は、段落や改行を意味する「Paragraph（パラグラフ）」を指しています。
記述例
<p>ここに文字を書きます</p>ｐタグで囲まれた文字は、そのままWebページ上で表示されます。
hタグ
hタグは見出しを表示させるタグで、h1～h6まであり、数字が大きくなるほど小さい見出しになります。
記述例
<h1>ここに記事のタイトルを書きます</h1>
<h2>ここに見出しを書きます</h2>
<h3>ここに小見出しを書きます</h3>見出しにはどんな役割がありますか？
ユーザビリティを高める役割があります！
見出しで区切ることによって、情報の重要性や階層構造がわかりやすくなるため、ユーザーが記事の内容を読みやすくなるのです。
h1はWebページのタイトルを表すため、基本的には1ページで1回しか使用しません。また、数字の順番どおりに使用します。階層構造が複雑になることを防ぐため、h5以降はできるだけ使わないようにしましょう。
aタグ
リンクの挿入には、「Anchor link（アンカーリンク）」を意味するaタグを使用します。
記述例
<a href=”リンク先のURL”>ここにアンカーテキストを書く</a><a> の中に「href=”リンク先のURL”」と書き、aタグに囲まれた部分をクリックすると、リンク先のWebページに遷移します。
aタグでは文字だけではなく画像も囲むことができます！
imgタグ
imgタグは、画像を追加するタグです。
記述例
<img scr=”画像のファイル名” width=”横幅” height=”高さ” alt=”ここに代替テキストを書く” />「img scr」のあとに画像のファイル名を書き、「width」で横幅・「height」で高さを指定しましょう。「alt」の中には代替テキストを書きます。
imgタグではどの画像形式でも表示できますか？
PNG・JPG・SVG・GIF・GIFアニメーションなどは表示できますが、PDFや動画は表示できません。
HTMLコードの書き方「応用編」
HTMLコードの基本の書き方が理解できたら、応用も学んで知識とスキルをアップさせましょう。
metaタグ
metaタグには、検索エンジンにWebページの内容を伝えるために、Webページのメタ情報を書きます。metaタグはheadタグ内に書きましょう。
記述例
<head>
<meta name=”description” content=”ここにWebページの説明文を書く”>
</head>titleタグ
titleタグとはその名のとおり、Webページのタイトルを示すタグです。
記述例
<head>
<title>ここに記事のタイトルを書く</title>
</head>
titleタグに囲まれた部分に書いた文字が、検索エンジンの検索結果やブラウザのタブ、SNSなどにページ名として表示されます。
titleタグの内容は、ユーザーが検索した際に初めて目にするため、思わずクリックしたくなるような魅力的な文言にしましょう。
ul / ol / liタグ
箇条書きを表示させるために用いるのが、ul/ol/liタグです。
タグの違い
- <ol>
数字の箇条書き - <li>
数字無しの箇条書き
記述例
<body>
<ul>
<li>ここに1つ目の項目を書く</li>
<li>ここに2つ目の項目を書く</li>
<li>ここに3つ目の項目を書く力</li>
</ul>
</body>navタグ
navタグとはナビゲーションを示すタグで、Webページ内の指定した部分や他のWebページに誘導する役割を担っています。グローバルナビゲーションやカテゴリーリストなどに用います。
記述例
<body>
<nav>
<h1>メインメニュー</h1>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="店舗情報ページのURL">店舗情報</a></li>
<li><a href="サービスページのURL">サービス</a></li>
<li><a href="お問い合わせページのURL">お問い合わせ</a></li>
</ul>
</nav>
</body>それぞれの項目をクリックすると、リンク先のURLに遷移します。
class属性
グループ分けの目印として用いるclassの役割は、コンテンツの見た目の調整です。CSSと組み合わせることで、グループ分けした各部分の文字のサイズや色などのスタイルを適用できるため、ユーザーが見やすくなります。
id属性
idもclassと同じく、CSSと組み合わせてスタイルを適用できますが、主にJavaScriptの要素の操作やアンカーリンクの作成に用いられます。
class属性とid属性では何が違うんですか？
class属性は1つのWebページ内で1度しか使用できませんが、id属性は何度でも使用できる点が違いです！
divタグ
特殊な編集をする際に用いられるdivタグは、classやidとセットで使用するため、単体では使いません。
spanタグ
文字の色や大きさを変更する際に用いられるspanタグも、classやidとセットで使用します。適切な属性を組み合わせて、文字に色をつけたり大きさを変えたりできます。
footerタグ
footerタグは、文書やセクションのフッターを示すタグで、Webサイトの下部に表示されることがほとんどです。主に、Webサイトの運営者の情報や著作権、問い合わせ先などを書きます。
footerって必須なんですか？
Webサイトの信用度を高めるために必要です！
margin
marginとは、要素の上下左右の余白を設定するプロパティです。要素間の間隔を取りたいときに使います。
よく使うHTMLタグ一覧
実際によく使うHTMLタグを覚えていきましょう！
ページレイアウト関連
| 意味 | タグ |
|---|---|
| 見出し | <h1～6> </h1～6> |
| 強制改行 | <br> |
| 水平線 | <hr> |
| 段落 | <p></p> |
| センタリング | <center> </center> |
| ボタンの作成 | <button> |
| ブロック設定 | <div> </div> |
| 整形済みテキスト | <pre> </pre> |
| 引用・転載を示す | <blockquote> </blockquote> |
| 連絡・問い合わせ先を示す | <address> </address> |
フォント関連
| 意味 | タグ |
|---|---|
| フォント | <font> </font> |
| アンダーライン | <u> </u> |
| 打ち消し線 | <strike> </strike> |
| 大きめのフォント | <big> </big> |
| 小さめのフォント | <small> </small> |
| 強調文字 | <em> </em> |
| 強い強調 | <strong> </strong> |
| 下付き文字 | <sub> </sub> |
| 上付き文字 | <sup> </sup> |
| 斜体（イタリック体） | <i> </i> |
リスト（箇条書き）
| 意味 | タグ |
|---|---|
| 箇条書きリスト | <ul> </ul> |
| 番号順リスト | <ol> </ol> |
| リスト項目 | <li> </li> |
| 定義型リスト | <dl> </dl> |
| 定義語 | <dt> </dt> |
| 定義内容 | <dd> </dd> |
| 狭い範囲でリストを展開 | <ul compact> </ul> |
テーブル（表）
| 意味 | タグ |
|---|---|
| 表 | <table> </table> |
| 表の行指定 | <tr> </tr> |
| 表の見出しの指定 | <th> </th> |
| 表のデータ要素 | <td> </td> |
| 表題 | <caption> </caption> |
| 改行の抑制 | <th nowrap> |
よくある質問
HTMLのタグは何種類ありますか？
HTML5で使えるタグは100種類以上です。
HTMLコードは何から書き始めればいいですか？
宣言コードと呼ばれる <!DOCTYPE html> から書き始めます。宣言コードを記述することで、ブラウザがHTMLファイルだと認識できます。
まとめ
HTMLを理解していると、Webサイトを作る際にできることが広がります。
タグは100種類以上もあるため複雑に感じるかもしれませんが、すべてを覚える必要はありません。
この記事で紹介したHTMLコードの基礎知識を参考に、記述する練習を繰り返し行い、知識とスキルを高めていきましょう。
