見出し画像

HTMLはWEBページ作成の中心言語。見出しやテキスト・画像などのコンテンツと文章の構造やコンテンツの意味合いを記述する

WEBページの作成にはHTML、CSS、JavaScriptの3つの言語が使われています。HTMLはページ作成の中心となる言語で3つの役割があります。テキスト、画像などのコンテンツの記述。ヘッダーやフッター、メインコンテンツなど構造の設定。そしてコンテンツに見出し、段落、リストなどの意味を付与します。これら3つの役割はSEOに影響を与える大事な要素です。



HTML、CSS、JavaScript WEBページを作成する3つの言語

WEBページはHTML、CSS、JavaScriptの3つの言語を使用して作成します。
HTMLは見出しやテキスト・画像などのコンテンツを記述するとともに、WEBページの構造やコンテンツの意味合いも設定する、WEBページ作成の中心となる言語です。SEO(検索時上位表示対策)に大きく影響を与える機能が含まれているため、WEBリーダーはある程度の理解が必要です。

CSSはページのレイアウトやデザインを担当する言語です。
サイト全体のイメージや、色彩計画、読みやすいフォントの選定などが役割となります。

JavaScriptはWEBページに動きを与える言語です。
HTML・CSSで作成されたWEBページは基本的に動きのない静的な文書ファイルです。これに動きをつける言語がJavaScriptです。トップページでよく見られる画像のスライドショーやフォーム入力のチェックなど、動的な処理や反応を担当します。ユーザーの閲覧体験をよりダイナミックにすることができます。

文章に構造と意味を与えるHTML

HTML(エイチティーエムエル)は、正式名称「HyperText Markup Language」の略称です。HyperTextはリンクで他の文書とつながる文書のことで、Markupとは「マーク付け」を指し、コンテンツにマークを付けて意味や構造を定義させます。
ブラウザで表示されたサンプル画像を次に示します。

図① ブラウザでの表示例

「図① ブラウザでの表示例」のようにWEBページをブラウザで閲覧する場合は見出しやテキスト、画像が人間が見て分かりやすく表示されています。実際のファイルは次の「図② ソースコード」のようなHTML言語で作成されています。

図② ソースコード

ブラウザ表示とは全く異なる形式ですが、全てのWEBページはこのようなソースコードで書かれています。ブラウザはこうしたソースコードを人間が見やすいよう変換して表示しています。また、ブラウザは元のソースコードを見る機能もあります。Chromeでは画面上の右クリックメニューで「このページのソースを表示」を選択するとソースコードが表示されます。

HTMLの基本的な書き方はタグでコンテンツを囲むマークアップ方式

HTMLの書き方は開始タグ<***>と終了タグ</***>でコンテンツを囲んで、意味を付けていきます。
<h1></h1> heading1 大見出し
<p></p> paragraph 段落
<a></a> anchor リンク(錨が参照先と繫がっている意)

これ以外にも文書の構造を定義する次のようなタグもあります。
<html></html> HTMLの始まりと終了 
<head></head> ブラウザには表示されないメタデータ
<body></body> ブラウザに表示されるコンテンツ

このタグは総数108個ほどあり、除夜の鐘と同じ煩悩の数と同じだと指摘されていました。現在、正式なダクは日々入れ替えが進んでおり110前後と言われています。

一つ一つのタグの意味を先程のソースコードに書き入れた図が次の「図③ ソースコード」です。このようにコンテンツに構造や意味が記述されています。

図③ ソースコードの説明

日々アップデートされ続けているHTML

1990年にティム・バーナーズ=リーが所属するCERN(セルン:欧州原子核研究機構)内の情報共有を目的として初期のHTMLを開発しました。
その後はインターネットの標準化団体のIETFやWEB技術の標準化団体W3C(ダブリュースリーシー)がHTML 1.0からHTML5までの大型アップデートを数年ごとに実施してきました。

2019年以降は研究者中心のW3CからApple、Mozilla、OperaなどWEB事業企業が中心となるWHATWG(ワットウィージー)に仕様策定が移管され、HTML5後は「HTML Living Standard」という名称で現在も順次仕様変更が進められています。

WHATWGは数年ごとに大きな仕様変更を行うのではなく、進展する技術や環境に合わせて、順次アップデートを行う方式に切り替えています。

こうしたアップデートは時に大きな変化をもたらす場合があります。
HTML5によってYou Tube動画や音声が埋め込みやすくなったことやAPI(Application Programming Interface)機能の追加で、アプリがWEB上で表示しやすくなったことがあげられます。

WEBリーダーとしては、細かい仕様のアップデートに気を配る必要はありませんが、HTMLの仕様が順次高度化されることで、新しい機能やコンテンツが導入したすくなることは押さえておくべきと思います。

この記事が気に入ったらサポートをしてみませんか?