HTMLタグの基本を理解しよう
HTMLタグの書き方を理解しよう
htmlタグには始まりと終わりががあります。<p>タグを例として話します。始まりが<p>だとしたらその中に文字を記述したら、</p>でそのタグの記述終了という事になります。
<p>文章が入ります</p>
こんな感じになります。Webサイト上では<p>タグは表示されません。<p>タグ内に記述されている「文章が入ります」がWebサイト上では表示されます。
このタグの種類を変えることでWebサイト上で表示できることが変わっていきます。
Webデザインでやってしまいがちなミス
記述した文字が表示されない。デザインが崩れてしまった。などがあれば下記の事をやっている可能性が高いので確認して見てください。<p>タグを例にして話します。
- <p>タグで始め</p>タグで終わらせていない場合
- <p>タグで始まったのに</a>など違うタグを使って終わらせている場合
- HTMLタグを全角を使って記述している場合。HTMLタグは全て半角を使うこと
タグにはそれぞれに名前をつけることができる
タグには名前を指定するが出来ます。名前を指定には2種類の記述方法があります。それが「id」で指定する場合と「class」で指定する場合です。
idで名前を付ける場合
＜p＞タグを例にして記述方法を説明します。idで名前付けをする場合は下記のようになります。
<p id=”test01″>ここに文字を入力します。</p>
classで名前をつける場合
classで名前付けをする場合は下記のようになります。
<div class=”test02″>ここに文字を入力します。</div>
idとclassを使う利用はcssやjavaScriptのため
cssやjavaScriptでステータスを変えたりする時に使用。idやclassで指定した名前を利用してCSSファイルなどに記述します。
idとclassの特徴を紹介
| idの場合 |
他のタグに同じ名前を使用することができません |
| classの場合 |
他のタグでも同じ名前を使用することができます。 |
タグの種類説明
全ての基礎となるタグ
| タグ種類 |
説明 |
| ＜html＞タグ |
最初に<html>と記載し最後に</html>で終わることで、この文章がHTMLで記述されているということを表すタグです。 |
| ＜head＞タグ |
ブラウザや検索エンジンに必要な情報を教えるために記述するタグです。 |
| ＜meta＞タグ |
検索された時にタイトルの下に表示される説明文を記述するタグです。 |
| ＜title＞タグ |
ページのタイトルを表示するタグです。画面上のタイトルを表示される時に使用されます。 |
| ＜link＞タグ |
外部ファイルを読み込むときに使用されるタグです。ccsなどを読み込む際に使用されるタグです。 |
タグの記述例
記述例が下記になります。ちなみにこちらで紹介したタグはWebサイトには表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>こちらにタイトルが入ります<title>
<link rel=stylesheet" href="test.css">
</head>
</html>
各グループにまとめる時に使用するタグ
| <body>タグ |
ページ本体に表示される部分です。<body>タグ内にWebサイトに表示される文字や画像を入力していきます。 |
| <div>タグ |
ブロックの要素として指定したい範囲を<div>で囲います。 |
| <header>タグ |
先頭部分に記述するタグです。 |
| ＜footer＞タグ |
末尾の部分に記述するタグです。 |
タグの記述例
<head>タグ内の記述は省略します。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>headerの領域になります。</header>
<div id="test01" class="test02">id：test01の領域になります。</div>
<footer>footerの領域になります。</footer>
</body>
</html>
文字／画像の貼り付け／リンクを張るなどに使用するタグ
| ＜h1＞～＜h6＞タグ |
見出しとなるタグになります。<h1>から<h6>まであります。 |
<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>
<p>こちらに文章が入ります。</p>
| ＜img＞タグ |
画像を貼り付けるタグになります。「src=””」にはフォルダ内にある画像を指定します。タグ名は違いますがリンクの張り方は同じです。 |
→＜link＞タグの外部リンクの説明
<img src="test.jpg">
| ＜a＞タグ |
リンクを張るときに使用するタグになります。「href=””」にはリンク先を記述します。 |
<a href="test.html">
| ＜ul＞タグ・＜li＞タグ |
順序のあるリストを作成するタグになります。 |
<ul>
<li>赤色</li>
<li>青色</li>
<li>黄色</li>
<li>白色</li>
<li>黒色</li>
</ul>
表作成の時に使用するタグ
| ＜table＞タグ |
表を作成する時に使用するタグです。 |
| ＜th＞タグ |
表内の見出しを作るタグです。 |
| ＜tr＞タグ |
行を作るタグです。 |
| ＜td＞タグ |
セルを作るタグになります。 |
タグの記載例
<table border="1">
<tr>
<th>No</th><th>都道府県</th><th>ひらがな</th><th>ローマ字</th>
</tr>
<tr>
<th>1</th><td>東京</td><td>とうきょう</td><td>TOUKYOU</td>
</tr>
<tr>
<th>2</th><td>大阪</td><td>おおさか</td><td>OOSAKA</td>
</tr>
<tr>
<th>3</th><td>京都</td><td>きょうと</td><td>KYOUTO</td>
</tr>
</table>
ボタンや入力テキストを作成する時に使用するタグ
| ＜input＞タグ |
type=”text” |
テキストボックスを作り出すタイプになります。 |
<input type="text">
| ＜input＞タグ |
type=”submti” |
送信ボタンを作り出すタイプになります。 |
<input type="submti">
| ＜input＞タグ |
type=”checkbox” |
チェックボックスを作り出すタイプになります。 |
<input type="checkbox">
| ＜input＞タグ |
type=”radio” |
ラジオボタンを作り出すタイプになります。 |
<input type="radio">
| ＜input＞タグ |
type=”hidden” |
画面上には表示されないタイプになります。 |
<input type="hidden">
css／Javascriptを記載する時に使用するタグ
| ＜style＞タグ |
<style>タグ内にタグ名／id名／class名を指定してデザインを記述することが出来ます。 |
<style>
body {
color: #00ff00
}
</style>
| ＜script＞タグ |
<script>タグ内にJavascriptのコードを記述することが出来ます。 |
<script>
alert(メッセージが表示されます);
</script>
