[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

HTMLとは?

HTMLとは、情報構造を定義するためのマークアップ言語である。

適切にマークアップされたHTML文書は、音声ブラウザでも正しく読み上げられ、アクセシビリティも向上に繋がる。

HTMLタグと要素

要素

一部、終了タグが存在しない場合もある。

その場合は、開始タグ〈◯◯〉のみとするか、〈◯◯◯/〉と記述する。

要素とは?

HTML文書内の何らかの役割を持ったひとかたまりのことを指す。

タグとは?

上記の<h1>,</h1> のような記号のことを指す。

属性

 

属性

属性は、要素がどのような特徴を持つのかを示すもの。

lang 属性

html 要素の言語(lang)が日本語であることを示す。

英語サイトの場合は、lang=“en” と記述する。

meta タグと charset 属性

〈meta charset=“utf-8”〉

meta タグは、文書に関する情報を表す。

この場合、文字コードをutf-8 に指定している。

HTMLとCSS

HTMLは、そのサイトの文書構造を表し、ブラウザに文書の構造を認識させる。

CSSは、見た目(デザイン)を担う。

そのサイトが、見た人に、どのようなイメージを与えるかは、デザイン(CSS)が担うが、そのサイトを検索エンジンのクローラーが認識するのは、HTMLである。

したがって、SEO的に有利なサイトを構築するには、HTMLをしっかり把握し、なるたけ正しい記述をする必要がある。

ページタイトルやdescription に記述する概要は、検索エンジン対策に非常に重要である。

また、適切にマークアップされたHTML文書は、アクセシビリティの向上にもつながる。

一方、ユーザビリティの観点、サイトを訪れた人に使いやすいサイトにするには、情報を上手く整理し(情報アーキテクチャ)、その情報のまとまりをユーザーが使いやすい箇所に配置する必要がある。

また、機能の面では、JavaScriptやjQuery が、それを担う。

構造と見た目を分離するメリット

  1. サイトを様々な環境に対応しやすくする。
  2. スタイルなどのルールの再利用性を高める。

1.様々な環境への対応をよくする。

Webサイトは、PC、スマホ、タブレットなど様々な環境で閲覧されている。

 

情報構造とデザインの分離が行われていれば、1つのHTMLファイルに対して、環境に応じた、それぞれのCSSを準備することで対応させることができる。

2.再利用性を高め、作業を効率化させる。

似たようなフォーマットのページを大量に作成する場合にも、HTMLとCSSの分離が役立つ。

デザインのみ反映させたい場合、複数のHTMLファイルに、1つのCSSを適応させるということもできる。

また、デザイン的な修正を行う場合も、1つのCSSファイルを修正するだけで、全てに反映でき、作業の効率化を図れる。

[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す