それでは主なタグを紹介していきます。
ここで紹介するタグはホームページ作成の上で、特に使用頻度の高いタグですので、その他のタグを参照したい場合はHTMLタグ辞典をご覧ください。
なお、色が薄いタグは紹介はするものの使用すべきではないタグです。
目次
ページ全体を定義する
(ヘッダー部で使用)
使用タグ | 意味合い | 書き方の例 |
---|---|---|
<html> | HTMLを宣言 | <html lang=”ja”></html> |
<head> | ヘッダ情報を指定 | <head></head> |
<meta> | 文字エンコードなどを指定 | <meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”> |
<title> | タイトルを指定 | <title>タイトル</title> |
組み合わせ例
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<meta http-equiv=”Content-Style-Type” content=”text/css”>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<meta name=”keywords” content=”WEBデザイン,初心者,ホームページ作成…”>
<meta name=”description” content=”ホームページ作成からネット収入…”>
<title>仕組みを理解しよう:主なタグの紹介 – HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード</title>
</head>
<body>
</body>
</html>
<html lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<meta http-equiv=”Content-Style-Type” content=”text/css”>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<meta name=”keywords” content=”WEBデザイン,初心者,ホームページ作成…”>
<meta name=”description” content=”ホームページ作成からネット収入…”>
<title>仕組みを理解しよう:主なタグの紹介 – HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード</title>
</head>
<body>
</body>
</html>
使用例は「実際に作ってみよう:文字に変化を与える」文字を変化させる
使用タグ | 意味合い | 変化例 | 書き方の例 |
---|---|---|---|
<b> | 太字 | 太字 | <b>太字</b> |
<strong> | 論理強調 | 論理強調 | <strong>論理強調</strong> |
<i> | 斜体 | 斜体 | <i>斜体</i> |
<u> | 下線 | 下線 | <u>下線</u> |
<font color=””> | 文字色 | 赤色の文字 | <font color=”#ff0000″>赤色の文字</font> |
<font size=””> | 文字サイズ | 一つ小さい文字 | <font size=”-1″>一つ小さい文字</font> |
<font face=””> | フォントの指定 | Arial | <font face=”Arial”>Arial</font> |
組み合わせ例
文字を強調するなら太字や強調を使おう。斜体や下線はあまり使われないけどね。文字の色を変えるとメリハリがついてイイかもしれない。ちょっと自信ないときは小さくしてもいいかも。
文字を強調するなら太字や強調を使おう。斜体や下線はあまり使われないけどね。文字の色を変えるとメリハリがついてイイかもしれない。ちょっと自信ないときは小さくしてもいいかも。文字を強調するなら<b>太字</b>や<strong>強調</strong>を使おう。<i>斜体</i>や<u>下線</u>はあまり使われないけどね。<font
color=”#00cc00″>文字の色</font>を変えると<b><font
color=”#ff00ff”>メリハリ</font></b>がついてイイかもしれない。ちょっと自信ないときは<font
size=”-2″>小さくしても</font>いいかも。
color=”#00cc00″>文字の色</font>を変えると<b><font
color=”#ff00ff”>メリハリ</font></b>がついてイイかもしれない。ちょっと自信ないときは<font
size=”-2″>小さくしても</font>いいかも。
ページのレイアウト
使用タグ | 意味合い | 変化例 | 書き方の例 |
---|---|---|---|
<p> | 段落 | 一つの段落 | <p>一つの段落</p> |
<br> | 改行 | この行で改行 次の行はここから |
この行で改行<br>次の行はここから |
<h1>〜<h6> | 見出し |
見出し2 |
<h2>見出し2</h2> |
<hr> | 水平線 |
|
<hr style=”margin: 0; width:80% ;border:none;” /> |
※改行、水平線タグはタグで閉じない。</br>、</hr>は必要ありません。
組み合わせ例
段落ごとに文字を入力して、
さらに改行をすると見やすくなるよ。
さらに改行をすると見やすくなるよ。
見出しはh1、h2…h6のように順番に付けるのが基本だよ。
<p>
段落ごとに文字を入力して、<br>
さらに改行をすると見やすくなるよ。<br>
<hr>
<h3>
見出しはh1、h2…h6のように順番に付けるのが基本だよ。
</h3>
</p>
段落ごとに文字を入力して、<br>
さらに改行をすると見やすくなるよ。<br>
<hr>
<h3>
見出しはh1、h2…h6のように順番に付けるのが基本だよ。
</h3>
</p>
HTMLのタグについてもっと知りたい