HTMLに関する私的なメモです。書いた本人にしかわからない所が多いです。

メモ

タグの種類

strong
重要であることを示す。さらに入れ子にできる。

em
文章の重要な単語等につかい、文章の意味を変える
例:私の好きな<em>音楽</em>はクラッシック
音楽が何かを示す文章にする

mark
視覚的にハイライトする。強調の意味はない。cssでやること

b
視覚的に太字にする。強調の意味はない。cssでやること

big
視覚的にテキストを大きくする。cssでやること

small
免責・警告・法的規制・著作権・ライセンス要件などの注釈を意味する。(html5からは単に文字を小さくするという意味ではなくなったので注意!)

del
その部分が削除されたことを意味する。

s
その部分が正確ではなくなったことを意味する。価格改定とか。

ins
その部分が追加されたことを意味する。

abbr
略語であることを意味する。
例:<abbr title="Extensible Markup Language">XML</abbr>

cite
本や音楽などの作品タイトルであることを意味する。
またblockquoteの引用元のurlに使用するが、あくまでAnchorを囲って、urlに対して使用するのである。
作品名に使い、人名に対しては使わない。

pre
整形済みコードであることを示す。

code
コードであることを意味する。

kbd
キーボード入力であることを意味する。

samp
プログラムによる出力結果であることを意味する。

var
変数であることを意味する。

sub
下付き文字(var内で使う)であることを意味する。装飾的な目的では使わないこと

sup
上付き文字(var内で使う)であることを意味する。装飾的な目的では使わないこと。

details
備考や操作手段などの詳細情報であることを意味する。脚注として使うのは推奨されない。

figure
本文を補完する図や表であることを意味する。これが無くても本文は完結する。

output
計算結果であることを示す。

time
日付または時刻を正確に示す際に使う。自由な表記にするには、属性値datetime=”1978-5-26″などと入れる。
例1:<time datetime=”2018-12-25″>2018年12月25日</time>
例2:明日は<time>10:00</time>に出かける

OGPとは

Facebookやmixiでシェアされたときの表示内容を指定できる(OGP設定していないと適当な記事文面がシェア表示される)
<meta property=”og:image” content=”サムネイル画像のurl”>
<meta property=”og:locale” content=”ja_JP”>
<meta property=”og:type” content=”article”>
<meta property=”og:title” content=”タイトル”>
<meta property=”og:description” content=”記事文面デスクリプション”>
<meta property=”og:url” content=”記事url”>
<meta property=”og:site_name” content=”サイト名”>

html5の要素

header
イントロダクションや、前置きや、ナビゲーションの助けとなるグループを入れる。(グローバルナビなど)

main
bodyのメインコンテンツとなるもの。領域は、そのページの中心的なトピック(ブログ記事そのもの)やそのトピックから発展するようなコンテンツ(コメントや関連記事へのリンク)。そのページ固有のコンテンツを指す。他のページにも繰り返し出現するようなナビゲーションやリンク、検索フォームなどは含まない。

article
完全に自己完結した構成品。記事そのものなど。記事に対するコメントもarticleにできるが、元の記事の入れ子にすると良い。

div
特別な意味は無い。cssの装飾等で使用する単なる区切り。

nav
ページ内リンクや他ページへリンクするリンクのセクション。
(グローバルナビ、パンくず、目次 など)。<nav>が1ページに何個もあるのは推奨されない

aside
前後のコンテンツに関連はあるもの、ややメインコンテンツ(そのページの内容・本筋)からはなれながらも軽く触れたいコンテンツ。広告。

h1
見出しタグ。各セクションでh1を使ってはNG。html5.1の仕様変更にともない、例えばarticleの記事タイトルをh1としasideの中でもカテゴリなどをh1につかうと、記事タイトルとh1が同位の扱いとなる。したがってhタグを使うにはそのページ内での重要度に応じてh1-h6を自分で配分する必要がある。

セクショニングタグとは

スタイリングのために使うものではない。navとaside以外は見出しタグhが必要。
section HTMLドキュメント内の一般的なセクションを表す要素
article 独立したコンテンツのセクションを表す要素
aside 主要なセクションと少し関連のあるセクションを表す要素
nav ナビゲーションに特化したセクションを表す要素

h1,h2,h3・・・のセクショニング

見出しタグは先にでた見出しタグよりも小さなタグが発生すると新たにセクションが作られる。これをリセットするには先に<section>を宣言しh1,h2,h3・・と記述していったあとに</section>で閉じると最初の<section>と同じレベルに戻る

ファビコン指定方法

<link rel="shortcut icon" href="ファビコンのパスfavicon.ico"/>

htmlの構造マークアップのチェックサイト

HTML 5 OutlinerのサイトでURL入力するだけ。chromeのアドオンもある。

DT,DD,DL

用語を定義するときに使う。用語が複数あるときはそれをさらに<dl></dl>で囲う。

<dl>
<dt>用語1</dt>
<dd>用語1の定義の説明</dd>
<dt>用語2</dt>
<dd>用語2の定義の説明</dd>
<dl>

UL,LI,(OL)

箇条書きのリストに使う。ulはリスト全体を示し、liはリストの各行をしめす。(順序のあるリストの場合はulの代わりにolを使う)

<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ul>

OGPとは

Facebookやmixiでシェアされたときの表示内容を指定できる(OGP設定していないと適当な記事文面がシェア表示される)

<meta property="og:image" content="サムネイル画像のurl">
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="article">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="記事文面デスクリプション">
<meta property="og:url" content="記事url">
<meta property="og:site_name" content="サイト名">