HTMLの基本的な要素まとめ
HTMLはいくつもの要素が積み重なって構成されています。今回は、よく使うHTMLの要素についてまとめます。
要素とは
要素は基本的に開始タグと終了タグで構成されます。入れ子構造を取ることができ、ある要素の中に別の要素を入れていきます。その場合、外側の要素を親要素、中に入っている要素を子要素と呼びます。
html要素
html文書全体を囲う大枠です。htmlの記述は、このhtml要素の中に書いていきます。
<html> </html>
head要素、body要素
この二つの要素はhtmlファイルには必ず存在します。
head要素にはウェブサイトの情報や外部ファイルの読み込みなどについて記述します。実際のwebページには表示されません。
body要素の中に、webページに表示したい情報を記述していきます。
<html> <head> </head> <body> </body> </html>
head要素内に記述する要素
ここからはhead要素内で使用する要素を紹介します。
meta要素
meta要素にはHTML文章の情報を記述します。charset=""のようにして、文字コードを指定します。終了タグがないので注意が必要です。
<head> <meta charset="UTF-8"> </head>
title要素
webページのタイトルを記載します。タイトルはタブに表示されたりします。以下の「endoakak's blog」や「新しいタブ」の部分ですね。
<head> <title>タイトル</title> </head>
link要素
読み込む外部ファイルの指定をします。cssファイルなどを指定します。rel=""で読み込むファイルとの関係、href=""で読み込むファイルの場所と名前を指定します。link要素には終了タグがありません。
<head> <link rel="stylesheet" href="oo.css"> </head>
body要素内に記述する要素
ここからはbody要素内で使用する要素についてまとめます。
header要素、footer要素
ヘッダーとフッター専用の要素です。ヘッダーはwebページの一番上、フッターは一番下に表示されている部分です。
<body> <header> </header> <footer> </footer> </body>
h1~h6要素
見出しを表示するための要素です。h1からh6までの種類があり、数字が小さいほど大きい見出しになります。
<body> <h1>見出し</h1> </body>
p要素
文章を記述する要素です。p要素内に記述した文章は一つの段落として認識されます。webページ上の文章はこのp要素で作られていることが多いです。
<body> <p>p要素</p> </body>
a要素
リンクを作成するための要素です。href=""の部分でリンク先のURLを指定します。下の例では、「リンク」という文字が表示され、それをクリックすることができます（URLを指定していないのでどこにもとびませんが。）
<body> <a href="#">リンク</a> </body>
span要素
文章の一部を指定するときなどに使うのがspan要素です。下の例のように「一部を」の部分だけを指定することで、その部分だけ文字を大きくしたり、色を変えたりといったことが可能になります。
<body> <p>文章の<span>一部を</span>指定する</p> </body>
div要素
divは空の要素です。divで作った箱の中に文章などを入れていきます。
<body> <div> <h1>見出し</h1> <p>本文</p> </div> </body>
ul要素、li要素
ul要素とli要素はリストを作るときに使います。ul要素で作った枠の中に、li要素を並べていくイメージです。
<body> <ul> <li>リスト１</li> <li>リスト２</li> <li>リスト３</li> </ul> </body>
img要素
img要素は画像を挿入するときに使う要素です。src=""の部分で画像の存在する場所を指定します。alt=""では画像が表示できない場合の表示を指定します
<body> <img src="" alt=""> </body>
まとめ
今回はHTMLの要素をまとめました。これ以外にもあると思いますが、とりあえず今回あげたものを使えばwebページの作成はできるかと思います。
