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

 

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. サイトを様々な環境に対応しやすくする。
  2. スタイルなどのルールの再利用性を高める。

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

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

 

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

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




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

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

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

 

(Visited 276 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください