【HTML入門2】タグの書き方とHTMLの基本構造について解説！

2023.07.18
HTML
HTML入門

はじめに

ウェブ制作を学び始めたばかりの方が一つのウェブサイトを制作できるようになるまでは、ウェブの仕組みを理解するだけでなく、HTMLやCSS、JavaScriptといったコーディングのスキルが必要になります。その中でもHTMLはウェブ制作の基盤であり、正しく理解することでウェブページの文書構造を自在に制御できるようになります。

この記事では、見出しや段落、画像といったウェブページを構成する要素や、それを表現するためのタグの書き方、HTMLファイルの基本構造といったHTMLを学ぶための最も基本となる知識について解説していきます。

この記事の対象者

  • ウェブ制作を基礎から学びたい方
  • HTMLの基本について学びたい方

この記事で学べること

  • HTMLとは何か
  • タグの基本的な書き方
  • コメントの書き方
  • HTMLの基本構造について
  • HTMLの基本構造を簡単に記述する方法

HTML要素とタグ

ウェブページを構成する要素には、見出しや段落、画像、リンク、ナビゲーションメニューなど様々なものがあります。HTMLでは、これらの要素を定義するために「タグ」と呼ばれる印をHTMLファイルに記述していきます。

タグの書き方

タグには開始タグと終了タグがあります。例として段落を定義します。

<p>これは段落です。</p>

段落の定義にはp（Paragraphの略）タグを使用します。タグは必ず半角文字で記述する必要があります。<p>の箇所が開始タグで、</p>の箇所が終了タグです。その間に記述されているテキストがpタグの内容となり、これらで構成されるものをp要素といいます。

ウェブページに表示する内容は基本的に文書としての役割を持っているため、段落以外にも大見出しや小見出し、章、節といった階層構造を持っています。HTMLでは、タグを入れ子にすることで階層構造を表現します。簡単な例を見てみましょう。

<section>
  <h1>これは見出しです。</h1>
  <p>これは段落です。</p>
</section>

上記の例では、sectionタグでh1要素とp要素を囲っています。このように記述することで、見出しであるh1要素と段落であるp要素がsection要素の一部として扱われるため、これらの関連性を表現できます。

基本的なタグと覚え方

タグには多くの種類がありますが、HTMLの古いバージョンで使用されていたものは現在では推奨されていない場合があります。また、独特な機能ゆえにあまり使用されないものもあり、すべてのタグの使い方を理解することはHTMLの学習において非効率です。

ウェブページは基本的に文書であると前述しました。また、ウェブページにはリンクによって他のページやページ内の特定の箇所、外部サイトへのアクセスを提供する機能があり、これらの性質によって頻繁に使用されるタグはある程度限られていいます。HTMLをこれから学ぶ方は、基本的なタグの使い方から学んでいくと良いでしょう。

頻繁に使用される基本的なタグには以下のようなものがあります。

タグ説明
<h1>～<h6>headingの略。見出しを1～6のレベルで表し、<h1>が最上レベルの見出し。
<p>paragraphの略。テキストの段落を表す。
<a>anchorの略。リンクを埋め込む際に使用する。
<ul>unordered listの略。順序のないリストを表す。
<ol>ordered listの略。順序のあるリストを表す。
<li>list itemの略。<ul>や<ol>の各項目を表す。
<img>imageの略。画像を表す。
<section>見出しと内容をグループ化する。
<header>ヘッダーを表す。
<footer>フッターを表す。
<main>ページの主要なコンテンツ。
<aside>ページの副次的なコンテンツ。
<table>Excelのようなテーブルデータを表す際に使用される。
<form>お問い合わせフォームなどに使用される。
<nav>navigationの略。サイトのナビゲーションを表す。
<div>divisionの略。ブロック単位のスタイリングなどに使用される。
<span>テキストの部分的なスタイリングなどに使用される。
よく使われるHTMLタグ一覧

tableタグやformタグ、asideタグはサイトの要件や実装方法、コーダーの好みなどによって使用されない場合がありますが、それ以外のタグは一般的なサイトではほぼ間違いなく使用されているタグです。

タグには他にも様々な種類があり、全てを覚えることは困難です。使用頻度の低いタグは現役のエンジニアでも調べながら使用することが多く、使用頻度の多いタグは経験を積むことで調べずとも使用できるようになります。

ここでご紹介したタグもHTMLをこれから学ぶ方にとっては多く感じるかもしれませんが、これら全てを一度に覚える必要はありません。間違った使い方がないかをチェックするためのツールもあるので、実際にコードを書いてチェックすることを繰り返せば自ずとタグを扱えるようになります。

タグと属性

