HTML入門：ウェブページの骨格

Posted on by

HTML（HyperText Markup Language）は、インターネット上のウェブページを作成するための基本的なマークアップ言語です。HTMLはウェブページの構造を定義し、テキスト、画像、リンクなどの要素を配置します。この記事では、HTMLの基本となる概念と構造を紹介します。

HTMLの基本

ドキュメント構造

HTMLドキュメントは <html> タグで始まり、<head> と <body> の二つの主要部分に分かれています。

<!DOCTYPE html>
<html>
<head>
    <title>ページのタイトル</title>
</head>
<body>
    <!-- コンテンツがここに入ります -->
</body>
</html>
  • <!DOCTYPE html>: 文書のタイプを宣言し、HTML5を使用していることをブラウザに伝えます。
  • <html>: HTMLドキュメントのルート要素。
  • <head>: メタデータ、スタイルシートのリンク、スクリプトなど、ページに関する情報を含みます。
  • <body>: 実際のウェブページのコンテンツを含みます。

基本的な要素

HTMLは様々な要素で構成されており、それぞれが特定の機能を持ちます。

  • <h1>～<h6>: 見出しを示すタグ。<h1>が最も重要で、<h6>へと重要度が下がります。
  • <p>: 段落を示すタグ。
  • <a href="URL">: ハイパーリンクを作成します。
  • <img src="画像のURL" alt="代替テキスト">: 画像を埋め込みます。
  • <ul>, <ol>, <li>: 箇条書きや番号付きリストを作成します。
  • <div>: コンテンツを区切るための汎用コンテナ。

セマンティックHTML

HTML5では、より意味のあるウェブページの構造を作成するために、セマンティック（意味論的）な要素が導入されました。

  • <header>: ページまたはセクションのヘッダー部分。
  • <footer>: ページまたはセクションのフッター部分。
  • <article>: 独立して配布または再利用可能なコンテンツ領域。
  • <section>: ドキュメント内の独立したセクション。
  • <nav>: ナビゲーションリンクのグループ。

まとめ

HTMLはウェブ開発の基礎であり、ウェブページの構造とコンテンツの基盤を提供します。明確な構造とセマンティック要素の使用により、アクセシブルでメンテナンスしやすいウェブサイトを構築することができます。HTMLの基本をマスターすることは、ウェブ開発の旅の第一歩です。

CSSの基本: スタイリングの鍵
JavaScript入門：動的なウェブ体験のためのプログラミング