HTMLとは?
HTMLとは、情報構造を定義するためのマークアップ言語である。
マークアップ(印を付ける。)ことによって、コンピューターに、「ここから、ここまでは、○○だよ。」と伝えることにより、サイトの構造をコンピューターに伝えることが、HTMLの役割である。
適切にマークアップされたHTML文書は、音声ブラウザでも正しく読み上げられ、アクセシビリティも向上に繋がる。
HTMLタグと要素
一部、終了タグが存在しない場合もある。
その場合は、開始タグ〈◯◯〉のみとするか、〈◯◯◯/〉と記述する。
要素とは?
HTML文書内の何らかの役割を持ったひとかたまりのことを指す。
タグとは?
上記の<h1>,</h1> のような記号のことを指す。
タグは、大文字、小文字を区別しない。
属性
属性は、要素がどのような特徴を持つのかを示すもの。
lang 属性
html 要素の言語(lang)が日本語であることを示す。
英語サイトの場合は、lang=“en” と記述する。
meta タグと charset 属性
〈meta charset=“utf-8”〉
meta タグは、文書に関する情報を表す。
この場合、文字コードをutf-8 に指定している。
空要素(からようそ)
終了タグが存在しない特殊な要素。
- br 要素 <br>
- hr 要素 <hr>
- img 要素 <img>
hr 要素
装飾の目的で「線を引くための要素」ではなく、「話題の区切り」を示すための要素である。
HTMLとCSS
HTMLは、そのサイトの文書構造を表し、ブラウザに文書の構造を認識させる。
CSSは、見た目(デザイン)を担う。
そのサイトが、見た人に、どのようなイメージを与えるかは、デザイン(CSS)が担うが、そのサイトを検索エンジンのクローラーが認識するのは、HTMLである。
したがって、SEO的に有利なサイトを構築するには、HTMLをしっかり把握し、なるたけ正しい記述をする必要がある。
ページタイトルやdescription に記述する概要は、検索エンジン対策に非常に重要である。
また、適切にマークアップされたHTML文書は、アクセシビリティの向上にもつながる。
一方、ユーザビリティの観点、サイトを訪れた人に使いやすいサイトにするには、情報を上手く整理し(情報アーキテクチャ)、その情報のまとまりをユーザーが使いやすい箇所に配置する必要がある。
また、機能の面では、JavaScriptやjQuery が、それを担う。
構造と見た目を分離するメリット
- サイトを様々な環境に対応しやすくする。
- スタイルなどのルールの再利用性を高める。
1.様々な環境への対応をよくする。
Webサイトは、PC、スマホ、タブレットなど様々な環境で閲覧されている。
情報構造とデザインの分離が行われていれば、1つのHTMLファイルに対して、環境に応じた、それぞれのCSSを準備することで対応させることができる。
2.再利用性を高め、作業を効率化させる。
似たようなフォーマットのページを大量に作成する場合にも、HTMLとCSSの分離が役立つ。
デザインのみ反映させたい場合、複数のHTMLファイルに、1つのCSSを適応させるということもできる。
また、デザイン的な修正を行う場合も、1つのCSSファイルを修正するだけで、全てに反映でき、作業の効率化を図れる。