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タグ
<h1>~<h6>は見出しを意味するタグです。
hはheadingの意味で、h1から大見出し、h2は中見出しと数が増えるにつれ小さい見出しになります。
p要素
<p>は段落（パラグラフ：paragraph）を意味します。
文章の意味的なまとまりで使われるため、文章のところでたくさん登場することになります。
divタグ､spanタグ
この2つは、文書構造を決めるときに使うものではありませんが、一番よく使うタグになります。
用途としては、CSSと合わせてスタイリングするときなどに使います。