HTMLドキュメント構造を設定する
このステップでは、リストのデモ用の基本的なHTMLドキュメント構造を作成する方法を学びます。HTMLドキュメントには、ウェブコンテンツの基盤となる標準的な構造があります。
WebIDEを開き、~/project
ディレクトリに移動します。ファイルエクスプローラで右クリックして「新しいファイル」を選択することで、lists.html
という新しいファイルを作成します。
次に、基本的なHTML5ドキュメント構造を作成しましょう。lists.html
ファイルに次のコードを入力します:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Lists Example</title>
</head>
<body>
<!-- 次のステップでここにリストを追加します -->
</body>
</html>
このHTML構造の主要なコンポーネントを分解してみましょう:
<!DOCTYPE html>
は、これがHTML5ドキュメントであることを宣言します
<html lang="en">
は、言語仕様付きのルート要素です
<head>
は、ドキュメントに関するメタデータを含んでいます
<meta charset="UTF-8">
は、適切な文字エンコーディングを確保します
<meta name="viewport">
は、レスポンシブデザインに役立ちます
<title>
は、ブラウザのタブに表示されるページのタイトルを設定します
<body>
は、メインコンテンツが配置される場所です
ブラウザでの例の出力は、ブラウザのタブに「HTML Lists Example」というタイトルが表示された空白のページになります。
注:WebIDEでHTMLファイルをプレビューする方法に関する詳細を学ぶ。