ホームページ制作のご依頼・ご相談はCOLERSへ

HTML入門

  • COLUMN
  • HTML

連載記事1回目はホームページ作成で必要となるHTMLの入門記事です。

この記事を通して、HTMLとは何か、どのように記述するのか、
それぞれの記述にはどんな意味があるのかについて学ぶことができます。

なお、対象となる読者は以下の方々を想定しています。

  • ホームページ作成未経験あるいは初心者の方
  • ホームページ作成に興味があり入門したい
  • HTMLという言葉を聞いたことがあるがよくわかっていない
  • HTMLを詳細にマスターするのではなくポイントを絞って最低限の範囲で学びたい

HTMLの詳細を知り深く学びたいという場合は、
MDN Web Docs(HTMLの基本)というMozillaが提供している
素晴らしいサイトがあります。

また、HTMLをはじめとしたホームページ作成の方法を書籍で学ばれたい場合は、
CSSも含めて学べる以下がオススメです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

より詳細にHTMLについて学びたいという場合は、
本記事で概要をつかんだ後にあわせてご一読いただくことをオススメいたします。

なお、本記事では以後WEBサイトやWEBページなども含めた総称として、
ホームページあるいはサイトという文言で表記します。

またHTMLのバージョンは現在主流であるHTML5です。
古いホームページの中には本記事で紹介する記述とは
異なるHTMLの記述になっている場合があります。

これから学ぶ方がそれらを今後意識する必要は基本的にないため、
HTML5イコールHTMLとして説明します。

なお、学習することが目的ではなく、まずはホームページ制作を始めたいという場合は
以下のテンプレートを参考にしていただければ幸いです。

また、当記事は正確性を担保したものではなく筆者の主観で
わかりやすさを考えまとめたものとなります。
個人的な見解を含むことをあらかじめご了承ください。

目次

HTMLの学習準備

学習にあたってHTMLを作成する環境についてご紹介します。

ファイルの構成などを気にせず気軽にブラウザのみでHTMLの作成を練習したい場合は
以下のChrome拡張機能をオススメします。

HTMLは基本的にテキストでできた文章ファイルであるため
例えば標準的なWindowsのパソコンに入っているメモ帳でも作成は可能です。

ただし、厳密にはメモ帳で作成をすると改行コードの問題や作成効率の観点で
実際に公開するサイトの制作に対してはオススメできませんのでご注意ください。

なお、将来的には以下のようなIDE(統合開発環境)をご利用することをオススメします。
※高機能である分、初学者にはむしろ足かせになると考えますのであくまで参考です。

HTMLとは

HTMLはプログラミング言語ではなく、文章に意味を持たせるためのマークアップ言語です。

具体的にはホームページの構成を
ウェブブラウザ(Google ChromeやFirefox、Safariなど)に伝えるための言語で、
正式名称はHyper Text Markup Languageとなります。

世界中に様々なホームページが存在していますが、ほとんどのサイトがHTMLで構成されています。
※本記事では詳細を割愛しますが、PHPやJavaScriptなどのプログラミング言語を利用し、
動的にHTMLを出力し構成されているサイトも多数存在します。

つまり、ホームページ作成という観点では、
サイトのコンテンツ内容・構成を担当するのがHTMLの役割です。

HTMLを習得すればホームページ作成が可能?

HTMLはホームページのコンテンツ(中身)のみ担当しています。

そのため、実際にホームページを作成するにあたっては
HTML以外に以下のような知識が必要となります。

  • CSS(スタイルシート言語 / 見た目の装飾)
  • JavaScript(プログラミング言語 / ホームページに動的な要素を加える)

もしあなたがホームページの装飾を必要とせず動的な要素を必要としない場合は、
HTMLのみでもホームページと呼べるものは作成可能です。

ただ、ほとんどのケースではデザインでユーザーへ正しく情報を伝え、
アクションを促す動的な要素を必要とするでしょう。

学習の流れとしては次のステップとしてCSSを学んでいただくことで
HTMLで構成されたホームページをデザインすることができるようになります。

本記事での学習後は以下よりスタイルシート言語であるCSSについて
学ばれることをオススメいたします。

HTMLの記述方法

以下はHTMLではなく単純な日本語の文章です。

今日は良い天気です。

これをHTMLに変換した例が以下です。

<p>今日は良い天気です。</p>

解説を加えると以下のような意味になります。

<ここから段落スタート>今日は良い天気です。</ここで段落終了>

開始タグと終了タグ

例文のように、コンテンツを決められた形式で囲むことにより、
HTMLでのマークアップ(意味づけ)を行うことができます。

始まりの<p>を開始タグ(opening tag)、
終わりの</p>を終了タグ(closing tag)と呼び、
タグで囲まれたコンテンツ(content)を含めた全体を要素(element)と呼びます。

これが、HTMLの基本的な記述方法です。

今回の例文で利用した<p>はコンテンツがParagraph(段落)であることを
示すために利用するタグです。
※そのため主に文章に対して利用します。

属性

タグは開始タグと終了タグとして単純に囲むだけではなく、
いくつか決められた属性(Attribute)を持たせることが可能です。

例えば代表的な属性であるclassを加えた例が以下です。
example-textの部分は任意の名前をつけることが可能。

<p class="example-text">今日は良い天気です。</p>

また、属性は以下のように複数指定することも可能です。

<p class="example-text sample-text" id="example1">今日は良い天気です。</p>

属性にはタグによって様々なものが用意されていますが、
例えばclassは以下のようなHTML以外の言語から要素を操作するための目印にする
という役割があります。

  • CSSでexample-textの属性を持つ要素のみ文字サイズや文字色を変更する装飾を加える
  • JavaScriptでexample-textの属性を持つ要素のみアニメーションを加える

どの属性をどんな目的で利用するか、どのタグにおいてどの属性が使えるかは様々ありますが、
最低限よく使う表現については本記事の中でご紹介します。

タグの種類

HTMLで利用するタグには様々な種類が用意されています。
ただしすべてのタグを熟知しひとつのホームページ内で
すべて利用しなければいけないということはありません。

以下、比較的よく利用される代表的なタグを属性とあわせてご紹介します。

a(リンク)

<a>タグは他のページ、他のサイト、ページ内の目印などへのリンクを示すタグです。

<a href="https://colers.jp/" target="_blank" rel="noopener">COLERS</a>
属性 概要
href クリック後に開くページのURLを指定。
target リンクの開き方を指定。_blankの指定により今のページを残したまま別のタブやウィンドウで開くという意味になる。この属性をつけなければ基本的には今のタブ・ウィンドウで別のページへ遷移する。
rel 関係性を示す。通常は指定不要だが、target="_blank"を指定する場合はrel="noopener"を付与していないとセキュリティリスクが伴うため原則セットで付与する。

p(段落)

<p>タグは文章の段落であることを示すタグです。
また、<br>は改行を示すタグでコンテンツを持たない空要素であることが特徴です。

<p class="example-text" id="example-target">
  今日は良い天気です。<br>
  明日もきっと良い天気です。
</p>
属性 概要
class HTML以外の言語から要素を操作するための目印にする。ひとつのHTML内(ページ内)で同じclass名を付与することも可能。
id HTML以外の言語から要素を操作するための目印にする。ひとつのHTML内(ページ内)で一意にすることがルールとなるため、同じid名を付与することはできない。

h1〜h6(見出し)

<h1><h6>タグは見出しであることを示すタグで、
数字が小さいほど大きな見出しとなります。

ホームページはあくまでも文章でできているものであるため、
構造や意味を示す上でも重要なタグとなります。

<h1>HTML入門</h1>
<p>これからHTMLを習得するための方法をご紹介します。</p>
<h2>HTMLとは?</h2>
<p>HTMLはマークアップ言語です。</p>
<h3>マークアップ言語?</h3>
<p>マークアップは意味づけと捉えることができます。</p>
<h2>HTMLの書き方</h2>

なお、も大きく重要な見出しとなる<h1>タグは
そのHTML内(ページ内)において一度のみ利用するべきというルールが存在していましたが、
HTML5では複数利用することも可能となっています。 ※実際に複数利用するかは、ホームページ作成者の意図や好みによって分かれます。

img(画像)

<img>タグは画像を表示するためのタグです。

<img src="/example.jpg" alt="例を示している男性のイラスト" width="1024" height="768" />

<img>タグは画像をHTML内に埋め込み表示することが目的であるため、
<br>同様に囲むべきコンテンツが存在しない空要素(empty elements)です。

