こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、HTMLコーディングをするために必須となるタグをご紹介します。
これを見て、HTMLの仕組みを理解しよう！
HTMLとは？
まずHTMLとは「HyperText Markup Language」の略で、頭文字をとって「エイチティーエムエル」と呼びます。
と言っても、こんな難しい名前を覚える必要はなく、コンピューターやブラウザが認識できるファイルと覚えればOKです。
写真や画像データはJPG等のファイル、動画データはMP4等のファイルのように、HTMLもファイルになります。
JPGファイルは画像を表示させるデータ、MP4ファイルは動画を再生するデータ、HTMLファイルはホームページを表示させるデータ、といえば分かりやすいかもしれません。
HTMLの中身
HTMLの中身はタグやテキスト等がいっぱい書いてあります。
これを書くことをHTMLコーディングと言います。（マークアップとも言ったりする）
最初は「うわ、英語だらけ・・こんなの書けるわけないじゃん」と思いますが、タグやルールを覚えてしまえば、そんなことありません。
最低限覚える必要のあるタグをご紹介します。
タグとは？
タグをご紹介する前にタグの説明をしたいと思います。
タグとは<h1></h1>や、<p></p>のような、< >で囲まれているものをタグと言います。
この< >で囲まれているタグは全て決まっていて、自由に書くことはできません。
また、< >は開始タグで、</>は終了タグです。
<h1></h1>は見出しタグで、<p></p>は段落を指定するためのタグになります。
「いやいや、そんなこと言われてもわからないよー！」と思いますが、ここでは< >に囲まれているものをタグと言うんだなと覚えていただければと思います。
必須のタグ
それでは早速、以下にHTMLの基本のタグを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○○○</title>
<meta name="keywords" content="○○○,○○○,○○○">
<meta name="description" content="○○○">
</head>
<body>
</body>
</html>順番に説明しますね。
タグの後に読み方も記載します。
<!DOCTYPE html>（ドックタイプタグ）
DOCTYPEタグは、「このファイルはHTMLだよ！」と、コンピューターやブラウザに宣言するタグになります。
正確にはタグではないのですが、そこは気にせず、必ず1行目に入れると覚えておきましょう。
<html lang=”ja”>（エイチティーエムエルタグ）
htmlタグで囲んだものを、htmlとコンピューターが認識してくれます。
これもお決まりのタグとして覚えておきましょう。
2行目は開始タグで、最後の行が終了タグになります。
ちなみにこのタグにはlanguageを記述できます。
<head>（ヘッドタグ）
headタグの中には、ブラウザ上で目に見える部分ではなく、ページの情報を記述します。
上記ソースの例では必要最低限の、文字コード・タイトル・説明を入れています。
<meta>（メタタグ）
metaタグは、必ずheadタグの中に記述します。
head以外だと認識されない可能性が高いです。
あと、metaタグは属性とセットにしてさまざまなメタデータを記述することができます。
属性がないとタグの力を発揮しません。
・<meta charset=”UTF-8″>
charset属性で「文字コードはUTF-8だよ」と記述。
文字コードとは、HTMLファイルのテキストをどの文字コードで書いているか認識させるものです。
たまに文字化けしているサイトがありますが、コンピューターは人間じゃないので、認識させないと理解してくれません。
・<meta name=”keywords” content=”○○○,○○○,○○○”>
name属性でキーワードと指定して、contentで中身を記述。
キーワードとは、その名の通り、このページのキーとなるワードです。
このページで言うと「html, タグ, コーディング」とかになります。
一昔前はこのキーワードが検索順位に効果がありましたが、今はほとんど意味がないようです。
ですが、基本的に記述した方が良いので、2〜3個は記述しておきましょう。
・<meta name=”description” content=”○○○”>
name属性でディスクリプションと指定して、contentで中身を記述。
ディスクリプションとは、このページの説明になります。
何か検索したときに、大きい文字の下に小さい文字が表示されているのを見たことがあると思います。
あの部分が説明になります。
このディスクリプションはとても重要なので、必ず記述しましょう。
この他にもsns用に記述する属性等、いくつかありますが、一旦はこの基本の属性を覚えておきましょう。
<title>（タイトルタグ）
その名の通り、タイトルタグで、検索したときに大きい文字で表示されるとても重要な要素になります。
タイトルタグは開始タグと終了タグで囲んで記述します。
「タグの中に書いたり、開始タグと終了タグで囲んで書いたり、もうわからないよー」と最初はなりますが、もうこれは慣れるしかありません！
<body>（ボディタグ）
ここまではページ上で目に見えない部分でしたが、ここからはいよいよ目に見える部分になります。
それがbodyタグです。
この中に書いたものがページ上に表示されます。
HTMLファイルをブラウザで表示させてみよう！
先ほど保存したindex.htmlファイルをダブルクリックすると、ブラウザ上で表示されると思います。
でもまだbodyタグの中身がないので真っ白なページになると思います。
再度index.htmlファイルをテキストエディターで開き、bodyタグの中身に何でもいいので、テキストを書いてみましょう。
書いたら保存して、ブラウザに切り替えて更新（F5 or command + R）してみましょう。
無事表示されたでしょうか？
テキストをタグで囲む
HTMLファイルは、基本的に全ての要素をタグで囲む必要があります。
なので先ほど書いたテキストを<p></p>タグで囲んでみましょう。
あいうえお
↓
<p>あいうえお</p>表示上は何も変わりませんが、pタグ（ピータグ）で囲むことで、「このテキストは段落を指定しているんだな」とコンピューターやブラウザが理解してくれます。
段落と言われてもピンとこないので、文章はpタグと覚えてしまいましょう。
代表的なタグ
ここまで試していただいたら、何となく分かってきたかと思いますので、例を参考に代表的なタグをご紹介します。
まずは下記コードをコピーして、先ほどのテキストと差し替えてみましょう。
<body>
<div>
<h1>これは見出しタグ</h1>
<p>
これは段落タグこれは段落タグこれは段落タグ<br>
これは段落タグ
</p>
<ul>
<li>これはリストタグ</li>
<li>これはリストタグ</li>
<li>これはリストタグ</li>
</ul>
<img src="https://www.good-f-design.com/wp-content/uploads/2021/04/logo.png" alt="初心者のためのWebデザイナー講座 good-f DESIGN">
</div>
</body>このようになると表示されると思います。
順番に説明しますね。
<div>（ディブタグ）
このタグは1つのブロックにすることができます。
タグ自体に意味はもたないのですが、レイアウトやスタイル調整等、コーディングする上で必ず必要になってきますので覚えておきましょう。
<h1>（エイチワンタグ）
見出しタグになります。
ブログ等を見ていると、見出し・テキスト・見出し・テキストと、読みやすい構成担っていると思います。
さらにh1からh6まであり、h1が大見出し、h2が中見出しと、小さくなっていきます。
このタグはページ構成にとても重要なタグですので、コーディングする際にページの構造を理解し、適切な見出しタグを指定することが必要になります。
<p>（ピータグ）
何度か出てきていますが、段落を指定するタグになります。
テキスト（文章）はこのタグで囲むと覚えておきましょう。
<ul><li>（ユーエルタグ、エルアイタグ）
このタグはリストタグで、ulとliでセットで使用します。
イメージしやすいのはレストランのメニュー表でしょうか。
一定の規則で並ぶテキストに使用します。
<img>（アイエムジータグ・イメージタグ）
画像を表示させるタグです。
src属性に、このindex.htmlファイルからみた、画像までのパスを記述すると、ページ上に表示させられます。
例ではこのサイトのロゴのパスを記述しています。
最後に
以上、HTMLとタグについてご紹介させていただきました。
ご紹介した以外にもタグはたくさんありますが、タグを覚えるより、実際に手を動かしてコーディングすることが大事です。
自分で書いたコードは忘れず覚えることができます。
コピーペーストだとやはり覚えられません。
最初は難しいと思いますが、やる気を出せば意外と簡単に覚えてしまいますので、まずは行動あるのみです！
今回は、
- HTMLとは？
- 必須のタグ
- テキストをタグで囲む
- 代表的なタグ
についてお伝えしました。
次回はCSSについてお伝えできればと思います！
→【初心者向け】CSSとは？CSSを覚えてホームページをおしゃれにしよう！
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント