HTMLとは？初心者でもスグに理解できる基本知識を1から解説！

HP制作

2024.07.29

HTMLは、web制作を行うために絶対に欠かせません。また、web制作だけではなくwebマーケティングやディレクションを行う人にとっても、知識を身につけることで業務がより円滑になります。

そこでこの記事では、そもそもHTMLとは何か、基本構造やよく使われるタグとその意味などを解説します。

これからWebに携わろうとしている方は、ぜひ参考にしてください。

HTMLとは？基本構造と役割

HTMLとは、Webページを作成するためのマークアップ言語であり、テキストや画像、リンク、メディアなどのコンテンツを構造化して表示します。

HTMLは、タグと呼ばれる要素を使用して、コンテンツを定義します。たとえば、タグは段落を示しリンクを作成します。HTMLを理解することで、Webページの基礎を学び、Webサイト制作が可能です。

要素

HTMLの役割は、Webページの構造を定義することです。HTML要素を使って、「見出し・段落・画像・リンク・リスト」などのコンテンツを作成します。これらの要素は、それぞれの役割を持ち、どのようにコンテンツを表示すべきかを指示するのです。

たとえば、見出し要素（h1～h6）はタイトルやセクションの見出しを定義し、段落要素（p）は文章の段落を示します。リンク要素（a）は他のページやリソースへのハイパーリンクを作成します。

ユーザーは情報をスムーズに取得でき、Webサイトのナビゲーションもカンタンになるでしょう。

属性

HTMLの基本構造には、タグとともに属性という要素があります。属性はタグに追加情報を渡し、動作や表示方法を指定します。たとえば、タグにsrc属性を追加して画像のURLを指定すると画像を表示することが可能です。

属性は開始タグの中に記述され、リンクのように使われます。href属性はリンク先のURLを指定します。

また、タグにtype属性を追加して入力フィールドの種類を指定したり、class属性やid属性を使ってスタイルやスクリプトを適用する要素を特定したりすることも可能です。

HTMLとCSSの関係

HTMLとCSSは、Webページを作成するために重要です。HTMLはWebページの構造を定義するための言語であり、「テキスト・画像・リンク」などの要素があります。一方、CSSはHTML要素のスタイルやレイアウトを指定するための言語です。

HTMLがWebページの骨組みを作り、CSSがその骨組みにデザインを与える役割を果たします。たとえば、HTMLでは見出しをタグで定義しますが、見出しの色やフォントサイズを変更するにはCSSを使用します。

以下はその例です。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1>HTMLとCSSの関係性とは？</h1>
</body>
</html>

HTMLとCSSはそれぞれ独立した言語ですが、組み合わせて使用することでWebページを作成できます。CSSを使うことで、HTMLのマークアップを変更せずにデザインを更新できるため、メンテナンスがしやすくなります。
※CSSはhtmlに直書きせずに.CSSファイルに記述し、読み込ませて使いましょう。

HTMLの歴史と種類

HTMLは、Webページを作成するための基本的な言語で、その歴史はインターネットの発展とともに進化してきました。最初のHTMLは1991年にティム・バーナーズ＝リーによって開発されたのです。

HTMLの初期バージョンは、シンプルなテキストとリンクを扱うための基本的な機能しか持っていませんでした。バージョンアップで、より複雑なレイアウトやインタラクティブなコンテンツをサポートするようになったのです。

HTML4は1997年にリリースされ、CSSのサポートやスクリプトの埋め込みなど、多くの新機能が追加されています。これにより、デザインとコンテンツの分離が進み、Webページの作成がよりカンタンになりました。

次に登場したHTML5は2014年に正式に勧告され、マルチメディアのサポートが強化され、タグの追加、キャンバス描画のためのタグなどが導入されたのです。

また、HTML5ではセマンティックなタグが追加され、検索エンジンにとって理解しやすい構造を持つページの作成がカンタンになりました。さらに、HTMLの発展はHTML Living Standardへと続きます。

