SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

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

基本構造 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>

関連記事

HTML table
【HTML table】表を作成からレイアウトの変更までを解説

HTMLのtableタグについて説明しております。
cssでセルとの結合、border,罫線などtableタグに関する情報をお届けしております。
表を作成からレイアウトの変更まで1度お試しください。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
created by Rinker

まとめ

今回はよくホームページ作成で使用する
タグについてまとめてみました!

この記事では基本構造からコンテンツ内まででしたが
他にもいろんなタグはあります。

今後も紹介していきますので
Twitterのフォローお願いいたします。

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top