ウェブページを作るための最初のステップは、HTMLの基本的な構造を理解することです。この記事では、ウェブページを作成する際に必ず必要となる基本的なタグについて、理解しやすいように解説します。
ウェブページのレシピ: HTML
想像してみてください、おいしいケーキを作るにはレシピが必要ですよね? ウェブページを作る時も同じで、そのレシピが「HTML」なんです。
HTML文書のスタート:<!DOCTYPE>
すべてのHTML文書は、<!DOCTYPE html>
という宣言から始まります。これは、「この文書はHTML5で書かれているよ」とブラウザに伝えるためのものです。HTML5は最も現代的で普及しているHTMLのバージョンなので、これを使いましょう。
HTML
<!DOCTYPE html>
ルート要素:<html>
<html>
タグで、HTML文書の始まりと終わりを示します。このタグの中に、ページの全ての内容が含まれます。言い換えると、これがあなたのウェブページの「容器」です。
HTML
<!DOCTYPE html>
<html>
</html>
ヘッド部分:<head>
<head>
タグは、ページの設定や情報(メタデータ)を含む部分です。ここには、ページのタイトル、スタイルシートのリンク(ページの見た目を決めるCSSファイル)、フォントやスクリプトのリンクなどが入ります。
HTML
<head>
<title>ページのタイトル</title>
</head>
この<title>
タグで指定したテキストは、ブラウザのタブに表示されます。
ボディ部分:<body>
<body>
タグは、ウェブページの「本体」です。テキスト、画像、ビデオ、リンクなど、ページ上で見ることができる全てのコンテンツをこの中に書きます。
HTML
<body>
<h1>これは大見出しです</h1>
<p>これは段落です。ここにテキストが入ります。</p>
</body>
これは大見出しです
これは段落です。ここにテキストが入ります。
まとめ
HTML文書を作るときは、この基本的な構造を覚えておくことが大切です。それぞれの部分が何を意味しているかを理解すれば、あなたのウェブページはもうすでに半分完成したようなものです。ここから、さらに内容を充実させていくことになります。
HTML
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>これは大見出しです</h1>
<p>これは段落です。ここにテキストが入ります。</p>
</body>
</html>
コメント