HTML内にコンテンツを直接記述するのではなく
外部からファイルを埋め込み表示するような意図のものなど
コンテンツは持たないが意味を持っているタグは空要素として用意されています。

属性 概要
src 表示する画像ファイルのパス(場所)
※パスについては後述
alt その画像が何らかの理由で表示されなかったり、たとえば視覚障がい者の方が音声読み上げのブラウザを利用している場合を想定したテキスト情報。装飾目的の画像の場合は空とし、その画像自体の存在が意味を保つ場合はどのような画像なのかを記載する。
width 画像の横幅でピクセル単位。ただし単位の記載は不要。パフォーマンスの観点で必ず記載する。
height 画像の高さでピクセル単位。ただし単位の記載は不要。パフォーマンスの観点で必ず記載する。
パスとは

コンピューター内(サーバー含む)のファイルが他のファイルを参照する際に
その場所(住所)を示すのがパスです。

指定方法として相対パスと絶対パスがありどちらを利用しても構いませんが、
一般的には相対パスが利用される傾向にあります。 ※例えばテスト用のURLから本番用のURLに変わる、将来的なURL変更の可能性を考慮した場合、
絶対パスの場合は書き換え作業が発生するため。

相対パス
ファイルやフォルダ構成の一例

この画像の構成をもとにし、index.htmlに記述する際の
各ファイル(style.css、cat.jpg、icon-face.jpg)のパスは以下の通りです。

ファイル名 パス
style.css style.css
cat.jpg img/cat.jpg
icon-face.jpg img/icon/icon-face.jpg

このように起点となるファイル(今回の例では相対パスを記述しているindex.html)からみて、
どの場所にあるのかを指定する方法が相対パスです。 ※住所というより、私の家の隣というように基準をもとにしてどこにあるかを相対的に示す方法。

なお上位の階層にあるファイルは以下のように示すことが可能です。

パスの記載方法 意味
../test.jpg 今いるフォルダのひとつ上の階層にあるtest.jpgファイル
../../test.jpg 今いるフォルダのふたつ上の階層にあるtest.jpgファイル
絶対パス

相対パスのように基準となるファイルをもとにした場所の示し方とは異なり、
住所そのものを指定するのが絶対パスです。

インターネット上でホームページにとっての住所はドメインでありURLです。 ※当サイトであればhttps://coles.jp/が起点となります。

ファイルやフォルダ構成の一例

画像の構成をもとにしサイトのトップページのURLをhttp://example.comとした場合、
具体的には以下のような記載になります。

ファイル名 絶対パス
index.html http://example.com
※index.htmlという名称のファイルの場合は特別なルールとして、index.htmlという記述は省略可能。
style.css http://example.com/style.css
cat.jpg http://example.com/img/cat.jpg
icon-face.jpg http://example.com/img/icon/icon-face.jpg

ul(順序なしリスト)、ol(順序有りリスト)、li(リストアイテム)

<ul>タグ、<ol>タグはそれぞれリストを示すタグです。
リストひとつひとつの項目にはどちらも<li>タグを利用します。

リストにおいて順番に意味がない場合は<ul>を利用し、
例えば調理手順など順番に意味がある場合は<ol>を利用します。

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>いちご</li>
  <li>パイナップル</li>
  <li></li>
</ul>
<ol>
  <li>フライパンを温める</li>
  <li>温まったフライパンに油を少量ひく</li>
  <li>卵を割る</li>
  <li>水を少量加える</li>
  <li>フライパンにフタをする</li>
</ol>

dl(定義リスト)

用語と用語に対する説明を併記したリストを表現するタグが<dl>です。
定義する用語を<dt>、その用語に対する解説を<dd>で囲みます。

<dl>
  <dt>HTML</dt>
  <dd>ブラウザに文章の構成を伝えるためのマークアップ言語</dd>  
  <dt>CSS</dt>
  <dd>HTMLの要素に装飾やレイアウトを加えることができるスタイルシート言語</dd>
  <dt>JavaScript</dt>
  <dd>HTMLの要素に例えばアニメーションなど動的な要素を加えることができるプログラミング言語</dd>
</dl>

table(表)

情報の分類や関係性をわかりやすく表現するために、
エクセルなどを代表として表形式はよく利用されます。

