HTML初心者が最初に覚えるべきタグ(1)
HTML(XHTML)を初めて学ぼうとする人にとって、書店で売っているHTML辞典の厚さは学ぶ前からげんなりしてしまうのではないでしょうか？いざ勉強しようとしてもどこから手をつけたらいいのか分からないという人も多いと思います。HTMLの要素(タグ)は実に沢山存在していますが、実際に使われる要素は案外少ないのです。しらみつぶしに覚えていくよりは、良く使われるタグをまずは把握しそれに肉付けしていく形で学んで行くのが一番効率が良い方法でしょう。このエントリーではHTML初心者がまず最初に学ぶべき要素をご紹介します
<html>,<body>,<head>,
<h1>〜<h6>,<p>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<address>
<a><img><br><strong><em>意外に少ないのに拍子抜けした方もいるでしょうか？ブログを書くくらいならこれだけでも十分書くことができるのです。
HTMLの骨格部分となるhtml,head,body
まずHTMLの骨格となる要素を覚えましょう。HTMLにも人間と同じく頭と胴体部分があります。それが<head>と<body>です。<head>で囲われた部分にはHTMLのタイトルを記述したり、様々な設定を記述します。<body>で囲われた部分には実際にブラウザで表示されるタイトルを記述します。
私たちが普段ブラウザを開いてWebサイトを閲覧する時に表示されているのは<body>の中に書かれた部分になります。何か文章をWebブラウザで表示したい場合にはこので<body>で囲われた中に書けばOKです。<head>と<body>は人間と同じように最初に<head>を書き、その後に<body>を記述するように決まっています。
そして<head>と<body>のさらに外側に全体を囲う形で<html>を書きます。実際には下記のような形になります。
見出しをマークアップするための<h1>〜<h6>を覚えよう
まずは見出しになる部分をマークアップする<h1>〜<h6>を覚えましょう。１から６までの数字は何を意味するのかと言うと見出しのレベルです。分かりやすく例えると<h1>が大見出し、<h2>が中見出し,<h3>が小見出しといった具合になります。<h1>でマークアップした部分は通常のブラウザで表示すると大きなサイズの太字で表示されます。<h2>→<h3>→<h4>とレベルが下の見出しになると文字の大きさも次第に小さく表示されるようになります。
『文字の大きさを小さめに表示したいから<h4>でマークアップする』といった使い方はNGです。フォントの大きさや色といった「見栄え」の部分はCSSを使って指定をすることになります。
どのレベルの<h*>タグでマークアップすればいいのか迷ったときは、<h1>から<h6>を全て抜き出して並べた際に「目次として機能する」のかを確認しましょう。目次として見たときに大見出し、中見出し、小見出しといったレベルが文章構造上おかしいのであれば修正すべきです。それぞれの見出しのレベル毎にインデントを付けて書き出してみるとわかりやすいと思います。
段落をマークアップするための<p>要素
見出しのマークアップを理解したら、今度は段落をマークアップするための<p>タグを覚えましょう。段落のように文章の区切り目となる所を囲うようにマークアップします。ただし<p>タグで囲われた中には<h1>タグを入れることはできません。その逆もまた同じです。
箇条書き部分をマークアップするための<ul>と<li>タグ
箇条書きに出来る部分は<ul><li>の２つを使ってマークアップします。<ul><li>はセットで使うことを覚えておきましょう。具体的には下記のように記述します。
- お名前
- 住所
- 電話番号
順番がある場合はolを使う
同じ箇条書きでも1位、２位、３位というような順位を表示する場合や、料理の手順などのように順番を明確にしたい場合は<ol><li>を使います。使い方は先程の<ul><li>と同様で、<ul>の所が<ol>に入れ替わっただけです。
[sourcecode language=”html”]
<ol>
<li>最初にフライパンにオリーブオイルを引き、潰したニンニクを炒め香りを出します</li>
<li>香りがたったら鷹の爪を入れベーコンを入れます</li>
<li>ベーコンに火が通ったら一度火を止め茹でたパスタを入れます</li>
</ol>[/sourcecode]
次回は様々な場面で使える定義型リストとaddress要素を解説します
1 Response
[…] HTML初心者が最初に覚えるべきタグ(1)の続きになります。今回はdl,dt,dd要素とaddress要素についてです。 […]