WHATWG（Web Hypertext Application Technology Working Group）によってメンテナンスされているのです。継続的に更新される仕様で、最新のWeb技術やブラウザの進化に対応するために改良が加えられています。

HTMLとSEOの関係

HTMLはSEO対策において大きな影響があります。SEOは、検索エンジンでランキングを向上させるための施策のことです。HTMLは、SEOの効果を最大限に引き出すために重要です。

HTMLのタイトルタグは、検索エンジンがWebページの内容を理解する上で最も重要な要素の一つになります。

適切なキーワードを含んだタイトルを設定することで、検索エンジンがページのテーマを正しく認識し、関連する検索キーワードに対して表示される可能性が高まります。次に、メタディスクリプションタグは、検索結果ページに表示される説明文です。

メタディスクリプションもSEOに影響を与え、ユーザーがタイトルをクリックするかどうかの判断材料となります。魅力的で関連性の高いメタディスクリプションを設定することが重要です。

さらに、見出しタグはコンテンツの構造を整理し、検索エンジンにとってページの主要なテーマを明確にするために使用されます。その他の見出しタグは、内容をセクションごとに整理するために使用します。

また、alt属性を使った画像タグは画像の内容をテキストで説明し、検索エンジンが画像を理解するのです。最後に、内部リンクや外部リンクは、ページの信頼性と関連性を高めます。

内部リンクはサイト内の他のページへ誘導しやすくし、外部リンクは信頼できる情報源を参照することでページの価値を高めます。HTML要素を効果的に活用すると、検索エンジンのランキングを向上させ、より多くのユーザーにリーチすることが可能です。

このように、HTMLとSEOの関係を理解し、実践することでWebサイトの運用が成功します。

HTMLを扱う職種とは

HTMLを扱う職種には、主に以下のものがあります。「Webデザイナー・Webディレクター・Webマーケター」の3職種です。

Webデザイナーは、HTMLを使って美しいWebページを作成し、利便性の高いWebサイトを作成します。Webディレクターは、サイト全体の構成とデザインを統括し、HTMLの適切な使用を指示するのです。

Webマーケターは、SEO対策としてHTMLのタグやメタデータを最適化し、サイトの検索エンジンランキングを向上させます。「Webデザイナー・Webディレクター・Webマーケター」の職種は、HTMLの知識を活用してWebサイトを運営します。

HTMLの学習方法

HTMLの学習方法は、オンラインの無料チュートリアルやコースを利用するのがおすすめです。実際にコードを書くと、タグや要素の使い方を理解できるメリットがあります。デメリットは、オンラインコースを受講すると料金がかかることです。

知識がない場合は無料のオンラインコースで学び、知識と経験を付けてから有料のオンラインコースを受講する順番がおすすめです。

また、書籍やYouTubeなども役立ちます。書籍は1冊2,000円程度で購入でき、YouTubeは無料で視聴できるためコストを抑えて学べることがメリットです。ただし、学べる情報に限りがあるので本格的に学びたい方にはデメリットになるでしょう。

初心者向けの書籍やYouTubeで学ぶのがおすすめです。

さらに、Webサイトのソースコードを観察し、実際の使用例を学ぶことも重要です。実際の使用例を学ぶとコードの書き方やタグの使い方がわかるようになります。ですが、ある程度の知識や経験がなければ参考にならないでしょう。

検索エンジン（GoogleやYahoo）で検索し、上位10サイトのソースコードを確認するのがおすすめです。

HTMLの学習方法にはそれぞれのメリットとデメリットを理解し、定期的に学習しWebサイトを作成してスキルを向上させましょう。

HTMLファイルを作成する流れ

HTMLファイルを作成する流れを解説します。

テキストエディタでソースを作成する
ファイルを保存する
Webブラウザで確認する

テキストエディタでソースを作成する

テキストエディタ（例：Notepad、Visual Studio Code）を開きます。次に、基本的なHTML構造を入力します。たとえば、以下のようなコードです。

