HTML基礎②

余談：SEO対策　それぞれのタグを適切に使う事が大事

HTMLのタグ—文書情報（headブロック）

1.ページタイトル

title要素（ページタイトル）

<title>Webページのタイトル</title>

ブラウザのタイトルに表示される名称

2.メタデータ（meta要素）

1.文字コード指定/charset

<meta charset-"UTF-8">

HTMLを記述している文字コード

2.ページの説明/desciption

<meta name="description" content="サイトの説明文">

ページの概要文（最近はGoogleの説明欄には出ない）

3.ページのキーワード/keywords

<meta name-"keywords" content="キーワード">

ページ検索のキーワード、なくてもいい

4.ページ作者情報/author

<meta name-"author" content="ページ作者情報">

このWebサイトを作った人

5.ビューポート/viwport

<meta name="viwport" content="width=device-width,initial-scale=10">

スマホの表示で必要になる、とりあえず入れておけばいい

3.リンク情報（link）

１.外部CSSファイルの紐づけ

<link hreh="スタイルシートのパス名" rel="styleseet"type="text/css">

外部のスタイルシートファイルの紐づけ　※上から順にする！

2.ファビコンファイルの紐づけ

<link hreh="ファビコンファイルのパス名" rel="icon">

ファビコン（ページのシンボルアイコンのファイル）と紐づけ

参考サイト：https://favicon-generator.mintsu-dev.com/
作った画像をファビコンファイルに変換してくれる

HTMLのタグ—文書本体（bodyブロック）

1.文書本体のタグ分類

  • セクション分類タグ
  • コンテンツ分類タグ
  • テキスト分類タグ
  • コンテンツ埋め込みタグ
  • テーブルタグ
  • フォームタグ

＜注意事項＞HTML5では分類が変わった（でも性質自体は変わらない）

2.セクション分類タグ

1.h1～h6　見出し

<h1>h1 レベル見出し情報</h1>
<h2>h2 レベル見出し情報</h2>
<h3>h3 レベル見出し情報</h3>
<h4>h4 レベル見出し情報</h4>
<h5>h5 レベル見出し情報</h5>
<h6>h6 レベル見出し情報</h6>

〇各レベルに合った見出しを指定する　※h1はページに一つだけ
〇順番に使う→h1の次にいきなりh3は使えない、親子関係なのでh1～h6の順番は入れ子構造を守る

2.article

<artcle>アーティクル情報</article>

単独で成り立つコンテンツ→あまり使わなくていい

3.section

<section>セクション定義情報</section>

章のブロックを定義するタグ
〇基本的にh1～h6の見出しタグを設置、sectionタグを使用する際の目安は見出しタグが付けられるか
〇セクションを区切るためのタグ、CSSによるデザイン・レイアウト調整やJavaScriptによるDOM操作のために使用しない

4.header

<header>ヘッダー定義情報</header>

ヘッダーブロック

5.hooter

<hooter>フッター定義情報</hooter>

ページの最下部、フッターブロックを定義
〇版権表示（コーポレートマーク）等を入れることが多い
　©/いつから（年）/版権の名前

6.nav

<nav>グローバルナビゲーション情報</nav>

グローバルナビゲーションの定義→ヘッダーやフッターの中に入れてもいい

7.aside

<aside>アサイド定義情報</aside>

ページの情報と関係ないブロック

8.表示サンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML セクション　サンプル</title>
    <style>
      body {
        margin: 0;
      }
      .container {
        border: #ccc 1px solid;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>h1 レベル見出し情報</h1>
      <h2>h2 レベル見出し情報</h2>
      <h3>h3 レベル見出し情報</h3>
      <h4>h4 レベル見出し情報</h4>
      <h5>h5 レベル見出し情報</h5>
      <h6>H6 レベル見出し情報</h6>
      <article>アーティクル定義情報</article>
      <section>セクション定義情報</section>
      <header>ヘッダー定義情報</header>
      <footer>フッター定義情報</footer>
      <nav>グローバルナビゲーション定義情報</nav>
      <aside>アサイド定義情報</aside>
    </div>
  </body>
</html>

3.コンテンツ分類タグ

1.p（パラグラフ/段落）

<p>段落定義情報～ここに文章を入れる～</p>

2.hr（区切り）

<hr>

テーマや話題の区切りに使う、終了タグはない
〇だいたい黒い線が入る

3.ul/li（順序のないリスト）

<ul>
　<li>リスト要素</li>
　<li>リスト要素</li>
</ul>

4.ol/（順序のあるリスト）

<ol>
　<li>リスト要素</li>
　<li>リスト要素</li>
</ol>

5.dl/dt/dd（定義、説明リスト）

<dl>
　<dt>説明する言葉</dt><dd>説明文</dd>
　<dt>説明する言葉</dt><dd>説明文</dd>
</dl>

6.div（ひとつの塊の範囲）

<div>ひとつの塊の範囲情報</div>

デザイン・レイアウトをするときに必要（CSSで範囲指定する）

7.main（メインコンテンツ）

<main>メインコンテンツ定義情報</main>

セクションに似ている、メインの定義情報

8.表示サンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML コンテンツ　サンプル</title>
    <style>
      body {
        margin: 0;
      }
      .container {
        border: #ccc 1px solid;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>段落定義情報</p>
      <ul>
        <li>リスト要素</li>
        <li>リスト要素</li>
      </ul>
      <hr>
      <ol>
        <li>リスト要素</li>
        <li>リスト要素</li>
      </ol>
      <hr>
      <dl>
        <dt>説明する言葉</dt><dd>説明文</dd>
        <dt>説明する言葉</dt><dd>説明文</dd>
      </dl>
      <hr>
      <div>ひとつの塊の定義情報</div>
      <hr>
      <main>メインコンテンツ定義情報</main>
    </div>
  </body>
</html>

その他

〇リストはCSSでスタイルを指定することで色々変えられる
〇dlタグにCSS指定で「：」や用語固定長などにもできる
〇タグを入れ子構造にする際の字下げに気を付ける：Tabキーで下げる