CodeGym /コース /Frontend SELF JA /HTMLドキュメント構造

HTMLドキュメント構造

Frontend SELF JA
レベル 1 , レッスン 4
使用可能

1. HTMLドキュメントの紹介

HTMLドキュメントがどのように構成されているか、見てみよう。どのHTMLドキュメントも何から始まる?すべてのHTMLドキュメントは、htmlheadbodyという3つのネストされたタグで構成されている。これは標準であり、例は次の通り:


<!DOCTYPE html>
<html>
    <head>
        ヘルパータグ
    </head>
    <body>
        本体ドキュメント
    </body>
</html>

ブラウザが表示するすべての内容は、ペアタグbody(ドキュメント本体)の中にある。headタグの中には、ブラウザ用の補助/ヘルパー情報が含まれる。

また、ドキュメントの冒頭には、(必須ではないが)doctypeを記述するのが一般的だ。これにより、ブラウザがエラーを解釈する際に役立つ。多くのブラウザは壊れたレイアウトを持つドキュメントでも正しく表示することができる。

2. HTMLドキュメントの例

HTMLドキュメントは、すべてのWebページの基礎だ。これは、ブラウザにページがどのように見えるべきかを伝えるものだ。シンプルなHTMLドキュメントの例を以下に示す:

HTML
      
<!DOCTYPE html>
<html>
    <head> <title>ページのタイトル</title> </head>
    <body> <h1>こんにちは、世界!</h1> <p>これは私の最初のウェブページです。</p> </body>
</html>
      
    

HTMLドキュメントの主な部分

この行は、ドキュメントタイプ宣言(doctype)と呼ばれる。これは、ドキュメントがHTML5、すなわちHTML言語の最新バージョンで書かれていることをブラウザに伝える。ページが正しく表示されるために重要だ。

<html>

タグ<html>;はHTMLドキュメントを開く。このタグ内にWebページのすべての内容を含める必要がある。このタグがHTMLドキュメントの始まりと終わりを示す。

<head>

タグ<head>は、ページに関する補助情報を含む。この情報は直接Webページに表示されず、ブラウザや検索エンジンにとって重要だ。

タグ<title>は、ブラウザタブに表示されるページのタイトルを設定する。これは、ユーザーがページを開いたときに最初に目にするものだ。

<body>

タグ <body>には、Webページ上で目に見えるすべての内容が含まれる:テキスト、画像、リンク、表など。ユーザーが画面で見るすべてが、このタグの中にある。

<h1>こんにちは、世界!</h1>

タグ <h1>は第一レベルの見出しを表す。これは、ページ上で最も重要な見出しに使用される。このタグ内のテキストは、大きくて太いフォントで表示される。

<p>これは私の最初のウェブページです</p>

タグ <p>は、テキストの段落を表す。これは、テキストを論理的なブロックに分けるために使用される。このタグ内のテキストは、通常の段落として表示される。

コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION