新しい HTML ドキュメントを構成する方法

HTML (HyperText Markup Language) は Web コンテンツのバックボーンであり、Web サイトに表示される情報に構造を提供します。すべての HTML ドキュメントは、必須の要素を含む基本構造に従っています。主要なコンポーネントを詳しく見てみましょう。

1. '<!DOCTYPE html>'

この宣言は、使用される HTML のドキュメントタイプとバージョンを定義します。最近の Web ページでは、「<!DOCTYPE html>」を使用するのが通例です。

2. '<html>'

ルート要素は HTML ドキュメント全体をカプセル化します。

3. '<head>'

ヘッドセクションには、タイトル、文字セット、リンクされたスタイルシートなどのドキュメントに関するメタ情報が含まれます。

4. '<title>'

この要素は、ブラウザのタブまたはウィンドウに表示される HTML ドキュメントのタイトルを設定します。

5. '<body>'

body 要素には、テキスト、画像、リンクなどの HTML ドキュメントのコンテンツが含まれます。

HTMLドキュメントの例

それでは、すべてを例にまとめてみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML Document</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple example of an HTML document.</p>
    <img src="example.jpg" alt="An example image">
    <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

この例では、"My HTML Document" を目的のタイトルに置き換え、'<body>' 内のコンテンツをそれに応じて調整します。この基本構造を理解することで、よく整理された、意味的に意味のある Web ページを作成するための基礎が築かれます。

ボーナス: 終了タグ

HTML ページを作成するときは、ページフローやレンダリングの問題を避けるために、すべてのタグが適切に閉じられていることを確認することが重要です。このタスクを支援するには、HTML 閉じられていないタグチェッカーツールをチェックして、HTML コード内の構造的な問題を検出します。

html ドキュメントヘッドボディメタタイトル div p img a h1 lang charset ビューポート