「HTML」の版間の差分

← 古い編集新しい編集 →

2019年2月20日 (水) 11:06時点における版

HTML ( HyperText Markup Language ) は、Webマシンが配給するコンテンツを Google にとって分かりやすくするためのマークアップタグ。

CSS や JavaScript と併用すればコンテンツの見栄えは芸術の域にまで昇華する。

主な目的

Web文書にタグ付けして文書全体を意味的にキレイに整理する。

Google など検索エンジンに文書構造を正しく伝える
HTMLタグに CSSを適用して文書全体をデザインする

文書構造や意味付けがしっかりした（セマンティックな）Web文書を作成すると、そのWeb文書は構造的には W3C標準に準拠した素晴らしいものとなる。

多種多様なコードによって的確な意味付けをすると、そのWeb文書は Googlebot から見て意味の豊富なものとなり、サイバー世界をキレイに整理したがっている Google からも好かれることになる。

加えて、CSS を利用して人間学的にも良いデザインをすると、その Web文書は多くの人たちにとっても素晴らしい印象や説得力を与えるものとなる。

メインルート

`html`	HTML文書においてルート（起点）となるトップレベル要素。ルート要素とも呼ばれる。他のすべての要素はこの要素の子孫として配置される

文書メタデータ

`meta`	他のメタ要素で表すことができないメタデータを定義。charset、http-equiv、name ( description、author、googlebot、robots を含む ) など
`title`	ページの題名を定義。ブラウザのタイトルバーやページのタブに表示される
`base`	ページ内に含まれるすべての相対URL の基点となる URL を定義。アンカータグなどが参照する
`link`	現在のページと外部リソースとの関係を定義。ナビゲーションの関係構造の定義など。スタイルシートをリンクするためによく利用される
`style`	ページ全体あるいは一部分のスタイル情報を定義

セクショニングルート

`body`	HTML文書のコンテンツを表す。ページ内に一つだけ配置する

コンテンツセクショニング

論理的に大まかなアウトラインを作成するためのタグ。

`header`	導入的なコンテンツ、特にロゴやナビゲーションなどのグループを表す。タイトルや <h1>見出し以外に、検索フォーム、作者名なども含めることができる
`nav`	サイトの主要なナビゲーション機能を提供しているセクションを表す。一般的な例としてはグローバルメニュー、目次、索引など。ページ内で複数利用が可能。ただし <footer> などによく含められるリンク等に使う必要はない
`main`	そのページの主要な内容を表す。主要な内容とはページの中心的な話題、またはアプリケーションの中心的な機能に関係すること。ゆえに、他ページで繰り返されているものは除くべき。１つのページに１つ
`article`	ページ内で自己完結しており、フィードなどで個別に配信や再利用できる構成物を表す。例えば、新聞や雑誌の記事、ブログ記事、フォーラムの投稿など。ゆえに、このセクションは見出し情報などを含んでいるべき
`<h1>~<h6>`	セクションの見出しを6段階で表す。 <h1> が最上位で <h6> が最下位。見出しレベルをスキップしてはいけない
`aside`	そのページのメインコンテンツと間接的な関係しかない部分を表す
`footer`	ページの終端を表す。通常はサイト全体あるいは特定のセクションの著者情報、連絡先、関連サイトへのリンク、コピーライト表示などを含める
`address`	そのページやセクションを提供しいている個人、団体、組織の連絡先（SNSアカウントも可）の提供を表す。タグ内に必ず連絡先の名称を含める。一般的には <footer> 内に配置される。一行利用ではなくと同じように文章でも利用できる
`section`	一つのまとまりを表す。意味的に他に妥当なタグがない場合に利用。例えば、検索結果の一覧、地図の表示など。ゆえに、通常は見出しが含まれる。そのセクション単独で配信して意味がある場合は <article> を利用すべき。スタイル付の目的のみで区切る場合はを利用すべき

ブロックコンテンツ

論理的により細かい意味付けをするためのタグ。

