HTMLのタグ一覧と効果を現役デザイナーが解説【初心者向け】
初心者向けにHTMLのタグ一覧と意味について解説しています。ここではWebサイト作成時によく使われるHTMLのタグとその役割、それぞれの基本的な書き方を説明します。何度も使用することになるので必ず頭に入れておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLのタグ一覧と意味について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
HTMLのタグ一覧と意味について詳しく説明していくね！
お願いします！
初心者がよく使うタグ一覧
ブラウザ上で見ているWebページのほとんどは、HTMLという言語によって作られています。HTMLのタグを用いることで、見出しや段落、画像の表示やリンクなどを指定することが可能となります。
ここでは、初心者がよく使う代表的なタグをいくつかご紹介します。
タグの意味
ここからは、HTMLタグそれぞれの意味についでご紹介していきます。まずはじめに、HTMLタグは下記の様な文法で使用します。
<タグ名>タグを反映させる情報</タグ名>
■headタグ
headタグは、ウェブページの情報や設定を記述する際に用いるタグです。「文字コードの指定」や「検索エンジンやブラウザに対する情報の提示」といった役割を果たします。また、headタグ内に記述した情報は、基本的にウェブ上には表示されません。
■bodyタグ
bodyタグは、文章の内容を表す際に用いるタグです。bodyタグ内に記述されたテキストや画像が実際にブラウザ上に表示されます。
■hタグ
hタグは、「Heading」の略で、見出しを作る際に用いるタグです。h1〜h6の6種類あり、h1が一番大きい見出しで、数字が大きくなるほど小さい見出しになります。ページの構成に合わせて最適な大きさのタグを使用します。
■brタグ
brタグは、改行を行う際に用いるタグです。HTMLのコード内では、Enterを押して改行を行っても、ブラウザ上に反映されません。そこで、改行の際にこのbrタグを使用します。文章を明示的に改行するために用います。
■aタグ
aタグは、他ページへのリンクを指定する際に用いるタグです。このaタグを利用することで、テキストだけでなく画像にもリンクを指定することができます。
■imgタグ
imgタグは、文章内に画像を表示させる際に用いるタグです。GIF、JPG、PNGなどの画像形式を使用することができます。PDFデータは貼ることができないので注意してください。
タグの使い方をみてみよう
ここからは、実際にタグの使い方をサンプルコードを用いて紹介していきます。基本的な使い方が分かれば簡単に応用できますので、ぜひご参考ください。
サンプルコード
<html>
<head>
<title>samplehtml</title>
</head>
<body>
<!--hタグを使ってみよう-->
<h1>h1:hタグを使ってみよう</h1>
<h2>h2:hタグを使ってみよう</h2>
<h3>h3:hタグを使ってみよう</h1>
<h4>h4:hタグを使ってみよう</h2>
<!--aタグを使って様々な情報を表示してみよう-->
<!--aタグを使って文字を表示する-->
<a>aタグを使って文字を表示する</a>
<a>aタグを使って文字を表示する</a>
<!--改行はbrタグを使用する-->
<br>
<a>aタグを使って文字を表示する</a>
<br>
<!--aタグを使ってURLリンクを表示してみよう-->
<a href="リンク先URL">
aタグを使ってURLリンクを表示してみよう</a>
<br>
<!--aタグとimgタグを組み合わせて画像リンクを表示してみよう-->
<a href="リンク先URL">
<img src="画像ファイルパス">
</a>
</body>
</html>
監修してくれたメンター
| 菅繕久
現在はフリーランスのエンジニアをしていてプログラミング歴は8年目になります。 普段は Python、FileMaker等を使って様々な業務で活用できるIoTプロダクトRPAツールを作成しています。開発実績としては、業務自動化ツール(在庫管理・発注・ファイル操作 etc)、電子カルテシステム、ロボット用プログラムなどがあります。 TechAcademy ではPythonコースを担当しております。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
