【初心者向け】HTMLタグの基本的な使い方を詳しく解説


【初心者向け】HTMLタグの基本的な使い方を詳しく解説

Webサイトを作る言語、HTMLとは?基礎の基礎からわかりやすく解説!こちらでHTMLの基礎を。これさえ見ればOK!今から始める人のためのHTMLの書き方とは?こちらで基本的な書き方を紹介してきました。HTMLの基礎はすでに身についていることと思います。

そこで今回は、実際にHTMLタグをどのように使うのかを解説していきます。この記事を通して、HTMLタグについての知識をより深めていきましょう。

目次
  1. hレベル:見出し
  2. どのように使うか
  3. a:アンカー
  4. どのように使うか
  5. div:範囲指定(ブロック要素)
  6. どのように使うか
  7. !DOCTYPE html:文書型宣言
  8. どのように使うか
  9. html:HTML文書
  10. どのように使うか
  11. head:ヘッダ
  12. どのように使うか
  13. title:タイトル
  14. どのように使うか
  15. meta:ヘッダ付加情報
  16. どのように使うか
  17. link:文書同士のリンク関係
  18. どのように使うか
  19. p:段落
  20. どのように使うか
  21. hr:区切り線
  22. どのように使うか
  23. span:インライン要素
  24. どのように使うか
  25. img src="URL":イメージ
  26. どのように使うか
  27. em:斜体太文字
  28. どのように使うか
  29. strong:太文字
  30. どのように使うか
  31. del:抹消線
  32. どのように使うか
  33. u:下線
  34. どのように使うか
  35. ul:リスト
  36. どのように使うか
  37. ol:番号つきリスト
  38. どのように使うか
  39. table:テーブル
  40. どのように使うか
  41. まとめ

hレベル:見出し

6段階のレベルで見出しを表現するタグです。基準が4であり、最大の見出しが1、最小の見出しが6になります。

前後にスペースが安き、太字の見出しとして表示されます。

どのように使うか

以下のように記述をすると、本項の「どのように使うか」という見出しを表現することができます。

<h3> どのように使うか </h3>

a:アンカー

href属性を使ってリンク先を指定することで、他のページにジャンプさせることができます。

ジャンプさせたいサイトのURLを、「href="URL"」というふうに記入しましょう。

どのように使うか

例えば、コード部のトップページにジャンプさせたいときは、以下のように記述します。   

<a href="https://blog.codecamp.jp/">コード部はこちら</a>

div:範囲指定(ブロック要素)

ブロック要素の指定や、スタイルシートの適用に用いるタグになります。

前後で改行されるので、改行タグである
の代替としても使うことが可能です。

どのように使うか

以下のように指定することで、CSSを使ってスタイルを変更することができるようになります。

<div class="example"></div>

!DOCTYPE html:文書型宣言

文書の先頭に書くことで、その文書がHTML5で作成されたものであると宣言するためのタグです。

意味を持たないとされることがほとんどの文書型宣言ですが、ブラウザなどにHTML5で書かれたサイトであることを明確に伝えることができるので、記述しておいて損はないでしょう。

軽いおまじないだと思って、コードを書く前に記述しておきましょう。

どのように使うか

コードの先頭に書いて、その下から本格的にコードを書き始めます。

<!DOCTYPE html>

html:HTML文書

HyperText Markup Language の略称であるHTMLを書いていることを示すためのタグです。

どのように使うか

<html>

(ここにコードを記述)
</html>

head:ヘッダ

htmlタグを記述したあとに書く、構造タグがheadタグになります。

省略できるタグではありますが、読みやすいコードのためにも記述しておきましょう。

どのように使うか

htmlタグを書いたあとで、記述していきます。 中に書く情報にはmeta、link、baseなどがあります。

<head>
(ここにコードを記述)

</head>

title:タイトル

tltleタグです。ここで書いたものは、ブラウザの最上部にあるタイトルとして表示されます。 また、titleタグは必ず指定する必要があり、headタグなどのように省略することはできません。

どのように使うか

<title>
(ここにサイトタイトルを記述)
</title>

meta:ヘッダ付加情報

サイトの本文とは別に、付加情報を記述できるのがmetaタグです。

このタグを使って情報を記述することで、ブラウザなどに対して、製作者やキーワードの情報を伝えることができます。

情報の定義をname属性で、定義したものの値をcontent属性で指定しましょう。

指定される内容は決められていませんが、例えば以下のような情報が記述されます。

  • author:製作者
  • date:作成日
  • keywords:キーワード
  • reply-to:連絡先
  • description:頁の説明文
  • copyright:著作権

どのように使うか

例えば、この文書を説明し、キーワードを指定するときには以下のように記述します。

<meta name="description" content="HTMLタグの解説。">
<meta name="keywords" content="HTML,タグ,リファレンス">

link:文書同士のリンク関係

headタグ内に記述する、文書同士の関係を示すタグになります。

CSSのスタイルシートを呼び出すときによく使われますね。

どのように使うか

rel属性でリンク先との関係を表し、href属性でURLを指定します。 以下のコードはCSSのスタイルシートを指定するときのものです。

<link rel="stylesheet" href="code-bu01.css" type="text/css">

p:段落

pタグで文章を囲むことで、その文章が一つの段落となります。

ビジュアルエディタを使っているかたであれば、特に気をつける必要がないタグです。

どのように使うか

文章を囲むことで、囲んだ中身を段落として表示させることができます。

<p>これは段落です。</p>

hr:区切り線

区切り線を下に引くタグになります。

どのように使うか

終了タグはなく、ただ単に記述するだけです。

<hr>

span:インライン要素

これ自体は意味を持たず、divタグと同じようにスタイルを適用させるさいに使用します。

divタグと違うのは、spanタグがインライン要素であることです。

ブロック要素であるdivタグは改行され、インライン要素であるspanタグはかいぎょうされません。

どのように使うか

以下のように指定することで、CSSを使ってスタイルを変更することができるようになります。

<span class="example"></span>

img src="URL":イメージ

JPEGやGIF、PNGといった形式のイメージを表示させるためのタグです。

src、altのような属性があり、widthやheightを用いることで幅や高さを指定することもできます。

どのように使うか

src属性によって、イメージのURLを指定します。

<img src="example.jpg" alt="example">

em:斜体太文字

このタグで文字を囲むことで、斜体の太文字を表示することができます。

テキストの中で特に強調したい文字に使用しましょう。

どのように使うか

強調したい文字を囲むと、その文字が斜体の太文字になります。

<em>この文字が斜体の太文字になります。</em>

strong:太文字

斜体ではない太文字として表示したいときにはstrong属性を使用します。

どのように使うか

強調したい文字を囲むことで、太文字にすることができます。

<stong> この文字が太文字になります。 </strong>

del:抹消線

文字に抹消線を表示させるためのタグです。

どのように使うか

delタグで文字を囲むことで、その文字の上に抹消線が表示されます。

<del>この文字の上に抹消線が表示されます。</del>

u:下線

書かれた文字に対して下線を引きたいときには、uタグを使用します。

これによって、テキストにアンダーラインを引くことができます。

どのように使うか

下線を引きたい文字をuタグで囲みます。

<u>この文字の下に下線が表示されます。</u>

ul:リスト

番号なしのリストを表示させることができるタグです。

liタグで項目を指定します。

どのように使うか

項目をliタグで指定して、全体をulタグで囲みます。

<ul>
 <li>このタグは</li>
 <li>番号なしの</li>
 <li>リストです</li>
</ul>

ol:番号つきリスト

先ほどのulと似ていますが、こちらは箇条書きのようにはならず、1から順に番号がついたリストになります。

どのように使うか

項目をliタグで指定して、全体をolタグで囲みます。

<ol>
 <li>このタグは</li>
 <li>番号つきの</li>
 <li>リストです</li>
</ol>

table:テーブル

表を作るときに用いるタグになります。

どのように使うか

tableタグで全体を囲み、横1行をtrタグで、各セルをtdタグで表現しましょう。

また、見出しセルを表現したいときにはthタグを用います。

<table>
<tr>
  <td>左上のセル</td>
  <td>右上 のセル </td>
</tr>
<tr>
  <td>左下 のセル </td>
  <td>右下 のセル </td>
</tr>
</table>

一流デザイナーのスキルが身に付く

無料カウンセリングはこちら

まとめ

image 主なHTMLタグとその使い方についてまとめました。この記事だけ見ても、タグの使い方を理解することはできないでしょう。

HTMLを覚えるには、わからない所をこの記事で見て実際に書いて覚えていきましょう!


黒田剛司
この記事を書いた人
黒田剛司
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp