連載第2回目の今回はWebサイトの屋台骨ともいえる「HTML」について語ります。HTMLファイルの中身はどうなっているのか?HTMLタグとは何か?どう使うのか?HTMLに関する用語など、基本的な内容が中心です。まとめHTMLファイルとは?まずHTMLファイルについてのおさらいです。このHTMLファイルの目的は2つあります。ページを読んだ人に「文章」を伝えるWebブラウザに「ページの構造」を伝える簡単に言うと、Webページの骨組み(骨格)みたいなものだと考えればOKです。vol.1ということで、Webページを作る上では欠かせないのがHTMLファイルでしたね。HTMLファイルの中身はどうなっているか?ざっくり言うと「HTMLタグで囲まれた文章」が集まっています。アルパカこの「HTMLタグ」がHTMLを理解する上で最も大切です!HTMLタグとは何か?HTMLタグとはそもそも何?そもそも「タグ(tag)」とは「ものを分別する時の札」のことです。旅行の際に、スーツケースに「ネームタグ」をつけて、自分の物を見失わないようにしますよね。そんな感じで「これは○○だよ!」と人に伝えるために使います。一方で「HTMLタグ」とは「テキストを分類するための書き方」のこと。「これは○○という役割の文章だよ!」とコンピュータ(ブラウザ)に伝えるために使います。HTMLタグ「h1」を使う→「これは見出しのテキストだよ!」という意味HTMLタグ「b」を使う→「これは太字のテキストだよ!」という意味HTMLタグ「u」を使う→「これは下線付きのテキストだよ!」という意味だとコンピュータに伝えることができます。※厳密には文章以外にも使えますが、一旦考えないようにしましょうHTMLタグの使い方は?HTMLタグを使うときは、文章を開始タグと終了タグで囲みます。</p>開始タグ、終了タグについては以下の通り。/(スラッシュ)を付ける非常にシンプルなルールで書けることがわかりますね。HTMLタグって何個あるの?HTMLタグは何個あるのでしょうか?結論から言うと、だいたい「100個くらい」です。それぞれ様々な意味を持っていて、用途ごとに使い分ける必要があります。このHTMLタグは、わざわざ覚える必要はありません。いうのも、コーディング(プログラミング)は学校のテストと違って、カンニング(グーグルで検索)がOKだから。使うものは自然と覚えることになります。基本的には「必要に応じて、意味や使い方を調べる」ことが大切です。アルパカざっくりと理解したら、あとは調べつつ実践するのが一番早いですよ!なぜわざわざHTMLタグを使うの?なぜわざわざ「HTMLタグ」を使うのでしょうか?簡単に言うと、コンピュータは理解力がないからです。人間は、ちょっとくらい「曖昧な指示」をされても、勝手に解釈して処理ができます。コンピュータは「曖昧な指示」が大の苦手...というか、出来ません。そのため、常に「ルールに基づいた、決まった頼み方」をする必要があります。コンピュータがHTMLファイルを処理する場合、まずファイルの拡張子が「.html」なのでHTMLファイルだと理解します。次に、HTMLファイル内の文章を読みこんで、「HTMLタグ」という目印を元に、文章をどう扱うかを理解しています。アルパカルールをしっかり守って書かないと、コンピュータに理解してもらえないということですねHTMLタグの基本用語HTMLタグに関する超基本用語は開始タグ終了タグ要素の3つ。※開始タグと終了タグは先程説明しましたね要素(element)とは「開始タグと終了タグ」で囲われたもの。「要素」は日常でも使う普通の言葉ですが、HTMLの世界では上記の意味になるので、注意してください。アルパカちなみに、開始タグと終了タグで囲うものは「文章(テキスト)」以外のもあります。次回説明しますねHTMLタグと属性についてHTMLタグには「属性」を付けることも可能です。属性とは、簡単に言うと、HTMLタグの補足情報のこと。Webページのテキストをハイパーリンク(別ページに飛ぶ扱い)にする時には「aタグ」を使います。</a>しかし、上記の書き方だと「リンク先がどこか?」がコンピュータにはわかりません。</a>このように、属性を使うことで、HTMLタグを使うときに「補足情報」を追加することが出来ます。書き方は、開始タグ内のタグ名の後に「属性名=”属性値”」です。ちなみに、よく使われる属性の例は以下の通り。id属性:様々なHTMLタグで使われる。要素に好きな「固有名」を付けるclass属性:様々なHTMLタグで使われる。要素に好きな「分類名」を付けるsrc属性:imgタグ(画像を表示するタグ)で使われる。画像ファイルの置き場所を示すhref属性:aタグ(ハイパーリンク)で使われる。リンク先を示すアルパカ使っているうちに自然と覚えます!タグには属性が付けられるんだな~とだけ覚えておけば大丈夫ですよ終了タグが不要なHTMLタグHTMLタグの中には、終了タグがいらないものがあります。使う(頻出)タグの中で、終了タグがいらないものは、br:改行に使うHTMLタグimg:画像表示に使うHTMLタグhr:水平線を書くときに使うHTMLタグinput:フォームなどを作るときに使うHTMLタグです。imgタグ(画像表示に使う)は画像を表示するためだけのタグなので、明らかに「内側に囲うもの(テキスト)」がありませんよね。src=”画像のURL”>と書くだけで「画像を表示する」とコンピュータに伝えることが出来ます。このように「終了タグがなくても意味が通じそうなものは、終了タグを省くことが出来る場合がある」とざっくり覚えて下さい。※厳密には、終了タグをつけたら正常に動かないものと、終了タグが単に省略できるものがあるのですが、割愛しますまとめ今回は、HTMLの基本についてのお話でした。タグと終了タグをセットで使うのが基本。いう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。投稿一覧エンジニア兼ブロガー。IT企業で5年働いた後に独立しフリーランスになる。趣味のエンタメ系ブログ「アルパカタログ」は9ヶ月目で月間100万PVを達成。初心者や未経験者向けの分かりやすい解説が得意。2019.05.11こんにちは、フリーランスエンジニア兼テックライターのしろ(@siro3460)です。ぼくはこれまで、以下のような連載記事を書いてきました。USイメージキャラクター『Freena』フリーランスの羅針盤となるメディアサイト『東京フリーランス』。フリーランスの皆さんに役立つコンテンツを配信しています。