`p`	段落を表す
`ul`	順不同リストを表す。普通は黒点などの行頭記号を伴って表示される
`ol`	順序リストを表す。普通は連番の数字を伴って表示される
`li`	リスト項目を表す。<ul>、<lo> いずれかの子要素として配置
`dl`	定義リストを表す。<dt> と <dd> の組み合わせをリスト化したもの。一般的な使用例として、用語集、キーと値のペアリストなどが挙げられる。<dt> と <dd> が複数ある場合は、デザイン付のためにそれらを <div> で囲んでも良い
`dt`	用語を表す。<dl> の子要素としてのみ利用できる
`dd`	の詳細や定義を表す。<dt> の兄弟要素
`blockquote`	引用文であることを表す。cite属性によって引用元URL を明示できる。<p> を囲むように使う
`hr`	テーマの意味的な区切りを表す。例えば、シーンの移行や話題の区切りなど
`figure`	画像やグラフ、図表、詩などの自己完結型のコンテンツを表す。多くの場合 <figcaption> を内包するかたちで利用される
`figcaption`	<figure> の説明、残りのデータやイラストを表す。<figure> の子要素
`pre`	整形前テキスト ( preformatted text) を表す
`div`	ブロックレベルの汎用コンテナ。主に class属性や id属性を利用したデザイン付のために利用される。<article> や <p> など意味的に適切なタグが他にない場合に限り利用。lang属性を利用して他言語で書かれていることを表すこともできる

@@ 94行目: / 94行目: @@
 |-
 !<code>li</code>
-|リスト項目を表す。<ul>、<lo> いずれかの子要素として配置
+|リスト項目を表す。<nowiki><ul></nowiki>、<nowiki><lo></nowiki> いずれかの子要素として配置
 |-
 !<code>dl</code>
-|定義リストを表す。<dt> と <dd> の組み合わせをリスト化したもの。一般的な使用例として、用語集、キーと値のペアリストなどが挙げられる。<dt> と <dd> が複数ある場合は、デザイン付のためにそれらを <div> で囲んでも良い
+|定義リストを表す。<nowiki><dt></nowiki> と <nowiki><dd></nowiki> の組み合わせをリスト化したもの。一般的な使用例として、用語集、キーと値のペアリストなどが挙げられる。<nowiki><dt></nowiki> と <nowiki><dd></nowiki> が複数ある場合は、デザイン付のためにそれらを <nowiki><div></nowiki> で囲んでも良い
 |-
 !<code>dt</code>
-|用語を表す。<dl> の子要素としてのみ利用できる
+|用語を表す。<nowiki><dl></nowiki> の子要素としてのみ利用できる
 |-
 !<code>dd</code>
-|<dt> の詳細や定義を表す。<dt> の兄弟要素
+|<dt> の詳細や定義を表す。<nowiki><dt></nowiki> の兄弟要素
 |-
 !<code>blockquote</code>
-|引用文であることを表す。cite属性によって引用元URL を明示できる。<p> を囲むように使う
+|引用文であることを表す。cite属性によって引用元URL を明示できる。<nowiki><p></nowiki> を囲むように使う
 |-
 !<code>hr</code>
@@ 112行目: / 112行目: @@
 |-
 !<code>figure</code>
-|画像やグラフ、図表、詩などの自己完結型のコンテンツを表す。多くの場合 <figcaption> を内包するかたちで利用される
+|画像やグラフ、図表、詩などの自己完結型のコンテンツを表す。多くの場合 <nowiki><figcaption></nowiki> を内包するかたちで利用される
 |-
 !<code>figcaption</code>
-|<figure> の説明、残りのデータやイラストを表す。<figure> の子要素
+|<figure> の説明、残りのデータやイラストを表す。<nowiki><figure></nowiki> の子要素
 |-
 !<code>pre</code>
@@ 121行目: / 121行目: @@
 |-
 !<code>div</code>
-|ブロックレベルの汎用コンテナ。主に class属性や id属性を利用したデザイン付のために利用される。<article> や <p> など意味的に適切なタグが他にない場合に限り利用。lang属性を利用して他言語で書かれていることを表すこともできる
+|ブロックレベルの汎用コンテナ。主に class属性や id属性を利用したデザイン付のために利用される。<nowiki><article></nowiki> や <nowiki><p></nowiki> など意味的に適切なタグが他にない場合に限り利用。lang属性を利用して他言語で書かれていることを表すこともできる
 |}