目次
HTMLの重要性
Web開発において、HTMLは極めて重要な役割を果たしています。HTMLはHyperText Markup Languageの略で、ウェブページの構造や内容を記述するための言語です。この記事では、HTMLの基礎を学ぶためのポイントをわかりやすく解説していきます。
基本構造：HTMLの骨格
まず最初に、HTMLの基本構造を理解しましょう。HTMLは以下のような形で記述されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基礎</title>
</head>
<body>
<!-- ここにページのコンテンツが入ります -->
</body>
</html><!DOCTYPE html>は、HTML5の宣言です。これにより、ブラウザはHTML5として解釈します。<html>タグは、ページ全体のルート要素です。言語属性lang="ja"は、ページの言語が日本語であることを示しています。<head>タグは、メタ情報やCSS、JavaScriptのリンクなど、ページに関する情報を含める部分です。<meta charset="UTF-8">は、文字コードがUTF-8であることを示しています。<title>タグは、ページのタイトルを表します。これはブラウザのタブや履歴で表示されます。<body>タグは、ページの実際のコンテンツを含める部分です。
要素とタグ：HTMLの基本単位
HTMLは、さまざまな要素（タグ）で構成されています。以下は、よく使われる基本的なタグです。
タイトルと見出し
<h1>これは大見出しです</h1>
<h2>これは中見出しです</h2>
<h3>これは小見出しです</h3><h1>から<h6>までのタグは、見出しを表します。数字が大きくなるほど、見出しのレベルが下がります。
段落と改行
<p>これは段落です。テキストは自動的に折り返されます。</p>
<br>
<p>これは改行後の新しい段落です。</p><p>タグは、段落を表します。テキストは自動的に折り返されます。<br>タグは、改行を表します。閉じタグはありません。
リンク
<a href="https://example.com">これはリンクです</a><a>タグは、リンク（アンカー）を表します。href属性には、リンク先のURLを指定します。
リスト
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
<ol>
<li>順序付き項目1</li>
<li>順序付き項目2</li>
</ol><ul>タグは、無順序リストを表します。項目は<li>タグで囲みます。<ol>タグは、順序付きリストを表します。こちらも項目は<li>タグで囲みます。
画像
<img src="image.jpg" alt="画像の説明" width="300" height="200"><img>タグは、画像を表示するためのタグです。src属性には、画像ファイルのパスを指定します。alt属性には、画像の説明を記述します。これは画像が表示できない場合や、スクリーンリーダーが読み上げるための情報です。widthとheight属性で、画像のサイズを指定できます。
テーブル
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table><table>タグは、テーブルを表します。<tr>タグは、テーブルの行を表し、<th>タグは見出しセル、<td>タグはデータセルを表します。
フォーム要素：ユーザーとのインタラクション
フォーム要素は、ユーザーから情報を受け取るための要素です。以下は、基本的なフォーム要素の例です。
<form action="/submit" method="post">
<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">パスワード：</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="送信">
</form><form>タグは、フォーム全体を表します。action属性には、フォームのデータを送信する先のURLを指定します。method属性には、送信方法（GETまたはPOST）を指定します。<label>タグは、フォーム要素のラベルを表します。for属性には、関連するフォーム要素のIDを指定します。これにより、ラベルをクリックすることで対応するフォーム要素にフォーカスが移動します。<input>タグは、さまざまな種類の入力フィールドを表します。type属性によって、入力タイプを指定できます。例えば、type="text"はテキスト入力フィールド、type="password"はパスワード入力フィールドを表します。id属性は、要素に一意な識別子を与えるために使用され、name属性は、フォームデータを送信する際のパラメータ名を指定します。<input type="submit">は、送信ボタンを表します。value属性には、ボタンに表示されるテキストを指定できます。
他にも、チェックボックスやラジオボタン、テキストエリア、セレクトボックスなど、さまざまなフォーム要素があります。
セマンティックタグ：意味を持つタグ
セマンティックタグは、要素の意味や役割を表すタグです。これにより、ウェブページの構造が明確になり、検索エンジンやスクリーンリーダーにも情報が伝わりやすくなります。以下は、一般的なセマンティックタグの例です。
htmlCopy code<header>
<h1>ページタイトル</h1>
<nav>
<ul>
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>記事タイトル</h2>
<p>記事の内容</p>
</article>
</main>
<footer>
<p>コピーライト情報</p>
</footer>
<header>タグは、ページのヘッダー部分を表します。通常、ページタイトルやナビゲーションが含まれます。<nav>タグは、ナビゲーションリンクを表します。<main>タグは、ページのメインコンテンツを表します。一つのページには一つの<main>タグが推奨されます。<article>タグは、独立したコンテンツを表します。ブログ記事やニュース記事などが該当します。<footer>タグは、ページのフッター部分を表します。コピーライト情報や連絡先などが含まれることが一般的です。
コメント: コードの説明を追加する
HTMLコメントは、コード内にメモや説明を追加するために使用されます。コメントはブラウザに表示されず、ソースコードを見たときにのみ表示されます。
<!-- これはコメントです -->
<p>これは段落です。コメントは表示されません。</p>
<!-- コメントは複数行にもできます。 -->コメントの開始は <!-- で、終了は --> で表されます。コメントは、コードの構造や役割を説明したり、未実装の部分や注意事項を示すために役立ちます。
HTMLのエンティティ: 特殊文字を表現する
HTMLでは、特殊文字を表すためにエンティティが使用されます。例えば、< や > などの記号は、タグの開始や終了を表すために予約されているため、テキストとして表示することはできません。このような特殊文字を表示するために、HTMLエンティティが使用されます。
<p>これは小なり記号です：<</p>
<p>これは大なり記号です：></p>
<p>これはアンパサンドです：&</p>エンティティは、& で始まり、; で終わります。たとえば、< は小なり記号（<）を、> は大なり記号（>）を、& はアンパサンド（&）を表します。
まとめ
この記事では、HTMLの基礎について説明しました。HTMLはウェブページの構造や内容を記述するための言語であり、さまざまなタグや要素を使用して表現されます。また、セマンティックタグを使用することで、コンテンツの意味や役割が明確になり、アクセシビリティや検索エンジン対策にも役立ちます。HTMLの基本を理解し、ウェブページを効果的に構築していくことが重要です。
今後も、ITやDX、投資等に関する人生を豊かにして自由な時間を増やせるような情報を発信していきますので是非お楽しみに！
↓ オススメ記事 ↓
初心者にオススメの言語？Python入門 - 基礎から学ぶプログラミングの世界への第一歩