<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<h1>HTMLでWebサイトを制作する方法</h1>
</body>
</html>

コードを入力し、ファイルを「example.html」などの名前で保存します。保存したファイルをブラウザで開くと、HTMLページが表示されます。

ファイルを保存する

HTMLファイルを作成する流れは、テキストエディタ（例：Notepad、Visual Studio Code）でHTMLコードを記述しましょう。次に、ファイルを保存します。

保存時には、ファイル名に「.html」拡張子を付けます。「example.html」として保存しましょう。ファイルをブラウザで開くと、記述したHTML内容が表示されます。

ファイルを適切に保存することで、ブラウザがHTMLコードを正しく解釈し、Webページとして表示できるようになります。

Webブラウザで確認する

HTMLファイルを作成する流れでは、テキストエディタでHTMLコードを記述し、ファイルを「.html」拡張子で保存しましょう。次に、そのファイルをWebブラウザで開いて確認します。

「example.html」を保存後、ブラウザでそのファイルをドラッグ＆ドロップするか、ファイルを直接開きましょう。これにより、記述したHTML内容がブラウザに表示され、正しく動作しているかを確認できます。

初心者が覚えておきたいHTMLの代表的なタグ

HTMLには様々な種類のタグがありますが、主に使用されるタグは限られています。そこで、Web制作を始める際に、まず覚えておくべき重要なタグを紹介します。

これらのタグを理解して使いこなすことで、基本的なウェブページの作成が可能になるでしょう。

hタグ

hタグは見出しを表すタグです。h1からh6までの6種類があり、h1が最も重要で、数字が大きくなるほど重要度が下がります。h1タグはページの主なタイトルに使われ、h2以降は内容のセクションごとに使います。

hタグは、以下のように記述します

<h1>これは見出し1です</h1>

hタグは、SEO対策でも重要な役割を持ちます。見出しを設定することで読み手が記事全体を把握しやすくなるだけではなく、検索エンジンも記事に何で何が紹介されているのかがわかるようになるのです。

そのため、hタグには対策キーワードを積極的に入れるなどの対策が行われます。

pタグ

pタグは段落を表すタグです。文章を段落ごとに区切るために使用します。一般的に、pタグで区切られた箇所が、ページでは改行として扱われます。

pタグは、以下のように記述します。

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

pタグを使うことで、CSSを用いてスタイルを調整しやすくなります。例えば、段落ごとに余白を設定したり、フォントを変更したりすることが可能です。

aタグ

aタグはリンクを作成するためのタグです。href属性にリンク先のURLを指定することで、任意のページへ遷移することができます。また、aタグに囲まれたテキストはアンカーテキストと呼ばれます。aタグは、以下のように記述します。

<a href="https://www.example.com">リンクのテキスト</a>

適切なリンクを設置することで、ユーザーの利便性が向上します。また、aタグもSEOにおいて重要です。クローラーはリンクを辿ってページを遷移しているだけではなく、外部サイトaタグでリンクを受け取ることで、ページの評価向上にも繋がりやすくなります。

また、target属性を記述する場合もあります。target=”_blank”と記述することで、新しいタブでリンク先を開くことを意味します。これにより、ユーザーが現在のページを離れずにリンク先を確認できます。

imgタグ

imgタグは、HTMLで画像を表示するためのタグです。imgタグは他のタグとは異なり、終了タグを持たない単独のタグで、以下のように記述します。

<img src="image.jpg" alt="説明文">

src属性には、表示したい画像のファイルパスを指定します。パスには相対パスと絶対パスの2種類があり、相対パスは画像ファイルがHTMLファイルと同じディレクトリ内にある場合に使います。一方、絶対パスは画像ファイルの完全なURLを指定します。

また、alt属性は画像の代替テキストを指定するもので、画像が表示されない場合や視覚障害者向けのスクリーンリーダーが使用される場合に重要です。この属性に適切な説明文を入れることで、画像の内容をテキストで伝えることができます。

