IP01-08 WebページとWebサイトの仕組み｜スターAI・情報塾教材

HTML (HyperText Markup Language)	Webページを作成するための言語。Webページの構造を定義する。
タグ	Webページの構造を定義する命令。<タグ名>のように記述される。

HTMLは大きく分けて次の3種類のタグに分けられます。

それぞれ、どのようなタグがあるか確認しましょう。

タグ	役割	備考
<!DOCTYPE html>	HTML5であることを宣言する	最初に1回だけ書く ※HTML5とはHTMLのバージョン5のことです。
<html>	HTML文書のルート(先頭)要素	HTML全体を囲む
<head>	ページの情報（タイトル、文字コードなど）を記述	画面には直接表示されない
<meta charset="UTF-8">	文字コードの指定	日本語の文字化け防止 HTMLの標準はUTF-8を使います
<title>	Webページのタイトル	ブラウザのタブの部分に表示される
<body>	ページの中身（本文）を記述	実際にブラウザに表示される部分

文書の基本構造を作るタグを使ったHTMLの構成は基本的にどのWebページも同じ構成になります。

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
 </head>
 <body>
    
   ブラウザに表示される内容を記述
 
 </body>
</html>

全てのWebページに共通した構造です。最初にこの構造を記述して、内容を作成していきます。

参考

開始タグと終了タグで囲まれた文字はインデント(字下げ)を行うとより見やすくなります。

多くのWebページが、上から順に「header」、「nav」、「main」、「footer」の順に並んでいます。

実際に文部科学省のWebページを見て確認します。

「header」、「nav」、「main」、「footer」を使ったWebページの構成の枠組みと実際のWebページを比べてみましょう。

20205/6/16現在の文部科学省のHPを一部改変して表示しています。

全然気にしてなかったけれど、Webページってこれと同じ並び順のページが多そう。

全てが、この順番ではないですが、この順だと誰が見ても分かりやすいWebページになりますね。

続いて、「表示内容を作るタグ」を確認しましょう。

タグ	役割	備考
<h1>～<h6>	見出しの指定	数字が小さいほど大きな見出しになる
<p>	段落や文章の指定	自動的に改行される
<a href="リンク先">	ハイパーリンクを作成する	target="_blank"で同一ブラウザの別タブで開く
<img src="画像ファイル名">	画像を表示する	画像が表示できない場合の指定ができる
<ul>/<ol>/<li>	リスト（箇条書き/番号付き）を指定する	ネスト（入れ子構造）が作成できる
<br>	改行を指定する	<p>タグの中でも指定可能
<strong>	文章を太字に指定する	文としての強調という意味もある

表示したい内容に合わせて、表示内容を作るタグを使って文章を整えます。

また、上記以外にもHTMLのタグには多くの指定があります。どのようなタグがあるかは下記のページで確認できます。

HTML要素リファレンスを開く

HTMLをどのように使っていくか例を見ながら具体的に確認していきましょう。

Well done!

次のステップに進みましょう！