HTML5 - 主要なコンテンツに使えるタグ一覧
タグの基礎知識だ。下記の名称などは正直そんなに覚える必要はない。僕自身、この記事を書こうとするまでそんな名称だったのか！ と知らない事だらけだった。
タグの名称
<div id="container">タグの中身</div>
上記のタグを細かく見ると次のようになる。
| タグ名 | 属性 | コンテンツ | 終了タグ |
|---|---|---|---|
| <div | id="container"> | タグの中身 | </div> |
上で書いたこれらをまとめて「要素」という。
属性はidならid属性、classならclass属性と言う。
主要なコンテンツタグ
| タグ | 説明 |
|---|---|
| <h1>見出し</h1> | h1からh6まであり、記事やサイトのコンテンツの見出しを記述するタグ。 |
| <br> | 改行するタグ。読み方はブレイクが正しい。バーと読んでしまいそうだ。たくさん改行したくてこのbrタグ連続で使うのはNG！もし、それをしたいなら下のpタグを使うべきだ。 |
|
<p> ... </p> |
段落に関係する。pタグで囲まれた文章は余白ができる。別のカテゴリのCSSで教えるデザイン変更で余白を自由に変更する事で調整が可能だ。 |
|
<span> ... </span> |
CSSのデザインで使う。spanタグで囲んでも何も見た目は変わらない。CSSを使って主に文章のデザインを変更する為に使う。例えば文字の色や大きさ等を変更する際にこのタグを使う。 |
|
<div> ... </div> |
CSSのスタイルで使う。spanタグは主に文章に使うが、divタグはサイトのデザインに使う。 |
|
<ul> <li>Text1</li> <li>Text2</li> <li>Text3</li> </ul> |
箇条書き等のリストを表示する際に使う。普通に使うとTextの前に「・」が付くがCSSでこれをデザインできる。またnavタグでナビゲーションメニューの中にこのリストタグを使ってメニューを作成するのが一般的だ。 |
|
<dl> <dt>単語</dt> <dd>説明</dd> </dl> |
記述リストだ。1つのグループのdtやddは複数使うことができる。応用ページで解説する。 |
|
<a href="URL"> ... </a> |
リンクタグ。別のページに飛ばすリンクをこのaタグで記述する。hrefはエイチレフと読むらしい。ハーフと呼んでしまいそうだ。 |
|
<strong> ... </strong> |
強調を示す。このstrongタグで囲まれたテキストは書体が太字になり重要なテキストだと表す事ができる。検索エンジンにもヒットしやすくなる。 |
|
<pre> ... </pre> |
preタグは整形済みのテキストを表示できる。タグのコードを表示したい場合、「<」と記述すると「<」と表示される。これはHTMLタグのコードを表示したい時に使う。 |
|
<code> ... </code> |
preタグの親戚。codeタグで囲われたテキストはソースコードである事を示す。 |