さらに、width属性とheight属性を記述する場合もあります。これらの属性は画像の表示サイズを指定するもので、ピクセル単位で指定します。

liタグ

liタグは、リストの項目を表すために使用するタグです。基本的にilタグだけで使用されることはなく、順序付きリスト（olタグ）や順序なしリスト（ulタグ）内で使用されます。

例えば、以下のように記述します。

<ol>
<li>順序付きリスト</li>
<li>順序付きリスト</li>
<li>順序付きリスト</li>
</ol>

<ul>
<li>順序なしリスト</li>
<li>順序なしリスト</li>
<li>順序なしリスト</li>
</ul>

liタグを正しく使うことで情報を整理しやすくなり、ユーザーにとっても理解しやすい表現ができるようになります。特に、初めてHTMLを学ぶ方はまずliタグの基本を理解し、実際に使用してみることをおすすめします。

tableタグ

tableタグは、表を作成するためのタグです。tableタグを使うことで、データを行と列に分けて整理して表示できます。

tableタグを使用するときは、以下のタグと合わせて使用します。

trタグ：「table row」の略で、行を指定する
thタグ：「table header」の略で、見出しやタイトルを指定する
tdタグ：「table data」の略で、内容を指定する

また、以下のように記述します。

<table border="1">
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
</table>

このように記述することで、以下のように表示されます。

見出し	見出し
データ	データ

border属性は、表の枠線の太さを設定するための属性です。一般的にはCSSで指定することが多いので記述することは少ないですが、CSSが設定されていない場合は記述する必要があります。

divタグ

divタグは、グループ化するために使用されるタグです。divタグ自体は特に意味を持たない汎用的なタグですが、他の要素を囲んでまとまりを作る役割を持ちます。

一般的に、divタグはclass属性やid属性とともに使用します。属性にCSSを設定することで、div内の記述に装飾を加えるのです。例えば、ボタンやデザインされたテキストボックスなど、divは様々な場面で活用されます。

div属性を使いこなせるようになると、Web制作で表現できることが大きく広がります。そのため、積極的に活用したいタグの一つです。

spanタグ

spanタグは、HTMLのインライン要素をグループ化するために使用されるタグです。divタグ同様に単体では意味を持たないタグですが、特定の部分にスタイルを適用する際に役立ちます。

基本的な記述方法は以下の通りです。

<span style="color: red;">テキスト</span>

これにより、「重要な部分」というテキストが赤色で表示されます。

spanタグとdivタグの違いは、主に表示形式と用途にあります。spanタグはインライン要素であり、囲まれた部分は他のテキストと同じ行に表示されます。

これに対して、divタグはブロックレベル要素であり、囲まれた部分は新しい行に表示され、前後に改行が入ります。

用途についても違いがあります。spanタグは、テキストの一部をスタイリングしたり操作する場合に使用します。

例えば、特定の単語だけ色を変えたり、フォントを変更する場合に便利です。一方、divタグはページ全体のレイアウトを構成したり、大きな要素をまとめる場合に使用します。例えば、セクションごとにコンテンツを分ける場合に使います。

まとめ

HTMLとは、「Webページを作成するための基本的な言語」のことです。Web制作を行う方はもちろん、WebディレクションやWebマーケティングに携わる方にも、欠かせない知識です。

初めは理解しにくくても、実際に手を動かしながら今回ご紹介した初めに覚えたいタグを使用してみることで、少しずつ身につけることができるでしょう。特にディレクションやマーケティングに携わる方であれば、基本さえ理解できれば問題はありません。

ですが、実際にサイトを制作したり大規模な改修を行う場合には、より専門的な知識と経験が必要です。もしそうした取り組みを行う場合は、専門家に依頼した方が安心です。まずは相談から初めてみるのもおすすめです。その場合は、ぜひ問い合わせることから初めてみてくださいね。