1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

プログラミング入門講座①「HTMLとは〜概要と基本構造〜」

資料を持って走る女性
Pocket

本日から、当サイトのエンジニアによるHTML/CSS入門講座をお届けします。初心者の方は是非この入門講座を通して、Webの基礎への理解を深めてください。

WEBサイトはどうやって成り立っている?

WEBサイトは主に3つの要素から成り立っています。

  • コンテンツ(サイトの内容)を書いた文章・・・HTML
  • 見た目を決める指示書・・・CSS
  • 動きを制御するプログラム・・・JavaScript、PHP、CGI等

このうち、最低限HTMLさえあれば、WEBサイトは成立します。今回はHTMLについてのみ概要を紹介します。

HTMLってなに?

  • HTML・・・HyperText Markup Language(ハイパーテキストマークアップランゲージ)
  • ハイパーテキスト・・・文章を超える文章

なぜ「文章を超える」という表現になっているかと言うと、ハイパーリンクという、文章から外に出て別の文章を参照する仕組みがあるからです。

  • マークアップランゲージ・・・文章内の単語に意味付けをする言語

教科書にマーカー引いてト書きするようなものです。タグという記号を使ってト書きを表現します。

歴史からみると

元々は、SGMLという米軍の軍事文書を整理して保存するための書式でした。それをもとにWEBに適した形に拡張した物がHTMLです。

つまりHTMLとは

意味づけされ、引用元の別の論文ともつながった論文をWEBで表示するための書式で、HTMLでかかれた文章は論文と言って差支えないです。よって、HTMLにとって以下が重要な要素になります。

  • 文章の意味付け(マークアップ)が適切にされていること
  • 適切に段落階層分けされていること
  • 他の論文から数多く引用を受けていること(他のHTMLから多く被リンクを受けていること)

HTMLの大枠

HTMLは大きく見て2つのカタマリと1つの宣言から成り立っています。

  • ドキュメントタイプ宣言
  • HTMLヘッダ
  • ボディ

まず、簡単なHTMLサンプルコードを提示します。こちらをご覧ください。

ドキュメントタイプ宣言

HTMLの中身は実質ただのテキストです。ゆえにこのテキストがどんな書式で書いてあるのかを示す必要があります。サンプルコードの下記部分がドキュメントタイプ宣言(HTML 4.01)です。

最近は主に下記のいずれかを使う場合が多いです。

  • HTML4.01
  • XHTML 1.0 Transitional
  • HTML5

XHTMLとは

HTMLとは別にXMLという汎用的なマークアップ言語があります。HTMLをXMLの書き方に合わせて再定義した物がXHTMLです。1.0は形式のバージョン、TransitionalはXMLに対してどの程度厳密かを表す言葉です。XHTMLの場合は文頭にXML形式で書かれていることを示すxml宣言を記述することが推奨されています。
<記述例>

HTML5とは

HTMLは何度もタグの定義の更新がされており、現行主流は4.0です。更に一歩先最新の定義がHTML5(およびHTML5.1)です。HTMLではHTML4(XHTML1.0を含む)よりもさらに細かく文章に意味づけをできるようになりました。また、動画の再生や図形の描画など最新のWEB環境により適応しています。

構造化マークアップ

さらに、いままでのHTMLを越えて検索エンジンに内容を正しく伝える手法として、構造化マークアップと呼ばれる方法が近年登場しました。Google、Yahoo、Microsoftなどの検索エンジンを持つ会社が協力して、記述方法をまとめ、schema.orgというサイトにて公開しています。この形式に沿ったマークアップをHTML内に埋め込むことで、サイトのコンテンツ価値をより正確に評価してもらうことができるようになります。

HTMLのマークアップ方法

HTMLでは文章を下のような形で部分ごとにマークアップします。
<記述例>

上記の例にもある<~>を開始タグ、を終了タグ(または締めタグ)と呼び、開始タグ終了タグで文章を挟み込んで部分ごとに意味づけします。はさまれた文章のことを「要素」と呼びます。また、タグの中に書かれた「○○○=”×××”」という形の表記を「属性」と呼び、タグだけでは表せない情報を付加する場合に使います。

HTML本体

サンプルコードの<html xmlns=”http://www.w3.org/1999/xhtml”>から</html>に囲われた部分がHTMLの文章本体です。つまりHTMLは文章全体をHTMLタグで意味づけした状態です。

※xmlns=”http://www.w3.org/1999/xhtml”はxhtml独自の属性でネームスペースと呼ばれ、HTML内でどんなタグを使うことができるか指定するために利用されます。

HTMLの中はHTMLヘッダ、ボディの2つに分かれています。

ヘッダ

<head></head>タグでくくられた部分です。ヘッダ情報は一部除きページを見るユーザーには見えず、かわりにサーバーやブラウザ、検索エンジンが中身を読みます。中には主にタイトル、抜粋、使用スクリプトなどこのHTML全体に関する補足情報が書き込まれます。特に<meta>タグから始まる記述をメタタグと呼び検索エンジン等に文書を理解させるために利用します。

ボディ

<body></body>タグでくくられた部分。HTMLの本文、ユーザーに見せたい部分はこの中に記述されます。ボディ内で使用されるタグについては次でご説明します。

サンプルコード

次回は、HTMLの主要なタグについて説明します。➡︎プログラミング入門講座②「HTMLの覚えておきたいタグ一覧」

【オススメ記事】
➡︎ 初心者におすすめ!HTMLを勉強できるスクール17選
➡︎ 無料で使える!HTMLの学習サイトBEST7
➡︎ HTMLの本・参考書の評判
➡︎【HTML上達事例②】HTMLをスクールに通わず独学で習得した話
➡︎【HTML上達事例⑧】フリーランスとして働く男性がHTML習得に使った書籍は?

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾
ページ上部へ戻る