HTMLにおいても同様に表は用意されており、構成に応じて複数のタグを利用して表現します。

なお、レイアウトのためにtableタグを利用することは非推奨となりますので、
あくまでも表を表現するために利用してください。 ※レイアウトはCSSで調整するべきです。

<table>
    <caption>タグをたくさん盛り込んだ表の例</caption>
    <thead>
        <tr>
            <th colspan="2">表の見出し</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>コンテンツ1</td>
            <td>コンテンツ2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan="2">表のフッター</td>
        </tr>
    </tbody>
</table>

<p>シンプルな表の例</pp>
<table>
  <tr>
    <td>コンテンツ1</td>
    <td>コンテンツ2</td>
  </tr>
  <tr>
    <td>コンテンツ3</td>
    <td>コンテンツ4</td>
  </tr>
</table>

tableに関連する代表的なタグ

タグ 概要
table 表であることを示す。
thead 表の見出し(ヘッダー)グループであることを示す。
tbody 表のメインコンテンツグループであることを示す。
tfoot 表のまとめ・最下段(フッター)グループであることを示す。
tr セルの行であることを示す。
td セル(表の中の1つ1つの枠)であることを示す。
th 表の見出し(ヘッダー)のセルであることを示す。

tableに関連する代表的な属性

属性 概要
colspan セルの結合。横のセルと結合する。結合するセルの数を数値で指定する。
rowspan セルの結合。縦のセルと結合する。結合するセルの数を数値で指定する。

HTMLであることを示すタグ

ここまでHTMLでマークアップするうえでの
ひとつひとつの構成要素となるタグをご紹介しました。

ここからは、HTMLを記述するうえで決まりごととなるタグ、
範囲を示すためのタグをご紹介します。

以下が基本的な雛形となります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- ここにページの属性情報を記述する -->
    <meta charset="utf-8" />
    <link rel="icon" type="image/png" href="fav.png" />
    <title>ページのタイトル</title>
    <meta name="description" content="ページの解説" />
    <!-- ここまで -->
  </head>
  <body>
    <!-- ここにコンテンツを記述する -->
  </body>
</html>

DOCTYPE宣言

HTMLで作成された文章がどのバージョンのHTMLで構成されているか
示すための宣言がDOCTYPE宣言となります。

具体的には以下の文言をHTMLファイルの一番上に記述します。

<!DOCTYPE html>

これはHTML5で記述していることを宣言しています。 ※HTML5以前のバージョンで作成されているホームページの場合は記述内容が異なります。

html

HTML文章で記述されている範囲を示すタグが<html>です。

DOCTYPE宣言とあわせて記述すると具体的には以下のようになり、
HTML文章全体を囲むようにします。

<!DOCTYPE html>
<html lang="ja">
</html>
属性 概要
lang そのホームページがどの言語で作成されているのかを示す。
jaであれば日本語、enであれば英語など。

そのページに関する属性情報をまとめる範囲が<head>タグのエリアで、
後述する<body>とセットで必ずHTML文書に含めることになります。

このエリアに入力する情報はコンテンツではなく、
ホームページ内で直接的にはユーザーに見えない情報が大半を占めていることが特徴です。

head内に記述代表的な情報

ページの目的にあわせて必要な情報を入力することが一般的ですが、
以下シンプルな構成の例をご紹介します。

<head>
  <meta charset="utf-8" />
  <link rel="icon" type="image/png" href="fav.png" />
  <title>ページのタイトル</title>
  <meta name="description" content="ページの解説" />
</head>
タグ 概要
meta 直接的にユーザーを対象としたものではなく、検索エンジンやブラウザに情報を伝えるためのもの。
charset="utf-8"は文字コードはUTF-8であることを示しており、世界中で一般的な文字コードとして採用されている。(日本においてはShift-JISなどが採用されてるケースもあるが、基本はUTF-8でOK。)
例えば、name="description"はそのページに関する概要文を示しており、content="ページの解説"へ内容を入力する。
Googleなどの検索エンジンでの検索結果に表示される概要文はこちらの内容を参考にして表示される(入力したとおりに表示するかは検索エンジン次第であるため必ずしもこのとおりとは限らない。)
title そのページのタイトルを示す。ブラウザのタブやウィンドウに表示される。検索エンジンの理解においても重要視される部分とされている。
link 外部ファイルを指定し、そのページとの関係性を示すタグ。rel="icon"でタブやウィンドウに表示されるタイトルの横に付属するアイコン画像(ファビコン)を示している。今回の例であればtype/png href="fav.png"としているので、指定するファビコンの画像形式はpng形式のファイルであり、場所はこのページから見て相対的に同じフォルダ内のfav.pngであることを示している。
画像形式についてより詳しく知りたい場合はMDN Web Docs - 画像ファイルの種類と形式ガイドも参考にされてください。

