WEB制作に必須の言語【HTML】に触れてみよう！

WEB制作をする際にはさまざまな言語が必要とされます。
その中でも必ず使用する言語の１つが「HTML」です。
ではこのHTMLとはいったいなんなのでしょうか？

1. HTMLの基本概念

HTMLとは？

HTML（HyperText Markup Language）は、ウェブページを構成するための基本的なマークアップ言語です。ウェブブラウザがウェブページを表示するために利用する骨組みとも言えます。HTMLの目的は、コンテンツの構造を定義し、文章や画像、リンクなどを整理して表示させることです。

マークアップ言語とは？

マークアップ言語は、テキストデータに特定のタグを埋め込むことで、そのデータの構造や意味を明示する言語です。HTMLでは、<html>タグから始まり、<body>タグでコンテンツ部分を定義します。各要素は適切なタグで囲むことで、ブラウザにどのように表示するかを指示します。

2. HTMLの構造

基本的な構成要素

下記のコードはHTML文書の書き方の一例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これはHTMLのサンプルです。</p>
</body>
</html>

各要素の書き方については後の記事でお伝えしていきます。

HTMLタグの種類

HTMLでは、様々なタグを使用してコンテンツの意味や構造を定義します。以下は代表的なタグの例です：

見出しタグ: <h1>から<h6>まであり、数字が小さいほど重要度が高くなります。
段落タグ: <p>は段落を定義します。
リンクタグ: <a>はハイパーリンクを作成します。
画像タグ: <img>は画像を表示します。
リストタグ: <ul>と<li>は箇条書きを、<ol>と<li>は番号付きリストを作成します。

このようなタグと呼ばれるひとまとまりの記述を書き連ねていくのがWEB制作の基本となります。

属性と値

タグには属性を追加することができ、属性はタグの動作や表示方法を詳しく指定するために使われます。例えば、<img>タグではsrc属性を使って画像のソースを指定し、alt属性で画像の代替テキストを指定します。

htmlコードをコピーする<img src="example.jpg" alt="例の画像">

3. HTMLの使い方

テキストの構造化

HTMLは単にコンテンツを表示するだけでなく、コンテンツの構造を論理的に整理することも重要です。見出し、段落、リスト、リンクなどを適切に使うことで、ページの内容をわかりやすく、ナビゲートしやすくします。

セマンティックHTML

セマンティック（意味論的）HTMLとは、意味を持ったタグを使うことによって、内容の意味や役割を明確にすることです。これにより、検索エンジンのクローラーやスクリーンリーダーなど、さまざまなテクノロジーがコンテンツを理解しやすくなります。

例えば、ナビゲーションメニューには<nav>タグ、主要なコンテンツには<main>タグを使用します。これにより、ページの構造が明確になり、SEO（検索エンジン最適化）にも有利です。

5. まとめ

HTMLはウェブ制作の基本であり、コンテンツの構造を明確にブラウザに伝えるための重要なツールです。基本的なタグの使い方や、セマンティックなマークアップの理解を深めることで、より良いウェブサイトを作成することができます。次のステップとしては、CSSやJavaScriptと組み合わせることで、デザインやインタラクティブ性(クリックをすることでリアルタイムで応答などが行われること)を向上させることを学びましょう。