2022年11月15日

HTMLとは – 初心者向

自己紹介文に、
「HTMLを使用したコーディングが得意です。適切なタグを使用して高品質なマークアップを行います。」
と書こうとして、手が止まりました。
「最近、自主的にHTMLの勉強してないな…」
と。
「今こそ、復習&アップデートだ！！」と気合いを入れ、
まずは、基礎から復習していきたいと思います。

ブラウザに「あ」と表示させてみる

パソコンで「画像」や「PDF」データを、
「Chrome」「Edge」「Safari」などのウェブブラウザで開く、または開いたページの上にドラッグ&ドロップしてみてください。
「画像」や「PDF」の内容がブラウザ上に表示されるかと思います。
（※環境により表示されない場合があります）
しかし、「エクセル」や「CSV」データを同じようにドラッグ&ドロップしてもデータの中身が表示されることはありません。
（※環境により表示される場合があります）

では、ブラウザ上に1文字「あ」と表示させるためにはどうすればいいのか。

それは、難しく考えず
① 「あ」と入力したデータを作成
② 「あ」のデータをブラウザで開く
です。
ただ、「画像」や「PDF」のようにブラウザでも表示できる形式で作成する必要があります。
その形式のひとつが 「HTML（エイチティーエムエル）」 です。

作成には「テキストエディタ」を使用する

「HTML」データを作成するためには 「テキストエディタ」 を使用します。
「テキストエディタ」とは、プログラミングのソースコードや文章など、テキスト編集に特化したアプリケーションソフトの総称です。
有名な「テキストエディタ」としては、Windowsの「メモ帳」や、Macの「テキストエディット」などPCに標準搭載されているソフトの他、高機能でありながらネットで無料ダウンロードできる「Visual Studio Code」などがあります。

拡張子「.html」を使用する

テキストエディタは「HTML」以外にもさまざまな形式のデータ作成に使用します。
そのため、作成したデータが「HTML」であることを指定するために拡張子「.html」を使用します。
拡張子とは「.（ドット）」+「形式別のアルファベット」で構成された文字列のことです。
ファイル名の最後に付けることで、データの形式を指定できます。
有名なものでは、スマホやデジカメで撮影した写真データの「.jpg」も拡張子のひとつです。

まずは「あ」を表示させてみる

では、
テキストエディタで「あ」と入力したテキストデータを作成し、
ファイル名を仮に「index.html」にして保存してください。

その「index.html」をブラウザで開くと … 「あ」 と表示されました！！

HTMLの「タグ」とは

先ほどの「あ」のデータは、拡張子を「.html」にしただけの文字情報ファイルです。
では、先ほどの「あ」の部分を

    
        <a href="#">あ</a>

と書き換えた後、
「#」の部分を好きなウェブページのURLに変更して、改めて保存してください。

そのデータを再度ブラウザで開くと…

「あ」が「リンクボタン」になっていると思います。

この追加した内容は、「HTMLタグ」と呼ばれるものです。
「a」は「HTMLタグ」のひとつで、囲んだ要素にリンク機能を設定する役割があります。

「HTMLタグ」は画像を表示させる「img」など、100以上の種類があり、
これらの「HTMLタグ」を使用することでウェブページに「リンク」や「画像」「フォーム」などを設置できます。
ただし、「HTMLタグ」で囲ったテキストを入れただけでは、正しい「HTML」のソースコードとは呼べません。

次に「HTML」のソースコードを記述する際の基本的なルールを紹介したいと思います。

HTMLに最低限必要な要素

「HTML」のソースコードには、「ドキュメントタイプ宣言」「headタグ」「bodyタグ」の記述が最低限必要です。

ドキュメントタイプ宣言

    
        <!DOCTYPE html>

ドキュメントタイプは、ソースコードの一番上に記述して、 「これは、HTMLです。」と宣言するタグ です。
「!DOCTYPE」タグは、主に「HTML」と「XHTML」でしか使用する機会はありませんが、使用する「HTMLのバージョン」により「!DOCTYPE」の後に付く表記内容が変わります。
ただし、その表記方法も「HTML 5.0」以降はシンプルに <!DOCTYPE html> のみで大丈夫になりました。

headタグ

    
        <head></head>

「head」タグの中には、ページの 「title（タイトル）」「description（概要文）」「meta情報」 など、ページに関する情報を記述します。
「head」タグ内で見かけることの多い「CSS」や「JavaScript」の読み込みは、必ずしも「head」タグ内に記述する必要はありません。

bodyタグ

    
        <body></body>

「body」タグの中には、実際にウェブブラウザに表示されるウェブページのコンテンツ内容を記述していきます。
「HTMLタグ」の大半が、「body」タグ内で使用するためのものです。

HTMLタグの基本的な記述ルール

HTMLタグの基本的な記述ルールは主に2つあります。

「開始タグ」と「終了タグ」で囲こむ
「開始タグ」の中に「属性」を指定する

先述した「a」タグの 開始タグは「<a href=”#”>」部分、終了タグが「</a>」部分 です。
「開始タグ」も「終了タグ」も「<>（やまかっこ）」で囲み、「終了タグ」は「開始タグ」の前に「/（スラッシュ）」が付いたものです。
また、HTMLの中には、「img」など「終了タグ」が必要のないものもあります。

属性とは「a」の「開始タグ」に入っていた「href」のように、htmlタグに設定を付与する役割があります。
「a」タグであれば移動するリンク先、「img」タグであれば表示する画像のパス（場所）などが属性値です。
属性は、特定のタグにか使用できないものと、どのタグにも設定できるものがあります。

HTMLの「マークアップ」とは

