初心者向け。HTMLに関する基本的な内容をご紹介します。

TOP
コラム
初心者向け。HTMLに関する基本的な

HTML初心者の方に向けて、HTMLについての基礎知識やの基本的な記述の方法についてご紹介します。

HTMLとは

HTMLとは「Hyper Text Markup Language」の略です。私たちが普段から閲覧しているWebサイトはHTMLを用いて作成されています。
そしてHTMLを使って作成したファイルをHTMLファイルといいます。
HTMLは「2.0」「3.0」とバージョンアップを重ねており、現在のバージョンは「HTML5」です。

HTMLは、テキストを「タグ」と呼ばれるマークで囲み、文字列を、見出し、段落、表、リストなどのように定義することができます。
しかしHTMLだけでは、Webページは白背景に黒い文字を左詰めにしただけの簡素極まりないものしか出来ません。
そういったWebページのレイアウトに関する記述は「CSS（Cascading Style Sheets）」を用いて行います。
「W3C（World Wide Web Consortium）」というWebで使用される技術の標準化を推進する組織では、Webページの文書構造はHTML、書式はCSSで記述することを推奨しています。

HTMLの基本的な書式

HTMLの基本的な書式は以下のようなものです。

<!DOCTYPE html>
<html lang="ja">
    <head>
    <meta charset="UTF-8">
        <title>HTML初心者向けの解説</title>
    </head>
    <body>
        <h1>HTML初心者のための解説</h1>
        <p>初心者向けの解説です。</p>
    </body>
</html>

HTML初心者の方はこれを見ただけではとても難しいように感じるでしょうが、理解してしまえばとても簡単です。

要素とタグ

上記のコードの解説の前に要素とタグについて理解しましょう。
「要素」とは、段落、見出し、画像など、Webページを構成する様々な単位のことを指します。
要素はタグと、その中に記述されている内容で構成されています。
「タグ」は、開始タグと閉じダグがあり、内容をタグで囲むことで要素として意味を持たせることができます。
初心者の頃は、閉じタグを忘れがちですが、閉じタグを記述していないとレイアウトの崩れにつながりますので必ず閉じタグを忘れないようにしましょう。

<h1>HTML初心者のための解説</h1>

このコードを例にあげて解説すると、「<h1>」「</h1>」という部分が開始タグと閉じダグ、「HTML初心者のための解説」という部分が内容、「<h1>HTML初心者のための解説</h1>」という部分が要素です。
では、以下で先ほどのコードについて解説していきます。

文書型宣言

先ほどのコードの一番上に位置する「<!DOCTYPE html>」という記述ですが、これは「ドキュメントタイプ宣言」といい、HTMLがどのバージョンで記述されているているかを宣言するための記述です。
文書型宣言はHTMLファイルの一番上に記述します。

html要素

次に「<html lang="ja">」ですが、これは「htmlタグ」でして、htmlタグで囲った部分全てがhtml要素として認識されます。
つまりこのファイルがhtmlファイルであることを表すための要素です。
htmlの右の「lang="ja"」とは記述に用いた言語を表し、「lang」とは「language」、「"ja"」とは「japanese」のことを指します。英語ですと「lang="eng"」となります。
文書型宣言以外の記述はすべてこのタグの中に記述します。

head要素

Webページに関する情報を記述するための要素です。
ページのタイトル、検索用ワード、一部のスクリプト言語などを記述します。
この部分に記述された内容はタイトル以外、基本的にユーザーの目に触れることのないマスクデータとなっています。
以下head要素内の解説です。

タイトル

Webページのタイトルです。「<title>HTML初心者向けの解説</title>」このように「titleタグ」内に記述された文字がブラウザ上のタブに表示されます。

文字コード

「<meta charset="UTF-8">」という部分は文字コードの指定を行っています。
文字コードを指定することでブラウザで見た時の文字化けを防ぐことができます。
現在ほとんどの場合「UTF-8」を指定しておけば問題ありません。
なお文字コードの指定や検索ワードの指定などの要素を「メタデータコンテンツ」といい、閉じタグは必要ありません。

body要素

「body」はWebページのメインコンテンツを記述する部分です。
ユーザーの目にする部分、作成者がユーザーに見せたい部分はすべてbody要素内に記述します。
この「body」内に様々なタグを用い、要素を追加していくことでWebページを構築していきます。
Webページの構築によく用いられるタグをご紹介いたします。

h1

<h1>HTML初心者のための解説</h1>

見出しを表すタグです。見出しには「h1」「h2」「h3」「h4」のように、いくつか種類があり、本で例えるならば「h1」が本の表紙に書かれたタイトル、「h2」が目次、「h3」が各章内の小タイトル、「h4」が小タイトル内の小タイトル、といったように使い分けます。

p

<p>初心者向けの解説です。</p>

段落を表したい際には「<p>」タグを使います。このタグで囲った部分をひとまとまりの文章として扱います。

header

Webページのトップコンテンツとして表示させたい部分に使用します。Webサイトのタイトルやロゴなどを入れることが多いです。

article

Webページのメイン記事となる部分に使用します。
必須というわけではありません。

section

サブコンテンツを表すタグです。

<article>
    <section>
    <h3>コンテンツ1</h3>
    <p>サンプルテキスト</p>
    </section>
    
    <section>
    <h3>コンテンツ2</h3>
    <p>サンプルテキスト</p>
    </section>
    
</article>

こういった構造化が主な用途です。

footer

Webページの最下部に表示したいコンテンツに使用します。
店などの電話番号、メールアドレス、住所、著作権表示などを記述することが多いです。

以上のように、Webページはおおまかに「html要素」、「head要素」、「body要素」の3つで構成されており、要素の中に要素を入れ子にすることが基本的な構造となっております。

最後に

以上がHTML初心者のための、HTMLの基本構造などについての解説となります。
タグの使い方や注意点など紹介しきれない部分多くなってしまいましたが、同サイト内にHTMLでよく使用されるタグについてまとめた記事もありますので、併せてご覧ください。