2022.6.4｜Webデザイナーになる方法
HTMLとは？HTMLの基本構造とHTMLタグの基本
「HTML」は、Webページを作るために欠かせないマークアップ言語です。「HTML」はホームページを制作するためのプログラミング言語となりますが、基本的な役割や仕組みを理解することでホームページの基礎構造が理解できるようになります。
今回は、HTMLとは？HTMLの基本構造とHTMLタグの基本について解説します。
HTMLとは？
「HTML（エイチ・ティー・エム・エル）」とは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の頭文字をとった略称です。Webページを作成するために用いるプログラミング言語、または、マークアップ言語です。
Webサイトで公開しているページのあらゆるテキスト（文章）は「HTML（エイチ・ティー・エム・エル）」です。
Webブラウザは、「HTML」で書かれた文章を読み込むことで、記述した内容に沿ってホームページを表示しています。
「HTML」にはバージョンがあり日々拡張されています。「W3C」（World Wide Web Consortium）によって内容を規定していますが、「HTML」が開発されたのは1993年ですが、以降1999年に「HTML4」が開発され、2014年には「HTML5」がバージョン公開されました。
HTMLの歴史
webサイトを作る上で最も一般的な言語といえます。最近はHTML5も普及しておりますが、今までのHTMLの改訂の歴史についてはあまり知らせていません。HTMLはスイス・ジュネーブにあるCERN(欧州原子核研究機構)で誕生し、1989年に開発されました。
CERNとは、数千人の科学者の出入りが有り、論文などの資料検索など資料の効率的な検索環境が課題となっていました。その課題を解決すべくCERNで世界で初めてサーバーとブラウザが生まれました。
1990年サーバーに情報を蓄積させ、必要な時に情報をブラウザで表示させることで効率的に情報提供ができるようになりました。また、情報間での相互リンクさせることで、横断的な情報共有ができるようにもなりました。
1993年アメリカのイリノイ大学に通うマーク・アンドリーセン(後のNetscape開発者)によってMosaicブラウザが登場が開発され、このブラウザ開発によりその後の多くのブラウザ競争が始まりました。
1994年ティム・バーナーズ・リーが、W3Cという非営利団体を設立。
1996年 CSS1.0を勧告、それまでHTMLは簡単な文字装飾はできましたが、W3CによりHTMLは文章構造を記述するもの、CSSは表現を装飾するものとしての位置づけを勧告。
1997年 HTML4.0が勧告されCSS1.0に続き、HTML4.0の仕様をW3Cが勧告。その後、「HTMLは文書構造を記述するもの、CSSは体裁を整えるためのもの」という切り分けが明確になりました。
WHATWG にり2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3Cが2008年 HTML5草案を発表。HTML5（エイチティーエムエル・ファイブ）は、 HTMLの5回目に当たる大幅な改定版によって生み出されました。
HTML5の歴史
WHATWG にり2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3Cが2008年 HTML5草案を発表。HTML5（エイチティーエムエル・ファイブ）は、 HTMLの5回目に当たる大幅な改定版によって生み出されました。
2016年にHTML 5.1が勧告される予定。 改訂の主要目的のひとつとして人間にも読解可能でコンピューターやディバイス（ウェブブラウザ、構文解析器など）にも矛盾せず読解されるとともに最新のマルチメディアをサポートする言語に向上いたします。
マークアップ言語とは？
「マークアップ言語」とは、文章の構成や、文章の役割を示すという意味の言葉です。「タイトル」「見出し」「段落」「表」「リンク」など、文章が構成されている要素が果たしている役割がわかるように目印をつけます。
適切なマークアップを記述することで見やすいコンテンツを作り、将来的には検索結果上位表示やSEO効果としても評価されるようになります。
HTML基本構造
HTML基本文書は、DOCTYPE宣言から始まり、様々な情報とタグでWebサイトが出来上がります。
HTMLの基本構造は、いくつかの重要な役割をもつ要素を土台にしてHTMLのマークアップを行います。
基本構造コード
<!doctype html>
<html>
<head>
HTMLドキュメント情報
</head>
<body>
HTML文書の内容
</body>
</html>DOCTYPE宣言
DOCTYPE（ドキュメント）宣言とは、WebページのHTMLファイルのバージョンをブラウザに伝えるためのものです。HTMLを記述する時に最初に書くべきなのがDOCTYPE（ドキュメント）宣言です。
DOCTYPE（ドキュメント）宣言は、文章が「XHTML」「HTML4」「HTML5」などで作成されているものであることを宣言するものです。
html要素
html要素とは、その文章が「HTML」の文章であることを表します。
記述する方法はhtmlからhtmlの中に要素が入ります。
html要素コード
<html>～</html>html要素では、言語をしていることができ、「lang=”ja”」のように日本語で書かれた文章であることを表します。
html言語コード
<html lang="ja">【言語の種類】
・ja(日本語)
・zh(中国語)
・ko(韓国語)
・en(英語)
・de(独語)
・fr(仏語)
head要素
head要素とは、文書のヘッダ部分の指定に使う要素です。文章の「meta（メタ）タグ」「title（タイトル）タグ」「cssファイル」「scriptファイル」などを宣言します。head要素内で文字コードやファイルへのルートを記述します。
基本要素
| 要素 | 概要 |
|---|---|
| metaタグ | Webページの情報を伝える設定 |
| linkタグ | ファイルと外部のリソースを関連付ける設定 |
| titleタグ | ページタイトルを記述 |
| cssファイル | CSSファイルを読み込むための設定 |
| scriptファイル | scriptファイルを読み込むための設定 |
文字コードを宣言
文字コード宣言は「metaタグ」を記述して文字コードを設定します。
主に利用される文字コードは「Shift_JIS」「UTF-8」「EUC-JP」があります。
言語文字コード
<meta charset="UTF-8">レスポンシブ対応
レスポンシブ対応は「metaタグ」を記述して設定します。
PC、タブレット、スマートフォンなどのデバイスに合わせて「viewport」を設定します。
レスポンシブ対応コード
<meta name="viewport" content="width=device-width, initial-scale=1">タイトルの設定
Webページのタイトルは「titleタグ」を記述して設定します。
タイトルは、Googleなどの検索エンジンの結果に表示される見出しとなります。
タイトルコード
<title>タイトル</title>メタディスクリプションの設定
Webページのメタディスクリプションは「metaタグ」を記述して設定します。
メタディスクリプションは、Webページの説明文を設定します。Googleなどの検索エンジンの結果に表示される説明文となります。
メタディスクリプションコード
<meta name="description" content="説明文">キーワードの設定
Webページのキーワードは「metaタグ」を記述して設定します。
キーワードは、Webページに関連したキーワードを複数設定します。
キーワード設定コード
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">正規URLを指定
Webページの正規URLは「linkタグ」を記述して設定します。
内容が重複しているページがある場合にどれが正規ページのURLか検索エンジンに伝えます。
正規URL指定コード
<link rel="canonical" href="正規ページのURL">ファビコンの設定
Webページのファビコンは「linkタグ」を記述して設定します。
ファビコンはブラウザのタブに表示するアイコンです。
ファビコン設定コード
<link rel="icon" href="img/favicon.ico">CSSファイルの読み込み設定
WebページCSSファイルを読み込む場合は「linkタグ」を記述して設定します。
また、「linkタグ」は外部のファイルを読み込むことも可能です。
CSSファイルの読み込み設定コード
<link rel="stylesheet" href="style.css">scriptファイルの読み込み設定
Webページscriptファイルを読み込む場合は「scriptタグ」を記述して設定します。
また、「scriptタグ」は外部のファイルを読み込むことも可能です。
scriptファイルの読み込み設定コード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>head要素のまとめ
Webページscriptファイルを読み込む場合は「scriptタグ」を記述して設定します。
また、「scriptタグ」は外部のファイルを読み込むことも可能です。
要素をまとめたコード
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>タイトル</title>
<meta name="description" content="説明文">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
<link rel="canonical" href="正規ページのURL">
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>body要素
body要素とは、文書の内容を表します。主にコンテンツ要素を記述します。
bodyタグ内に記述した見出しや文章、画像などは、ブラウザでWebサイトにアクセスした時に表示されます。bodyタグ内で使用するhtmlタグは「header（ヘッダー）タグ」「footer（フッター）タグ」「divタグ」「pタグ」など、沢山の種類があります。
基本タグ
| タグ | 概要 |
|---|---|
| header | Webページのヘッダーを囲うタグです。 |
| contents | Webページのコンテンツを囲うタグです。 |
| sidebar | Webページのサイドバーを囲うタグです。 |
| footer | Webページのフッターを囲うタグです。 |
| h1,h2,h3,h4,h5,h6 | 見出しを表すタグです。 |
| div | ブロック要素をつくるタグです。 |
| p | 文章の段落を表わすためのタグです。 |
| br | 文章の途中で改行したいときに使用するタグです。 |
| a | リンクを貼るタグです。 |
| img | 画像を表すタグです。 |
| ul,li | リストの項目を箇条書きで表記するために使用するタグです。 |
| dl,dt,dd | 定義リストを表記するために使用するタグです。 |
| table,tr,th,td | 表を作成する際に使用するタグです。 |
まとめ
これからWebデザイナーを目指す人は必ずHTMLの基礎を学びましょう。HTMLの基本となるタグは沢山ありますが少しづつタグの意味や使い方を学ぶことで、Webデザイナーとしての技術力をアップしていく事ができます。
まずは、基本的に意味と基礎的な要素を学んでいきましょう。
