- 公開日: 2017年5月9日
【初心者向け】HTMLタグの基本的な使い方を詳しく解説
Webサイトを作る言語、HTMLとは？基礎の基礎からわかりやすく解説！こちらでHTMLの基礎を。これさえ見ればOK！今から始める人のためのHTMLの書き方とは？こちらで基本的な書き方を紹介してきました。HTMLの基礎はすでに身についていることと思います。
そこで今回は、実際にHTMLタグをどのように使うのかを解説していきます。この記事を通して、HTMLタグについての知識をより深めていきましょう。
目次
- hレベル：見出し
- どのように使うか
- a：アンカー
- どのように使うか
- div：範囲指定（ブロック要素）
- どのように使うか
- !DOCTYPE html：文書型宣言
- どのように使うか
- html：HTML文書
- どのように使うか
- head：ヘッダ
- どのように使うか
- title：タイトル
- どのように使うか
- meta：ヘッダ付加情報
- どのように使うか
- link：文書同士のリンク関係
- どのように使うか
- p：段落
- どのように使うか
- hr：区切り線
- どのように使うか
- span：インライン要素
- どのように使うか
- img src="URL"：イメージ
- どのように使うか
- em：斜体太文字
- どのように使うか
- strong：太文字
- どのように使うか
- del：抹消線
- どのように使うか
- u：下線
- どのように使うか
- ul：リスト
- どのように使うか
- ol：番号つきリスト
- どのように使うか
- table：テーブル
- どのように使うか
- まとめ
hレベル：見出し
６段階のレベルで見出しを表現するタグです。基準が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>
＼一流デザイナーのスキルが身に付く／
まとめ
主なHTMLタグとその使い方についてまとめました。この記事だけ見ても、タグの使い方を理解することはできないでしょう。
HTMLを覚えるには、わからない所をこの記事で見て実際に書いて覚えていきましょう！
- この記事を書いた人
- 黒田剛司
