HTML（エイチティーエムエル）とは、ホームページをつくるために開発された言語です。
1993年にはじめてのバージョンが公開されて、定期的にバージョンが新しくなっている、世界共通の規格です。
Hyper Text Markup Launguage（ハイパー・テキスト・マークアップ・ランゲッジ）のスペルの頭文字をとって、HTMLと呼ばれています。
2023年現在でも、ホームページをつくる時には、HTMLは必要不可欠であり、代替がきかない言語です。
エンジニアフォーラムによる2022年による、最も使用されている言語ランキングでも、2位となっており、まだまだ実用性が高いマークアップ言語です。
学習難易度も高くないので、これからホームページ制作をしてみたい、初学者の方にとっては、最初のステップとしておすすめです。
HTMLの役割
HTMLの役割は、ホームページの骨格をつくることです。
ホームページ制作の現場では、用意された文章をベースにして、HTMLのルールに従って、文章にタグ付けしていきます。
タグ付けをしていないプレーンテキスト（原稿）のままだと、コンピュータにとっては、どの文章がタイトルで、どの文章が本文かということが全く理解できません。
そこで、タグを使って、文章をはさみこんでいくことで、段落や文章の意味、どの部分が重要かをコンピュータに正しく伝えることができるようになります。
HTML、最初の一歩はメモ帳から
HTMLファイルを試してみるには、メモ帳がおすすめです。
Windowsであれば、左下のWindowsマークをタップした後、表示された検索窓にメモ帳と入力して起動ができます。
Macであれば、メモ帳を起動するとiPhone・iCloudと連携した普通のメモ帳アプリになってしまうので、アプリのメモ帳ではなく「テキストエディタ」というアプリを利用しましょう。
標準のメモ帳であれば、新しいエディタをインストールする必要はないので、手軽に始められます。
記述に失敗してもなにも問題ないですし、好きなように試して、すぐに削除することができるので、気兼ねなくHTMLコード記述の練習ができます。
練習1、メモ帳の1行目に<!Doctype html>と記述してみよう
メモ帳を起動したら、まずは最初の1行目に<!Doctype html>と記載してみましょう。
<!Doctype html>
もし、記載するのが面倒な場合は、上記コードをコピーして、ペーストして頂いても問題ありません。
これは、コンピューターに対して、「このファイル（ドキュメント）はHTMLで書かれています」ということを伝える文言です。
この宣言がないと、HTMLファイルにはなりませんので、必ず記述するようにしましょう。
練習2、<html></html>と記述しよう
ドキュメントタイプの宣言が終わったら、次の行に<html></html>と記述してみましょう。
<html></html>
最初の<html>のことを開始タグ、最後の</html>の事を終了タグと言います。
開始タグと終了タグの間には、画像や文章などの、ホームページの内容が入っていきます。
こちらも、記載が面倒な場合は、下記のコードをコピーペーストして頂いても構いません。
この、開始タグと終了タグの間に、様々なデータを入力していくことで、ホームページが作られていきます。
練習3、<bead></head>と記述しよう
次に、先ほどの<html></html>タグの間に、<head></head>タグを書いていきます。
<head></head>
<head>タグの中には、コンピューターに文字情報をなどを、伝える情報が入ります。
例えば、使用する文字言語の情報、検索エンジンへの伝達情報、使用するファイルの記載など、ユーザーが見える部分ではありません。
練習4、<meta charset>で文字コードを指定して、文字化けを防ごう
実際に、headタグの中に文字化けを防ぐための、文字コードを記載していきます。
<meta charset="utf-8">
これで、文字コードが正しく指定されて、文字化けの心配がなくなりました。
以前の文字コードはShift-Jisなどもありましたが、現在は、utf-8が主流です。
次に、文章を書いたり、写真を掲載していく、実際にユーザーが閲覧する部分を記述していきましょう。
練習5、<body></body>と記述しよう
ユーザーが閲覧する部分は<body></body>で記載していきます。
このbody内に、文章・画像情報などを入力していくことで、ホームページの制作を進めていきます。
すでにお気づきだと思いますが、headは頭、bodyは身体という、意味から派生しています。また、ホームページの下部の事は、足を示すfooterと言います。
ホームページプログラム全体を、ひとつの身体に見立てていくと、理解が早まるかもしれませんので、雑学程度に覚えておくとよいかもしれません。
HTMLファイルとして保存しよう
HTMLとして書いたメモ帳ファイルは、「名前を付けて保存」＞ファイル名の末尾に「.html」とつけて保存することで、HTMLファイルとして認識されます。
ここまで骨格を作ったら、index.htmlとしてデスクトップに保存しておきましょう。
HTMLに大見出しを記述しよう
いよいよ、目に見えるコンテンツをつくっていきます。ホームページの見出しと文章を書いていきます。
まず一番最初に書いていきたいのが<h1>タグです。
<h1>タグは見出しを示す単語である、ヘッドライン（ヘディング）の頭文字です。
Hタグは、<h1>タグは、ドキュメントの中でもっとも重要で強調したい部分を<h1>タグで囲う事になります。
SEOでヒットさせたいキーワードをH1タグに入力することで、検索ヒット効率を高めることも可能です。
タグの使い方は以下の通りです。
- H1・・・大見出し
- H2・・・中見出し
- H3・・・小見出し
ちなみに、H6タグまで使うことができますが、現場で実際に使用されるのはH3タグまでと言うケースが多いです。
しかし、環境によっては、H6タグまでしっかり使うというケースもあるかと思いますので、念のため覚えておきましょう。
ｐタグで文章を記述しよう
次に、pタグを使って、本文を記述していきます。
<p>とはParagraphパラグラフという段落を示す単語の先頭文字です。
上記のコードが書き終わったら、もう一度ファイルを保存しましょう。
画面上部メニューの「ファイル」＞「保存」をクリックすると、保存ができます。
index.htmlのアイコンをブラウザで開いてみよう
保存したら、デスクトップ上にあるファイルを、インターネットブラウザに重ねてみましょう。
以下のような表記になれば、HTMLファイルの記述に成功しています。
れで、ホームページ制作の第一歩は成功しました。
まとめ
- HTMLファイルは、Hyper Text Markup Launguageの略称、ホームページをつくるために生まれた言語です。
- 開始タグ/終了タグではさんで、骨格をつくっていく特徴があり、メモ帳でも簡単につくることができます。
- ファイルを保存する際の末尾は.htmlとして保存しましょう。
次は、画像をつけたり、リンクを付ける方法についてご紹介していきたいと思います。