HTMLのきまり文句と文書構造に関するタグ

2020年12月4日HTML

HTMLは、文章を理解してマークアップしていくための言語ですが、その大枠には決り文句があります。
ここではその決り文句の意味を理解しましょう。

HTMLのきまり文句

まず、HTMLには最低限必要なきまり文句が存在します。
そのHTMLのきまり文句をまずはざっと見た上で、その意味を理解していきましょう。

HTMLのきまり文句を理解する

最初の<!DOCTYPE html>は、document typeの意味で、html文書ですよと宣言しています。
DOCTYPEは大文字でかくのが習慣です。

そして、<html>タグで全体を囲って、
その中に<head>タグと<body>タグをいれます。
<html> タグは属性にlanguageのlang属性で日本語の意味のjaを属性の値に指定する。
html内にメモが残せますが、それをコメントと呼ぎます。<!— ->という形で書きます。

<head>タグの中には、
<meta>タグで属性に文字コードを指定します。utf-8が主流なのでutf-8で基本的にOKです。
次に<title>タグをかきます。
<title>タグはwebページのタイトルになります。

そして、<meta>タグで、属性をname、属性の値をdescription、さらに属性を追加してcontent属性に属性の値をwebサイトの簡単な説明を書きます。<meta>タグの内容は表示されませんが、検索エンジンが利用したりするので必ず書いておきましょう。

html拡張子

HTMLの文書は、htmlという拡張子を使います。
最初に作るhtmlファイルはindex.htmlが一般的です。
自由につけることもできますが、今後勉強していくと、後で困ることが起きる場合もあるため、最初につくるhtml文書は、index.htmlとつけるんだと思っておくといいでしょう。

大事なこと

HTMLのきまり文句は、エディターによっては!とエンターで一瞬で作れてしまいます。
よって暗記する必要はありません。
誤ってタグを消してしまったときなどに対応できるように、意味を理解しておくことが重要です。

 

HTMLの文書構造を見やすくするHTMLタグ

headerタグ

最初に見たときに表示される場所（ファーストビュー）などの見出し的な部分に使います。

footerタグ

footerタグはコピーライトを書くときなどに使います。

headerタグとfooterタグは絶対にページの最初と最後ということではなく、必要があればコンテンツの途中で出てくる場合もある。

mainタグ

mainタグはページに一つしか使えない。

sectionタグ

sectionタグは何回でも使える区切り。意味のあるまとまりで区切るときに使う。

articleタグ

articleタグは記事一覧を表示するときなどに使う。

その歳、時間を書くなら、投稿日はtimeタグで表示する。

<article>
<h1>記事のタイトル</h1>
<p>お知らせです。お知らせです。お知らせです。お知らせです。お知らせです。</p>
<footer>投稿日： <time>2019-10-01</time> by @taguchi</footer>
</article>

h1~h6タグ

&lt;h1&gt;~&lt;h6&gt;は見出しを意味するタグです。

hはheadingの意味で、h1から大見出し、h2は中見出しと数が増えるにつれ小さい見出しになります。

p要素

&lt;p&gt;は段落（パラグラフ：paragraph）を意味します。

文章の意味的なまとまりで使われるため、文章のところでたくさん登場することになります。

divタグ､spanタグ

この2つは、文書構造を決めるときに使うものではありませんが、一番よく使うタグになります。
用途としては、CSSと合わせてスタイリングするときなどに使います。

HTML

Posted by devsakaso