HTMLは、プログラミング言語ではなく 「マークアップ言語」 と呼ばれています。
マークアップ言語とは、ウェブページの構成要素に役割を設定する言語です。
テキスト要素で言うと、囲む「HTMLタグ」により「見出し」「本文」「リンク」などの役割が設定されます。
また、複数の要素を特定の「HTMLタグ」で囲むことで、「ヘッダー」や「フッター」など、ページ内での役割を設定することもあります。

人は、サイズや行間、装飾で、テキストが「見出し」か「本文」か「リンク」かを判別しています。
コンピューターの場合、正確な判別ができていない可能性があるため、「HTMLタグ」で明示的に役割を与えることで、正しく要素を識別できるようです。

HTMLの親子関係

HTMLタグで囲った要素の中には、別のHTMLタグを入れることが可能です。
囲った要素を 「親要素」、囲われた要素を 「子要素」 と呼びます。
さらに、「子要素」の中にある要素は、「親要素」から見た 「孫要素」 と呼ばれています。

デザインは「CSS」で指定する

「HTML」とセットで登場することの多い 「CSS（Cascading Style Sheets）」 は、サイズや色、レイアウトなど、要素のデザインを行う言語です。
役割を設定したマークアップ要素は、サイズや色を設定しないと人の目で見た時に役割が分かりづらいため、CSSを使用して「見出し感」「リンク感」のある要素にデザインします。

適切な「タグ」を使用した「マークアップ」とは

HTMLの中には、囲うだけでは見た目上、変化のないタグが多数あります。
例えば、ホームページの上部と下部にある「header」や「footer」も、それぞれに「<header></header>」と「<footer></footer>」というタグが用意されています。

この「header」と「footer」を仮に「div」タグでマークアップしても、表示される画面に見た目上の変化はありません。
ただし、ページ内の役割に合った「HTMLタグ」の使用はSEOにも良い影響があるとされているので、正しいタグの使用が推奨されています。

特に階層化されたコンテンツの作成に使用する見出しタグ「h1〜h6」の適切な使用は、SEOの効果を最大化するために正しく使用したいタグのひとつです。

初心者の頃は「ソースコード」を見ることをオススメします

「HTML」を始めて間もない頃は、正しいソースコードが記述できているか不安なことも多いと思います。
そんな時にオススメな勉強法は、とにかく上手いと感じたウェブサイトのソースコードを見るです。
主要なウェブブラウザには、ソースコードを表示させる機能が付いています。
この機能を活用して、とにかくタグの書き方やコメントの入れ方を見る習慣をつけることで、より良い記述方法を見つけやすくなります。

「HTML」のバージョン

「HTML」は、1990年代に登場した技術ですが、定期的に機能拡張や仕様の変更などのアップデートが行われています。
また、「HTML 3.0」「HTML 4.0」「HTML 5.0」など、大規模なアップデートの際にはバージョン名が付けられています。
2022年の最新バージョンは 「HTML Living Standard」 と呼ばれています。
ただし、アップデートされた最新の機能も、表示するウェブブラウザ側が対応していない場合があるため、最新版が出ても、すぐに切り替えることはあまりありません。

覚えておきたい「HTMLタグ」

覚えておきたいHTMLのタグ

header: 囲んだ要素がページ内の「ヘッダー」であることを指定します。
footer: 囲んだ要素がページ内の「フッター」であることを指定します。
nav: 囲んだ要素がページ内の「ナビゲーション」であることを指定します。
main: 囲んだ要素がページ内の「メインコンテンツ」であることを指定します。
section: 同じ文脈の中にあるコンテンツをグループ化する際に使用します。
div: 複数の要素をグループ化する際に使用します。
h1 〜 h6: 見出しに使用します。h1のタイトルがページ内で最上位になり、次いでh2,h3…とコンテンツを階層化する際に使用します。
p: 要素を「段落」にします。主にテキストに対して使用します。
a: 囲った要素を「リンク」にします。リンクは、押すことでページの変移を目的とした要素です。
button: 囲った要素を「ボタン」にします。ボタンは、押すことで送信や要素の変化を目的とした要素です。
img: 画像を読み込むタグです。画像が読み込めない場合に表示される代替テキスト「alt」属性の設定が推奨されています。
span: 決まった役割のないタグです。矢印など、パーツを装飾する際に使用する機会の多い要素です。
iframe: 外部ページを読み込むことができるタグです。ウェブページに「Googleマップ」や「SNS」を埋め込む際に「iframe」を利用します。
table: テーブル（表）を作成するタグです。テーブルの見出し「th」、テーブルの内容「td」など、テーブル用のタグが複数あります。
ul / ol / li: リストを作成するタグです。「ul」または「ol」を親要素にして、リストの各項目を「li」タグでマークアップします。
form: フォームを作成するタグです。メールや検索フォーム、ログインページで使用されています。サーバーとやり取りを行う「POST」と、URLに情報を付与する「GET」、2つの通信形式が選択できます。

コメントタグ「<!– ◯◯◯ –>」

コーディングをしていると、備忘録の役割や引継ぎ作業が行いやすいように「コメント」を残すことがあります。
HTMLは「<!–」と「–>」で囲った文章がコメントとして扱われます。

まとめ

はじめて「HTML」に触れたのは、学校の授業だったと思います。
「ホームページの作成には、HTMLを使用します。」と言われたか言われていないか覚えていませんが、
今では当たり前に「HTML」を使用してホームページを作成しているので経験に勝る知識はないなと思っています。
ただ、ホームページ制作の基礎技術でもあるため他の技術と比べ、最近、学習していなかったなと今回、反省しました。
そろそろ、最近話題の「リカレント」して自分のHTML力をアップデートしたいと思いました。
やっぱり基礎は大切です！がんばります。