【HTMLのタグ一覧】基本構造からコンテンツ内のタグ

シュウ

今回は「【HTMLのタグ一覧】」のご紹介です。
基本構造からコンテンツ内編までです！

[記事の内容]

基本構造 head内のタグについて

基本構造 head内

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【HTMLのタグ一覧】基本構造からコンテンツ内編 初心者でも大丈夫</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>


</body>
</html>

htmlタグについて

html〜/html
の中身に要素が入ります。HTML文書において基点となります。
HTML「HyperText Markup Language」 (ハイパーテキストマークアップランゲージ)の略後

headタグについて

head〜/head
の中身はブラウザーには表示されません。
<head>内には主に、タイトル、CSSファイル、JSファイルなどを記述します。

metaタグについて

metaは言語の設定、ページの説明(description)を設定いたします。
meta 「Meta-information」の略語

titleタグについて

title〜/title
はページのタイトルを表します。
ブラウザのタブに表示されます。SEOにも大きな影響を与えます。

linkタグについて

link href=""
は主にCSSのファイルを読み込む際に使用します。
また外部ファイルを読み込む際にも使用します。

bodyタグについて

body〜/body
の中身がブラウザー表示されます。
<body>〜</body>の中身は主にコンテンツ要素が入ります。

コンテンツ内のタグについて

h1〜h6タグについて

h1〜h6
タグは見出しタグとして使用されます。
数字が小さいほど大きな見出しの役割をはたします。1番小さい見出しは<h6>です。
※見出しタグは<h6>までです。
h1〜h6 「Heading」の略語

h1〜h6タグの使用例

<h1>1番目に大きな見出し</h1>
<h2>2番目に大きな見出し</h2>
<h3>3番目に大きな見出し</h3>	
<h4>4番目に大きな見出し</h4>
<h5>5番目に大きな見出し</h5>
<h6>6番目に大きな見出し</h6>

See the Pen
bGdRgmp by shu (@shu0325)
on CodePen.

pタグについて

pタグは文章の段落に使用します。
文章を書く際で改行を行うにはbrタグを使用します。

pタグの使用例

<p>文章が入りましす。文章が入りましす。文章が入りましす。</p>
<p>文章が入りましす。文章が入りましす。文章が入りましす。<br>
brタグで改行します。</p>

img(画像)タグについて

imgタグは画像を表示させる為に使用します。
srs属性で表示させたい画像の指定をします。

imgタグの使用例

<img src="/images/top/img_name.jpg">

aタグについて

aタグはリンクに使用します。
リンク先はhref属性に指定します。

► href属性

リンク先のURLを指定できます。
「<a>はhref=”リンク先URLを入力#は指定位置id名を入力”></a>」のように、
HTMLファイルに続き「#」でid属性の値をすることで、位置の指定が可能になります。

「tel:電話番号」 スマートフォンでタップすると発信ができます。
「mailto:メールアドレス」 指定したメールアドレスを記述することでメールソフト(メーラー)が起動します。

aタグの使用例

<a href="news.html#demo">「「news.html」ページ内にあるid属性にリンクします</a>
<a href="tel:000-1234-5678">000-1234-5678</a>
<a href="mailto:送信先メールアドレス">送信先メールアドレス</a>

► target属性

targetを使用することにより、
表示先のウィンドウやタブ（ブラウジング・コンテキスト）を指定できます。

_blank	新しいウィンドウに表示させます
_self	現在のブラウジング・コンテキストを使用します
_parent	親のブラウジング・コンテキストを使用します
_top	最上位のブラウジング・コンテキストを使用します

aタグ target属性の使用例

<a href="news.html" target="_blank">「news.html」を新しいウィンドウに表示させます</a>

ul、olタグについて

ul、olタグはリストタグにとして使用します。
liを使用し各項目を入れることができます。

ulタグの使用例

<ul>
	<li>番号のないリスト表示になります</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

See the Pen
RwPgpKW by shu (@shu0325)
on CodePen.

olタグの使用例

<ol>
	<li>番号付きのリスト表示になります</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ol>

See the Pen
XWbgMpx by shu (@shu0325)
on CodePen.

strongタグについて

strong
タグは強調させるタグとして使用します。

strongタグの使用例

<ul>
   <li><strong>HTML5</strong></li>
   <li>CSS3</li>
   <li>jQuery</li>
</ul>

See the Pen
bGdRrEg by shu (@shu0325)
on CodePen.

scriptタグについて

script
タグはjavascriptを読み込み際に使用します。

scriptタグの使用例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【HTMLのタグ一覧】基本構造からコンテンツ内編 初心者でも大丈夫</title>	
</head>
<body>


<!--jquery-->
<script src="js/jquery-1.11.3.min.js"></script>
</body>
</html>