この記事では、HTMLの基本構造について簡単に解説していこうと思います。
HTML（Hyper Text Markup Language: ハイパーテキストマークアップランゲージ）は、Webページを作成するためのマークアップ言語です。
HTMLを使うことで、文字や画像、音声や動画などのコンテンツをWebページに配置し、見た目や構造を指定することができます。
Webページの基本的な構成要素を表す「タグ」と呼ばれるものを使って、HTML文書を作成していきます。HTMLはWebページを作る上で必要不可欠な言語であり、習得難易度も低く初心者におすすめの言語です。
本記事では、HTMLを簡単に解説していきます。
HTMLとは？HTMLについて簡単に解説
HTMLとは？
HTMLとは、HyperText Markup Languageの略称で、Webページを作成するためのマークアップ言語の一つです。Webページを構成する要素をタグと呼ばれる記号で囲み、それぞれの要素に意味を持たせて構成します。
HTMLのタグについて
HTMLは、タグと呼ばれるマークアップ要素を使って文書の構造や意味を示します。
HTMLのタグには、開始タグと終了タグがあり、次のように構成されています。
<タグ名> コンテンツ </タグ名>開始タグは < で始まり、> で終わり、終了タグは < の後に / を追加して始めます。コンテンツは、開始タグと終了タグの間にあるテキストや他の要素です。
タグ名は英数字で構成される必要があり、大文字と小文字が区別されます。
HTMLのタグは、<html> タグで始まり、<head> タグと <body> タグの2つのセクションに分かれます。 <head> タグには、ページのタイトルやメタ情報などが含まれ、<body> タグには、ページの実際のコンテンツが含まれます。
これらのルールを覚えて、正しいタグの使用方法を習得することが、HTMLの基本です。
HTMLの基本構造
HTMLは基本的に以下のような構造になっています。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>段落1</p>
<h2>見出し2</h2>
<p>段落2</p>
</body>
</html><!DOCTYPE html>は、文書がHTML5で記述されていることを示す宣言です。<html>はHTMLのルート要素であり、全体を囲むタグです。<head>はページの情報を含む要素を囲むタグで、ページのタイトルやCSS（Webページ見た目を整える言語）や JavaScript（Webページに動きをつけるプログラミング言語）の読み込みなどを指定することができます。<body>はWebページの本文を含む要素を囲むタグです。<h1>や<h2>は見出しを表すタグで、数字が大きいほど重要度が低くなります。（h1 ~ h6まで存在します）<p>は段落を表すタグで、文章を改行して表示することができます。
HTMLタグの種類
HTMLには、様々なタグが用意されており、それぞれのタグには異なる意味があります。
例えば、以下のタグをソースコードと実装例で紹介します。
<a>：リンクを作成するためのタグ<ul>と<li>：箇条書きを作成するためのタグ
まず、aタグはリンクを作る際に使用するタグです。以下はaタグの例です。
<a href="https://www.supuky.com">supuky.com</a>実際の画面では、supuky.com のように表示されます。
クリックするとhrefに指定しているURLの、https://www.supuky.comに移動します。
また、ulタグとliタグは、順序のないリストを作成する際に使用するタグです。以下はulタグとliタグの例です。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>- Item 1
- Item 2
- Item 3
上記の例では、3つの項目がリストとして表示されます。ulタグでリストを開始し、liタグで各項目を記述します。liタグはulタグの中でのみ使用できます。
このように、HTMLのタグはWebページを構成する上で非常に重要な役割を持っています。
まとめ
HTMLは、Webページを作成するための言語であり、Webページの構成要素を表すタグを使って作成されます。HTMLの基本構造は<!DOCTYPE html>、<html>、<head>、<body>からなり、Webページの要素は様々なタグで表されます。HTMLを理解しておくことは、Webページの作成に必要不可欠なスキルです。
今回はHTMLを簡単に解説しました。記事を読んでいただきありがとうございました。
