よく使うHTMLタグ・<要素>編

このページでは、よく使われるHTMLタグ(独断と偏見どっさり)を紹介。
簡単に使い方なども記しておきます。

HTMLに関する用語などもちょぼちょぼ載せておきます。

頭文字

A/B/C/D/E/F/G/H/I/J/K/L/M
N/O/P/Q/R/S/T/U/V/W/X/Y/Z

A

<a>

aは、anchor(アンカー)の頭文字です。
<a>は、テキスト文字や画像にリンク機能を付けることが出来ます。
基本的には
<a href=”リンク先”>~</a>
の形式で記述して使います。
~のところにテキスト文字や画像(<img>)を挟み込むと、
挟み込まれたテキスト文字や画像にリンク機能がつきます。
ちゃんと終了タグの</a>で閉じないと、
以下に続く関係ないテキスト文字や画像全てにリンク機能が付いてしまいます。

<abbr>

fasdfa

<address>

<area>

<article>

<aside>

<audio>

B

<b>~</b>

<b>~</b>で挟んだとこが太字になります。
<b>は「区別」させたいときに使います。
強調したいキーワードは重要性を示す<strong>を使いましょう。

<base>

相対パスの基準URIを指定するときに使います。
基準がいくつもあったらダメなので、
<head>~</head>の間に一回だけ使えます。

<bdo>~</bdo>

dir属性で文字の表示方向を変えます。
右から左(right-to-left)に表示させるならdir=”rtl“と記述
左から右なら・・・デフォルトですね。

<blockquote>~</blockquote>

引用文であることを示します。
引用文として他人のサイトからコピーした文章を、
そのまま自分のサイトに張ると、検索エンジンがいい顔をしません。

<blockquote>で引用文であることを示しておけば、
マイナスはありません。
何のプラスもありませんが。

1行くらいの短文なら<q>タグを使います。

<body>~</body>

<body>~</body>の間に挟まれたところが、ブラウザで表示される本体です。

<br>

改行の指示。終了タグ不要。
空行をあけるために使わないほうがいいとされています。
SEO上よくないみたい。
私は空行をあけるとき、<br>を使っちゃてたので反省。
空行をあけるときはsccでmarginの利用を推奨します。

<button>~</button>

ただのボタンをおきます。
ただのボタンですが、いろいろ機能を持たすことが出来ます。

C

<canvas>~</canvas>

図形を描く時に使いますが、ちょっと大変。
画像編集ソフトで描いて<img>で出力したほうが楽です。
HTML5から追加

<caption>~</caption>

テーブル(表)タグ<table>~</table>の中ににキャプション(見出し)をつける
見出しなので<table>~</table>の中の一番上に記述しましょう

<cite>~</cite>

何かしらの作品のタイトルであることを示します
作品タイトル以外では使わないほうが良いでしょう

<code>~</code>

<code>~</code>の範囲がプログラムコードであることを示します

<col>

テーブル表<table>のデザインを縦列でまとめての指定する
必ず<colgroup>~</colgroup>の中に配置します
終了タグはありません

<colgroup>

テーブル表<table>の縦列(カラム)をグループ化します
<colgroup>~</colgroup>は<table>~</table>の中に記述します
記述はキャプション<caption>~</caption>があれば
キャプションのすぐあとに記述しましょう

<command>~</command>

<menu>~</menu>の中に記述して各操作メニューを指定します
HTML5から追加

D

<div>~</div>

divはDivision(ディビジョン、ディヴィジョン)の略。
Divisionはdivide の名詞形で、分割、除法などの意味を持ちます。

<div>タグ事態に意味はありませんが、
スタイルシートでの指定を適用する等するときに、
<div>と</div>で挟まれた範囲を一括りの
コンテナ要素として使用されることの多いタグです。

CSS記述例

.aka{  /*クラスakaに指定*/
background-color:red;  /*背景色を赤に指定*/
width:50%;  /*横幅を50%に指定*/
}

HTML記述例

<div class=”aka”>
あいうえお
</div>

表示結果

あいうえお

E

F

H

<hr>


↑こうゆう水平線を引きます。終了タグは無いです(<hr>のみ)
HTML5からはテーマや話題の区切り、切り替えのときに使うのが好ましいとされてます。

I

<img>

<img>は埋め込み画像(Embedded image)を示します。
必須属性のsrcで画像の住所(URL)を指定して画像を表示させます。
終了タグは不要です。

<img src=”画像のURL” width=”横幅” height=”縦の高さ” title=”画像のキャプション情報になります”
alt=”画像が表示出来なかった時の出す文字”>

K

L

<li>

<li>は、リスト表示するときに使います。
<li>と</li>で挟んだテキストの前に・を突けて強制的に改行します。
・を指定する画像に変えることも出来ます。

li.tyekku1 {                 /*リスト要素のクラスがtyekku1のとき*/
list-style: ; url(https://●●●●●●●●●●●.jpg) /*画像URLを指定*/
}
<ul>
<li>にんじん</li>
<li class=”tyekku1″>ジャガイモ</li>
<li>たまねぎ</li>
</ul>
  • にんじん
  • ジャガイモ
  • たまねぎ

M

N

O

P

Q

<q>

引用であることを示します。
引用文として他人のサイトからコピーした文章を、
そのまま自分のサイトに張ると、検索エンジンがいい顔をしません。

<q;で引用文であることを示しておけば、
マイナスはありません。
何のプラスもありませんが。

<q>は1行程度の短文で使いますが、
長文は<blockquote>タグを使うのが好ましいです。

R

S

T

U

V

W

記号

<!−−★−−>

コメントアウト。
<!−−と−−>で挟まれた★の所は基本的に無効になります。
表示もされません。
ブラウザに表示させたくない覚え書きを記したり、
タグ等の記述を消さないで無効にしたりするときに使います。
<!−−と−−>の間に、半角のハイフン(-)を使うと
機能しないときもあるので気をつけましょう。
特別な記述やブログサービス等で、効果を発揮する意味のある場合もあります。

コメントを残す

メールアドレスが公開されることはありません。

AlphaOmega Captcha Classica  –  Enter Security Code