タグにはさまざまな属性を指定することで要素の挙動や外観を変更することができます。属性には以下のようなものがあります。

属性名説明
id要素を一意に識別する。CSSやJavaScriptなどで要素を操作するために使用される。
class複数の要素に同じスタイルや動作を適用するために使用される。
src画像や動画などのファイルが置かれている場所を指定する。
alt画像の代替テキストを指定する。画像が表示されない場合に変わりに表示されるテキスト。
hrefリンク先のURLを指定する。aタグでは必須の属性。
よく使われる属性一覧

画像を表示する際に使用されるimgタグの例を見てみましょう。

<img src="image.jpg" alt="画像の説明">

属性を指定する際は要素名の後に半角スペースで区切り、「属性名=”属性値”」を記述します。上記の例ではsrc属性に表示する画像ファイル名を指定し、alt属性には画像の説明を指定しています。このように、半角スペースで区切ることで複数の属性を指定することもできます。

imgタグは空要素といい、コンテンツを含まないため終了タグがありません。空要素は子要素を持つことが出来ない要素を指します。このような要素は他にもbr、hr、frame、input要素などいくつか存在します。

属性はタグによっては使用できないものや、属性の指定が必須になっているものもあります。種類もたくさんあり、タグの種類と同様に全てを覚えることは困難です。初めてHTMLを学ぶ方は、ここでは属性の指定方法だけ覚えておけば問題ありません。

コメントの書き方

HTMLの構造が複雑になると、タグの閉じ忘れや、終了タグがどのコンテンツを示しているかが分かりにくくなってきます。この問題は特にウェブ制作を学び始めた方の頭を悩ませることになります。HTMLでは、コメントという機能を使うことでコード上にメモや説明を記述することができます。

コメントはブラウザが無視するテキストであり、ウェブページの表示には影響を与えません。コメントは以下のように記述します。

<!-- これはコメントです -->

コメントは以下のような構文を持ちます。

  • <!–：コメントの開始
  • –>：コメントの終了

HTMLのコメントは複数行でも同じ記述になります。これにより、説明やメモの追加だけでなく、特定のコードをコメントアウトして一時的に無効化することも頻繁に行われます。

HTMLの基本構造

ウェブページを作成する最も基本的な方法は、HTMLファイルを作成してGoogle ChromeやMicrosoft Edge、Safariといったブラウザに読み込ませることです。HTMLファイルの解析はブラウザが行っており、正しくブラウザにウェブページの情報を伝えるにはHTMLの基本構造に従ってマークアップする必要があります。

HTMLの基本構造は、DOCTYPE宣言、html要素、head要素、body要素で構成されます。これらは一つのHTMLファイルに必ず一つ記述する必要があり、以下の役割を持ちます。

  • DOCTYPE宣言：HTMLのバージョンをブラウザに伝える。
  • html要素：DOCTYPE宣言を除くHTMLファイル全体を囲むルート要素。
  • head要素：ウェブページのメタ情報や外部ファイルの参照をブラウザに伝える。
  • body要素：ウェブページの表示内容を含む要素。body内の要素がブラウザに表示される。

これらの要素を組み合わせてHTMLファイルを作成することで、ブラウザにウェブページの構造や表示方法などを正しく伝えることができます。これらの定義方法について見ていきましょう。

DOCTYPE宣言

DOCTYPE宣言は、HTMLファイルがどのバージョンのHTML仕様に従っているかをブラウザに伝えるための重要な要素です。この宣言がない場合や宣言方法が間違っている場合、ブラウザが正しく解析できない可能性があります。

HTMLの最新バージョンであるHTML5のDOCTYPE宣言はとてもシンプルです。HTMLファイルの先頭に以下を記述します。

<!DOCTYPE html>

HTMLファイルは先頭の行から解析されるので、DOCTYPE宣言は必ず先頭に記述する必要があることを覚えておきましょう。

html要素

html要素はHTMLファイルに配置する全ての要素を囲むルート要素です。html要素内に要素を配置することで、それらがHTMLで記述されていることをブラウザに伝えます。

html要素の直下にはhead要素とbody要素を配置します。また、html要素にlang属性を指定することが一般的であり、そのファイルの言語を指定することができます。

<!DOCTYPE html>
<html lang="ja"> <!-- 日本語を指定 -->
<head></head>
<body></body>
</html>

head要素

head要素は、ウェブページのメタ情報や外部ファイルの参照など、そのウェブページに関する情報を定義するための要素を配置します。head要素に配置できる主な要素は以下です。

  • title要素：ウェブページのタイトル。ブラウザのタブやブックマークに表示される。
  • meta要素：ウェブページのメタ情報を指定。文字コードやキーワード、説明などを定義する。
  • link要素：外部ファイルの参照をする際に使用。主にCSSファイルを読み込む。
  • style要素：そのページのみで適用されるCSSスタイルを記述できる。
  • script要素：JavaScriptコードを記述する。src属性を指定することで外部ファイルを参照できる。