<head>には他にも様々な情報を入力することができます。

他の代表的な情報については
当サイトのHTML5の基本テンプレートもあわせてご確認ください。

body

そのページのコンテンツを入力するエリアでユーザーの目に直接触れる範囲となります。

ここまでご紹介してきたHTMLの基本的なタグは
この<body>のタグ内で囲んだエリアへ入力していくことになります。

以下にここまでに登場した<html><head>を含めた例をご紹介します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- ここにページの属性情報を記述する -->
    <meta charset="utf-8" />
    <link rel="icon" type="image/png" href="fav.png" />
    <title>HTML入門</title>
    <meta name="description" content="ホームページ作成に必要となるHTMLについての入門記事です。" />
    <!-- ここまで -->
  </head>
  <body>
    <!-- ここにコンテンツを記述する -->
    <h1>HTMLの書き方入門</h1>
    <p>HTMLを使ったホームページ作成の方法を解説します。</p>
    <h2>HTMLとは?</h2>
    <p>HTMLという用語を聞いたことはありますか?</p>
    <!-- ここまで -->
  </body>
</html>

情報は少ないため有益ではありませんが、
これもHTMLで作成されたホームページと呼べる状態となります。

範囲やグルーピングを示すタグ

文章は通常それぞれ関連性や範囲、区切りを示して記述されることが一般的です。

HTMLはあくまでも文章であるため、
範囲やグルーピングを示すためのタグも複数用意されています。

これからご紹介するタグを利用した例は以下のとおりです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/png" href="fav.png" />
    <title>HTML入門</title>
    <meta name="description" content="ホームページ作成に必要となるHTMLについての入門記事です。" />
  </head>
  <body>
    <header>
      <h1>HTMLの書き方入門</h1>
      <p>ホームページ制作に必要なHTMLの書き方を学べます</p>
      <nav>
        <ul>
          <li><a href="#about">HTMLとは</a></li>          
          <li><a href="#tag">HTMLの基本的なタグ</a></li>
        </ul>
      </nav>
    </header>
    <div class="container">
      <main>
        <article>
          <section id="about">
            <h2>HTMLとは</h2>
            <p>HTMLとは、Hyper Text Markup Languageの略で、、、、</p>
          </section>
          <section id="tag">
            <h2>HTMLの基本的なタグ</h2>
            <p>以下のようなタグが基本的なもので、、、、</p>
          </section>
        </article>
      </main>
      <aside>
        <h2>関連リンク</h2>
        <ul>
          <li><a href="/css">CSS入門</a></li>        
          <li><a href="/javascript">JavaScript入門</a></li>
        </ul>
      </aside>
      <footer>
        <nav>
          <ul>
            <li><a href="/">HOME</a></li>          
            <li><a href="/about">会社概要</a></li>          
            <li><a href="/contact">お問合わせ</a></li>
          </ul>
        </nav>
        <p>
          <small>&copy; 2021 COLERS</small>
        </p>
      </footer>
    </div>
  </body>
</html>

セクショニング・コンテンツ

HTML内のコンテンツの区切り・区分を表すものがセクショニング・コンテンツ
以下の4つが定義されています。

タグ 概要
nav ナビゲーションを示しており、主にメニューのリンクを囲む用途で利用される。
article 単独の記事コンテンツであることを示す。また基本的に見出しを最低ひとつは持つ。
section 章であることを示す。また基本的に見出しを最低ひとつは持つ。
aside メインコンテンツに関連するコンテンツであることを示す。

区分を示すタグ

セクショニング・コンテンツ以外にも区分を示すタグは用意されており、
以下の3つが代表的なものになります。

これらは各セクショニング・コンテンツ内でそれぞれ利用することが可能であるため、
ページ内に複数存在しても問題ありません。

