HTML(HyperText Markup Language)は、ウェブページの構造を作成するための標準的なマークアップ言語です。ウェブサイトやウェブアプリケーションを作成する際、HTMLはコンテンツを構造化し、視覚的な要素やリンク、メディアなどを表示するために使用されます。HTMLはウェブの基盤となる技術の一つであり、他の言語と組み合わせて動的でインタラクティブなウェブページを作成するために用いられます。
HTMLの基本的な構成要素
HTML文書は、いくつかの基本的な要素から成り立っています。最も重要な要素は「タグ」と呼ばれ、これによりウェブページのコンテンツや構造が定義されます。タグは通常、角括弧(< >)で囲まれており、開始タグと終了タグのペアとして使われます。例えば、段落を定義するためには
タグを使用します。
1. ドキュメントタイプ宣言(DOCTYPE宣言)
HTML文書の最初に記載されるのがDOCTYPE宣言です。これは、文書がどのHTMLのバージョンで書かれているかをブラウザに示すもので、HTML5の場合は以下のように記載します:
htmlhtml>
2. タグ
HTML文書全体を囲む最も基本的なタグがタグです。このタグ内には、ページ全体のコンテンツが配置されます。タグは開始タグと終了タグを持ち、文書全体を示します。
html<html>
html>
3. タグ
タグは、HTML文書のメタ情報やリンク、スタイルシート、スクリプトなどを定義するための部分です。この部分はブラウザに直接表示されることはなく、ウェブページの構造や動作に影響を与えます。タグ内には、以下のような要素が含まれることがあります。
タグ(文書の文字エンコーディングや言語を指定)タグ(ページのタイトルを設定)タグ(外部スタイルシートをリンク)タグ(内部スタイルシートを定義)
タグ(JavaScriptコードを挿入)
html<head>
<meta charset="UTF-8">
<title>ウェブページのタイトルtitle>
<link rel="stylesheet" href="style.css">
head>
4. タグ
タグは、実際にブラウザに表示されるコンテンツが含まれる部分です。テキスト、画像、リンク、ボタンなど、ユーザーがインタラクトするすべての要素はこの部分に配置されます。例えば、段落やリスト、画像などを表示するためのタグが含まれます。
html<body>
<h1>ウェルカムページh1>
<p>これはHTMLの例です。p>
body>
HTMLの基本的なタグとその使用例
HTMLにはさまざまなタグがありますが、以下は最もよく使用される基本的なタグです。
1. 見出しタグ
HTMLには6種類の見出しタグ(
~
)があります。これらは、ウェブページの重要な見出しを定義するために使用されます。
は最も重要な見出し、
は最も低い重要度の見出しを意味します。
html<h1>最も重要な見出しh1>
<h2>次に重要な見出しh2>
2. 段落タグ
<h1>最も重要な見出しh1>
<h2>次に重要な見出しh2>
段落を作成するためには
タグを使用します。テキストが段落として表示され、文書内で内容が区切られます。
html<p>これは段落です。p>
3. リストタグ
HTMLでは順序付きリスト(
- )や順不同リスト(
- 順序付きリスト:
- 順不同リスト:
: ページやセクションのヘッダーを定義します。
: ページやセクションのフッターを定義します。
: 独立したコンテンツを定義します。
: 複数のコンテンツをグループ化します。
: ナビゲーションリンクを定義します。
)を作成することができます。リストの項目は
タグで定義します。
html<ol>
<li>最初の項目li>
<li>次の項目li>
ol>
html<ul>
<li>アイテム1li>
<li>アイテム2li>
ul>
4. リンクタグ
リンクを作成するためにはタグを使用します。href属性にリンク先のURLを指定します。
html<a href="https://www.example.com">Exampleサイトa>
5. 画像タグ
画像をウェブページに表示するためにはタグを使用します。src属性に画像のURLを指定し、alt属性には画像が表示されない場合の代替テキストを記述します。
html<img src="image.jpg" alt="画像の説明">
HTML5の新しい要素
HTML5では、従来のタグに加えて新しいセマンティック要素が追加され、文書の意味構造をより明確にしました。これにより、検索エンジンやユーザーエージェント(ブラウザ)がコンテンツをより理解しやすくなります。以下はその一部です。
html<header>
<h1>ウェブサイトのタイトルh1>
header>
<article>
<h2>記事のタイトルh2>
<p>記事の内容...p>
article>
<footer>
<p>© 2025 ウェブサイト名p>
footer>
HTMLの属性
HTMLのタグには、タグの動作や外観を変更するための属性を設定することができます。属性は、タグの開始タグ内に記述され、name="value"の形式で指定されます。例えば、タグのhref属性や、タグのsrc属性などがあります。
1. class属性
class属性は、CSSで特定のスタイルを適用するために使用します。
html<p class="intro">この段落には特定のスタイルが適用されます。p>
2. id属性
id属性は、HTML要素に一意の識別子を付けるために使用します。JavaScriptやCSSでこのidを利用して、要素にアクセスしたりスタイルを変更したりします。
html<div id="header">ヘッダー内容div>
HTMLの重要性と役割
HTMLはウェブ開発の基盤となる技術であり、ウェブページの内容と構造を定義します。ウェブページのデザインや動的な機能を作成するためには、HTMLだけでなく、CSS(Cascading Style Sheets)やJavaScriptといった他の技術も必要ですが、HTMLは全てのウェブページの土台として欠かせません。
ウェブ開発において、HTMLは検索エンジン最適化(SEO)やアクセシビリティ(A11Y)の観点からも重要です。意味のあるHTMLタグを正しく使用することで、検索エンジンにおけるランキングを向上させることができ、視覚障害を持つユーザーにも適切な情報を提供することができます。
HTMLの進化により、より豊かなウェブ体験が可能になり、ウェブ開発者はその知識を活用してインタラクティブで魅力的なサイトを作り上げています。
