Webサイト制作でよく使うHTMLタグ17選!

2015/02/25

html-tag-used

こんにちは。
今回はWebサイト制作でよく使うHTMLタグ17選!です。

HTML初心者向けの記事です。
普段からHTMLを書いている人には物足りないかもしれませんが、復習をかねて読んでもらえたらと思います。

HTMLとは?

HTMLとは(エイチティーエムエル、HyperText Markup Language)の略で、ウェブページを作成するために開発された言語です。

Webサイト制作でよく使うHTMLタグ

<p>タグ

<p>タグは段落を表す際に使用します。
個人的に一番使う頻度が高いと思われる。
ちなみにpとはParagraph(段落)の略です。

 

 

<h1>〜<h6>タグ

<h1>〜<h6>タグは見出しを付ける際に使用します。
数値が小さい程ランクが高くなります。
これもよく使いますね。
ちなみにhとはHeading(見出し)の略です。

 

 

<img>タグ

<img>タグは画像を表示する際に使用します。
src属性で画像ファイルのURLを指定します。
alt属性には、画像の変わりのテキストを指定します。
アクセシビリティが高まりますので、必ず入れておきましょう!
こちらもよく使います。
ちなみにimgとはImageの略です。

 

 

<br>タグ

<br>タグは改行する際に使用します。
何気によく使います。
ちなみにbrとはBreak(改行)の略です。

 

 

<a>タグ

<a>タグはリンクを設定する際に使用します。
href属性にリンク先のURLを指定します。
target属性に_blankを指定すると別ウィンドウ(別タブ)で開く事ができます。
これもかなりよく使いますね。
ちなみにaとはAnchor(アンカー)の略です。

 

 

<div>タグ

<div>タグは特別な意味を持たないブロック要素です。
スタイルシートでスタイルを適用する際やJavaScriptのスクリプトを適用する際によく使います。
ちなみにdivとはDivision(区切り)の略です。

 

 

<span>タグ

<span>タグは特別な意味を持たないインライン要素です。
スタイルシートでスタイルを適用する際によく使います。
ちなみにspanとはSpan(期間)の意味です。

 

 

<ul>タグ、<li>タグ

<ul>タグは順序のないリストを表示する際に使用します。
リストの各項目は <li>で記述します。
これもよく使いますね。
ちなみにulとはUnordered List(順序のないリスト)の略です。
liは List(リスト)の略です。

 

 

<ol>タグ、<li>タグ

<ol>タグは順序のあるリストを表示する際に使用します。
リストの各項目は <li>で記述します。
これはたまーにしか使いませんが、一応載せておきます。
ちなみにolとはOrdered List(順序のあるリスト)の略です。
liは List(リスト)の略です。

 

 

<dl>タグ、<dt>タグ、<dd>タグ

<dl>タグは定義リストを表す際に使用します。
<dl>~</dl>の中に、<dt>タグで定義する用語を、<dd>タグで定義の説明をします。
この辺もけっこう使いますね。
ちなみにdlとはDefinition List(定義リスト)の略です。
dtとはDefinition Term(定義する用語)の略です。
ddとはDefinition Description(定義の説明)の略です。

 

 

<table>タグ、<tr>タグ、<th>タグ、<td>タグ

<table>タグは表を作る際に使用します。
<table>~</table>の中に、<tr>〜</tr>でテーブルの行を記述し、その中に<th>タグや<td>タグでセルを記述します。
この辺はたまに使いますね。
ちなみにtableとはTable(表)の意味です。
trとはTable Rowの略です。
thとはTable Headerの略です。
tdとはTable Dataの略です。

 

 

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

 

<html>タグ、<body>タグ、<head>タグ、<header>タグ、<nav>タグ、<footer>タグあたりもページ毎に使うのですが、今回は省かせて頂きます!
以上でWebサイト制作でよく使うHTMLタグ17選!でした。

topへ戻る