<body> </body>
ブラウザに表示されるコンテンツ部分全体を表す。
ヘッダーエリアを指定する <header> </header>
ヘッダーの内容はこのタグの中に記述する
フッターの内容はこのタグの中に記述する
段落 <p> </p>
文書の段落を表す
見出し <h1> </h1>
h1からh6までがある
h1が最も重要度が高い見出し
検索エンジンが正確に構造を把握できなくなるので、文字を大きくするため、などのレイアウト目的の使い方をしてはいけない。
見出しは見出しとして使う。
グループ化 <section> </section>
章や節のような見出しと概要を伴う一般的なセクション
必ず見出しを入れることが推奨されている。
グループ化 <article> </article>
自己完結した独立したセクション
<article>で囲った文章だけを切り出してもコンテンツとして成立するものは、これでグループ化する
例えばブログのトップページで表示されている、ブログ記事一覧の一つ一つは<article>でグループ化出来る。
記事詳細ページは<article>でまるごと囲むのが適切
グループ化 <aside> </aside>
メインコンテンツと関連が薄く、取り外しても問題のない要素は、これでグループ化する
主にサイドバーでよく使われる。
内容がページの主要なナビゲーションである場合は、これでグループ化する
グループ化 <div> </div>
<div>にグループ化の意味付けはない。レイアウト目的の箱として利用する。
HTML5以前はグループ化は<div>しかなかった。
グループ化する場合は <section>, <article>, <aside>, <nav> を検討し、どれにも当てはまらない場合のみ<div>でグループ化する。
グループ化 <span> </span>
CSSでスタイリングをするために要素をグループ化する。
<span>自体に特別な意味は無い。文字列の一部を装飾したい場合などに、CSSで装飾が出来るようにその範囲だけを<span></span>で囲ったりする。
<div>要素との違いは、<div>は前後に改行が入るブロックレベル要素。
<span>要素は改行が入らないインライン要素。
ハイパーリンク <a> </a>
他のページへのリンクなどを指定する。
外部のWEBサイトへのリンク(絶対パス)
<a href="https://www.google.co.jp">Google</a>のページへジャンプ。
実行結果:
同サイト内でのリンク(相対パス)
<a href="../../sample.html">サンプル</a>
メールアドレスの指定や、新規のウィンドウで開くなどの指定もできる。
画像ファイルを掲載する <img>
終了タグはない。
<img src="graphic.jpg" alt="代替テキスト">
alt属性は省略できない。必要ない場合は alt="" とする。
他にwidth, height属性などがある。
番号なしリスト <ul>
<ul>
<li>リストA</li>
<li>リストB</li>
<li>リストC</li>
</ul>
番号付きリスト <ol>
<ol>
<li>リストA</li>
<li>リストB</li>
<li>リストC</li>
</ol>