タグ 概要
header ページ内あるいは囲まれたセクショニング・コンテンツ内のヘッダーであることを示す。
footer ページ内あるいは囲まれたセクショニング・コンテンツ内のフッターであることを示す。
main ページ内あるいは囲まれたセクショニング・コンテンツ内のメインコンテンツであることを示す。

それ自体は意味を持たないがグループ化できるタグ

HTML5以前から利用されているグループを表現するためのタグが<div><span>です。

HTML5登場以前はセクショニング・コンテンツや
区分を示すタグは用意されていなかったことから
<div id="header">のような利用をされてきました。

ただこれらのタグは他のタグのように意味を持っていないため、
主にCSSやJavaScriptで利用することを想定したグルーピングのために利用されます。

divとspanの使い分け

正確な解説にはCSSの知識にも関連するため詳細は割愛しますが、
かんたんな解釈としては以下のとおりです。

タグ 概要
div 基本的に制約はなく、どんなタグでもグルーピングできる。このタグ自体は意味を持っていない。
span 主に文字に対して利用される。段落の中で一部の範囲だけ文字サイズを変えたい、一部だけ色を変えたいといった利用用途なる。このタグ自体は意味を持っていないためあくまで装飾目的。なお、例えば強調の意味をもたせたい場合は<strong>、アクセントの意味合いであれば<em>も用意されている。

コメントアウト

各種プログラミング言語の場合は複数人で開発するケースや、
コードの量が膨大で複雑化する場合もあります。

そのような場面でそのコードがどういうものなのかを示すために、
ユーザーの目には触れない開発者向けのコメントアウトが用意されています。 ※ただしHTMLは見ようと思えばユーザーが確認することも可能ですので、秘匿情報は書かないように。

HTMLはプログラミング言語ではありませんが、
同じように開発者向けのコメントアウトが用意されています。

どんなときにコメントが必要?

コメントを使う理由はコード全体の可読性(読みやすさ)を上げることです。

実際にホームページ作成を行うと数千〜数万文字に渡るHTMLファイルになることもあり、
タグはすべて英語に近い表記になっていますので、量が増えるに連れ可読性は下がっていきます。

可読性の高いコードは改修がしやすいコードであり、
不具合や機能追加などの修正の工数を最小限にしてくれます。

なお、書きすぎると逆効果になりますのでどこに何を書くかは計画的に行うべきです。

HTMLのコメント記法

HTMLでは以下のように<!-- -->で囲んだ範囲がコメントになります。

<!-- これは段落です -->
<p>あああ</p>

<!-- 
	これは
	段落です
-->
<p>あああ</p>

さらなる学習に向けて

ここまででHTMLでの基本的なルール、利用するタグをご紹介しました。

どの分野もそうですがHTMLも奥が深く、
今回ご紹介したタグ以外にも様々なものが用意されています。

実際にさらに理解を深める場合にはMDN Web Docs(HTMLの基本)を参照したり、
以下のような書籍、あるいは実際に公開されているたくさんのサイトのHTMLを
覗いてみることをオススメします。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

ただし、ホームページのソースコードをそのまま流用し
同じようなホームページを公開することは著作権の観点で禁じられていますので、
くれぐれもご注意ください。

また、HTMLに限らず学習に置いてはインプットだけではなくアウトプットが重要となります。

実際に自分でHTMLでのホームページ作成を繰り返すことが
最も理解を深め実践的なスキルを身につける最短の方法です。

公開されているホームページのソースコードを確認する方法

ブラウザによって若干表記など異なりますがGoogle Chromeを例にしてご紹介します。

  1. ページ内の任意の場所でマウスの右クリック
  2. ページのソースを表示

HTMLをテストする

HTMLを始めとしたWebで使用される技術の標準化を目指した非営利団体として
W3Cという団体があります。

このW3Cが提供する以下のサービスでHTMLの記述が
仕様にそった正しいものかをチェックすることが可能です。

まとめ

ホームページ作成の入り口となりコンテンツそのものとなるHTMLについて
今回は入門記事としてご紹介しました。

すべてを網羅しているわけではありませんが学習のきっかけ、
スキル取得に入り口につながれば幸いです。

関連リンク

HTMLの学習にオススメの書籍

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

  1. SNIPPET
  2. HTML入門