link要素やstyle要素、script要素についてはCSSやJavaScriptの知識が必要になります。ここでは例として、title要素とmeta要素を定義してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8"> <!-- 文字コードを指定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- ページの幅をデバイスサイズに合わせる -->
  <title>ページタイトル</title> <!-- ページのタイトルを定義 -->
</head>
<body></body>
</html>

title要素の内容は、ウェブページのタイトルとしてブラウザのタブやブックマーク、検索エンジンの検索結果に表示されます。

上記では二つのmeta要素を配置しています。meta要素は画像と同様に内容を含まないため、終了タグは必要ありません。どのようなページでも同じ記述で問題ないので、おまじないとして必ず記述するものだと捉えておくと良いでしょう。

これらの二つのmeta要素はheadタグ内に必ず配置する要素ですが、あまりHTML初心者の方向けの内容ではないので、補足として説明します。

一つ目の「<meta charset=”UTF-8″>」は、文字コードを指定しています。テキストデータをコンピューターが扱うには、文字エンコーディングという処理をしてコンピューターが理解できるような形式に変換されます。文字エンコーディングには複数の方法があり、上記では、「UTF-8」という文字エンコーディングで作成されたHTMLファイルであることを示しています。

UTF-8を指定することで、日本語や英語以外の多くの言語でテキストを正しく表示することができます。文字コードの指定が無いと文字化けの可能性があるため、必ず記述するものと覚えておくと良いでしょう。

二つ目の「<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>」は、モバイル端末やパソコンなど、さまざまなデバイスでウェブページが適切に表示されるようにするための指示をブラウザに与えています。

meta要素のname属性がviewportであることにより、ビューポートの設定を行っています。ビューポートとは、ブラウザのウェブページが表示される領域のことを指します。content属性の値は、width=device-widthでビューポートの幅をデバイスの幅に設定し、initial-scale=1.0で初期ズームレベルを1.0に設定しています。これにより、モバイル端末やデスクトップブラウザなど、さまざまなデバイスで適切な表示が可能となります。

なお、Visual Studio Code（VSCode）をお使いの方は「エメット」という機能を利用することでこれらを簡単に出力できるため、実は上記のコードの書き方を覚える必要はありません。その方法もここでご紹介しておきます。

VSCodeでHTMLの基本構造を出力する

任意のHTMLファイルをVSCodeで開き、編集画面にカーソルを合わせます。

キーボードが英字入力になっていることを確認し、「!」を入力（Shift+1）してEnterキーを押します。

ここまでで解説したHTMLの基本構造が自動で出力されます。出力されない場合はファイル名の末尾に「.html」が付いていることを確認してみてください。

デフォルトではhtmlタグのlang属性の値が「en」になるので、これを「ja」に修正します。これはVSCodeの設定で変更することができるので、毎回修正することが手間であれば調べてみると良いでしょう。

エメットでできることは他にもたくさんあるので、コーディングに慣れてきたらエメットについて学ぶとコーディングスピードが向上し、タグの閉じ忘れなど初心者にありがちなミスを防ぐ効果があります。必須ではありませんが、こういう機能があることを覚えておくと良いでしょう。

body要素

body要素は、ウェブページの表示内容を含む要素です。ブラウザはbody要素内に配置された要素がウェブページのコンテンツであると解釈します。前述したp要素やh1要素、section要素、img要素などは全てbody要素内に配置します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>
</head>
<body>
  <!-- コンテンツを配置します -->
  <section>
    <h1>これは見出しです。</h1>
    <p>これは段落です。</p>
  </section>
</body>
</html>

以上がHTMLの基本構造となります。

最後に

この記事では、見出しや段落、画像といったウェブページを構成する要素や、それを表現するためのタグの書き方、HTMLファイルの基本構造といったHTMLの基礎について解説しました。HTMLはウェブページの構造を定義するためのマークアップ言語であり、HTMLの基本を理解することはウェブ制作において必須のスキルです。

ウェブ技術は日々更新され続けるので、効率良く学習を進めるためには基本やよく使われる手法、表現などから学ぶことが重要です。また、必要となる知識の幅が広いため、学んだことを忘れてしまうことや難しくて理解が追い付かないことは頻繁にあります。

初めから完璧を目指すと挫折する可能性が高くなるので、細部の理解に拘らずに気軽に学習を進めていき、まずは「学習を継続する」ということを一つのスキルとして身に付けることを目標にすると良いでしょう。

タイトルとURLをコピーしました