HTMLの勉強メモ

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

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″などと入れる。 例１：<time datetime=”2018-12-25″>2018年12月25日</time> 例２：明日は<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>が１ページに何個もあるのは推奨されない 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>用語１</dt>
<dd>用語１の定義の説明</dd>
<dt>用語２</dt>
<dd>用語２の定義の説明</dd>
<dl>

UL,LI,(OL)

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

<ul>
<li>箇条書き１</li>
<li>箇条書き２</li>
<li>箇条書き３</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="サイト名">