【HTML】タグと文章構造

2016-04-20

タグ

TAGはHTMLを使う上で基本中の基本になります。
「<○○○○>」というような形の記号と考えたほうが早いかと思います。

その形はいろいろで、タグの名称、属性、タイトル、ID、スタイルといった感じの要素が含まれることがあります。もちろん、ない場合もあります。

例えば、aタグというもの。タグで囲まれたテキストにリンクを貼ることができます。しかし、そのタグに要素などが含まれた場合、その限りではなくなってしまいます。
このaタグの場合は特にそうです。リンクを貼る場合、hrefという属性を付け加えて、リンクを貼りますが、その内容を別のものにすることがあります。

<a href="......">～</a>

基本的にこのような形になります。

<a href="......" title="......">～</a>

こうすることで、ブラウザにもよるけど、この文字の上にマウスを重ねると、titleで指定した文字が表示されます。
そういったタグで共通している属性とか、専用の属性とかがあるので、調べてから使うのがいいでしょう。
さらに、HTML5が登場してから、各ブラウザはそれぞれ新しいタグにも対応してきています。完全にHTML5が提唱しているすべてのタグが使えるわけではありませんが、少しずつ変化してきている。すでに「canvas」とか、「article」とか聞いたことのないようなタグが多数出てきているので、それぞれ使い方を覚えていく必要があります。

文章構造

HTMLの中で最も難しいもの。
国語が苦手な氷翠はもっと難しい。
HTML５になって、文章の構造を明確にするようなタグが増えてきました。
例えば、ページ全体を示す「article」タグ、もちろん、１ファイルの中で複数のページを…というような考えであれば、何度も使ってもいいでしょうし。
他に「section」タグ。１ページの中でも分ける必要がある場合にはこれを使うと便利。というかわかりやすい。
これらを知っていると、それぞれの中で「h1」タグが存在している。
今までの作り方でいくと、h1をサイトのタイトルとかにする場合が多く、１ページの中で一つしか存在していなかった。
ところが、サイトのタイトルとかは「header」タグというブロックの中で構成し、「h1」タグはあくまでも文章のタイトル、というか見出しなのだ。
本来の使い方に近づいたのだろうと思う。
そして、「h1」タグがないまま、h2タグ以降はありえないということになる。
検索エンジンの中でもこういったものが重要視されてきているので、これになれていかないといけない。

上記以外でも、メニューのブロックは「menu」タグ、ナビゲーションは「nav」タグといったタグも用意されている。初期状態ではブロック要素なのだが、スタイルシートでどうとでもできる。
つまり、今後のHTMLはHTMLのタグと、スタイルシートも覚えていかないといけない。
文章構造とは離れるが、スタイルシートも、一つのプロパティの中の値の付け方が増えていたりする。

とにかく、どんなタグが存在しているのか、どんな使い方をしているのかを勉強していかないといけない。