Webサイト制作やデザインのアレンジ、ブログの更新など、Webサイトに関わるさまざまなシーンで便利に使えるのがHTMLタグです。初心者にはよくわからない英単語の羅列のようにも思えますが、一定のルールと役割に則って書かれています。タグの種類はたくさんあり、覚え方のポイントを押さえるのがHTMLタグをマスターするコツです。HTMLタグにはどのような役割があるのか、どのように覚えれば初心者でも効率良くマスターできるのか解説していきましょう。
HTMLタグって何？
Webサイトをきれいに表示するには、コンピューターが理解できる言語で、サイトの名前や見出し、リンク、段落、画像などを指定する必要があります。その言語がHTMLです。
HTMLの主な役割は、文書の内容一つひとつに役割を持たせることです。たとえば、紙に文章を書くとき、タイトルは大きな文字で目立つように、文章は少し小さめの文字で記述すれば、なんとなく「ここがタイトルでこっちが文章」と判断がつきます。
しかし、コンピューターは、人間のように「なんとなく」という感覚を察することはできません。HTMLタグで意味付けすることで、見出し、段落、表、リンクなどを正確に表示できるようになります。
よく勘違いしやすいのは、HTMLでデザインに関わる要素も指定してしまう点です。フォントの大きさや種類を変更したりWebサイトのレイアウトを指定したりするのは、もうひとつの言語であるCSSの役割です。HTMLは原則、文書の構造を指定するだけなので注意しましょう。
基本的なHTMLタグのルールとは？
HTMLの主な記述ルールは、開始タグと終了タグがある点です。メインコンテンツであることを表す＜main＞タグの場合、開始タグが＜main＞で終了タグが＜/main>です。開始タグから終了タグまでを「要素」と呼びます。HTML文書はさまざまなタグが入れ子状態になり、それぞれの要素同士で親子関係を築きます。
「＜main＞＜h1＞ホームページの作り方＜/h1＞＜/main＞」の場合、＜main＞から＜/main＞までの内容が親要素、＜h1＞から＜/h1＞までが子要素です。HTMLファイルをブラウザに反映させる際、イメージ通りに表示されないケースがよくありますが、これは終了タグの記述が漏れていたり、終了タグの「/（スラッシュ）」が抜けていたりなどのケアレスミスであるケースがとても多いです。こういったミスを防ぐには、入れ子関係を意識して記述する必要がありあます。もし、ブラウザでイメージ通りに表示されないなら、開始タグと終了タグがペアであるか確認してみましょう。
HTMLの記述は、大文字と小文字、どちらでも構いません。一般的には、ドキュメントタイプ宣言のみ大文字で、ほかのタグは小文字にするケースが多く見受けられます。また、HTMLタグは半角英数で入力するのがルールです。全角スペースが交じるだけで表示が崩れる場合がありますので、気をつけましょう。
※下記の「＜＞」は、表記の都合上全角にしていますが、実際に設定する場合は半角で入力しなれければ反映されませんので、ご注意ください。
使用頻度の高いHTMLタグ
HTMLタグはコンテンツモデルごとに覚えるのがおすすめです。コンテンツモデルとは、似た役割同士でグループわけされたタグの集まりです。たとえば、文書をセクションごとに分けるセクショニングコンテンツは＜article＞や＜section＞、見出しタイトルの大きさを示すヘッディングコンテンツは＜h1＞から＜h6＞という具合に覚えていくと、タグの勉強もスムーズに進むでしょう。
また、無料ブログサービスで記事を更新する際、簡単なタグが入力できるようになっているケースがあります。このときによく使うタグを中心に覚えるのもおすすめです。
例えば、＜p＞は段落を示すタグですが、他にも、＜b＞（キーワードや製品名）、＜i＞（声や心で思ったこと）、＜u＞（アンダーライン）、＜s＞（正確ではなくなった内容）、＜del＞（削除部分）、＜em＞（アクセントをつける箇所）、＜strong＞（強い重要性を表す箇所）、＜small＞（免責、警告、著作権の注釈など）、＜blockqoute＞（引用、転載セクション）あたりも、ブログ記事作成時によく利用されます。＜dl＞＜dt＞＜dd＞や＜ul＞＜ol＞＜li＞はそれぞれリストを表すタグです。＜hr＞（テーマや話題を区切る）、＜br＞（改行）、＜a＞（リンク）などもよく使うタグです。
初心者でもできるHTMLタグの効果的な覚え方は？
初心者がHTMLを効率的に覚えるにはどうすればいいか、140名のみなさんに聞いてみました。
やっぱり繰り返し何度も書いて体で覚えるのがベスト！
- やはり何度も実際にやってみるというのが一番だと思います。（50代/男性/正社員）
- 古いバージョンのHTMLで書かれたウェブサイトを、最新のHTMLで(同じデザインで)書き直すということを延々とやっていると、よく利用するタグを自然に覚える。（40代/男性/個人事業主・フリーランス）
- よく使うタグは自然に覚えられる。（40代/女性/パート・アルバイト）
- 最初のころは覚えられなかったので、よく使うタグをプリントして机の前に貼っておきました。（50代/女性/個人事業主・フリーランス）
- 闇雲に一つ一つ覚えるのではなく、用途ごとに覚えることです。HTMLの大元となる＜html＞＜head＞＜body＞、表を作るタグは＜table＞＜tr＞＜td＞等セットで覚えると、それぞれのタグの意味や繋がりを理解できます。（20代/男性/無職）
【質問】
HTMLタグを覚えるコツを教えてください。
【回答結果】
フリー回答
調査地域：全国
調査対象：年齢不問・男女
調査期間：2018年07月09日～2018年07月16日
HTMLを覚えるなら繰り返して書くのが一番という意見が多く見受けられました。また、繰り返すうちによく書くタグは自然に覚えられるという人も多いようです。何度も書いて体で覚えるのがもっとも効率的な方法のひとつということでしょう。
初心者向きのタグを覚えてHTMLの知識を深めよう
HTMLタグを覚えるには、Webサイトの構造を覚えるのが早道です。Webサイトの構造を覚えるには、コンテンツモデルを理解するのが近道です。それぞれ役割や使い方が似ているタグなら、連動して覚えていけるでしょう。また、初心者でも記述しやすいタグから覚えていくと、少しずつHTMLの知識を深めていけます。アンケートでもHTMLを覚えるなら繰り返して書くのが一番という声が多く、習得には地道に繰り返して学習することがポイントです。
Web業界への就業や在宅、フリーランスを目指す方は、リンクアカデミーが受講生の方に対して実施している独自の自己診断サービス（BRIDGE-C）がおすすめです。やる気を維持した状態で目標とするスキル習得に向けて基礎から実務レベルまで身に付けられるだけでなく、学んだ後に叶えたい一人ひとりの夢やキャリアアップの実現に向けてサポートしていきます。ぜひ、現在の自分に向き合う機会として、是非一度パソコンスクールアビバ・資格スクール大栄へ運んでみてはいかがでしょうか。
