HTMLタグの一覧

改行の<br />と段落分けの<p></p>

改行をするときは<br />を、段落分けをする際には<p>を使用します。<br />は改行したい箇所で単体で使用し、pは開始タグと終了タグの両方<p></p>をセットで囲います。
段落分け<p>タグと改行<br />の違い


リンクのhtmlタグ <a href=""></a>

リンクする際には a href のタグを使います。外窓で開く場合は target="_blank" を、アンカーテキストの転送を無効にする場合は rel="nofollow" を挿入します。
リンクのhtmlタグ <a href=""></a>


文字の太さと強調 <b>と<strong>

単純に文字を太くするには<b></b>タグで囲い、論理的にも意味を強調する場合には<strong></strong>タグを使いましょう。strong は意味を強調するタグですので、SEO対策上、多用するのは避けましょう。
<b>と<strong>タグの違い


画像を表示する <img src=

ホームページに画像を表示するには、img src=のhtmlタグを使用します。alt属性には画像の説明文を記述し、borderで枠線なども指定することができます。
<img src=は画像を表示するhtmlタグ


見出しを記述する h1,h2タグ

見出し部分は、h1からh2、h3と順番に記述していきましょう。また、h1タグとタイトルタグ<title>については、同一の内容か、もしくは関連した内容のものを記述することをおすすめします。
見出しを記述する h1,h2タグ


箇条書きでリスト化する <ul><li>

箇条書きにしてリスト化するにはul、liのhtmlタグを使います。また、番号付きでリスト化するには、ul、liではなく、ol、liを使うようにしましょう。グローバルナビゲーションやフッターで横並びにリスト化する場合は、スタイルシートに display: inline; を記述します。
箇条書きリストのhtmlタグ <ul><li>


表を作成する <table>タグ

表を作成するにはtableタグを使用します。tableタグは、trとtdとを組み合わせて行と列を指定し、表を作成することができます。
<table>は表作成のhtmlタグ


横線や破線を引く <hr />タグ

コンテンツ内の文中などでワンポイント的に横線を引くには<hr />タグを使います。DTDが xhtml で記入する場合は<hr />タグと書きます。レイアウトとしての区切りで線を引く場合は、スタイルシート側で border を使用するようにましょう。
<hr />タグのhtmlとCSS


下線を引く <u>タグ

下線(アンダーライン)を引く場合は<u>タグを使います。軽く強調したい箇所やスペルミスの部分などで使いますが、クリックできるリンクと混同されやすいため、できるだけ使用するのは避けた方がよいでしょう。
下線を引く <u></u>タグ


ブロック分けのhtmlタグ <div></div>

ホームページをブロック分けして、その範囲で適用される文字の大きさや色彩、背景の色彩などを指定します。div に個別のidをふってスタイルシートの方で対応させるとよいでしょう。
<div>タグはブロック分けのhtml


HTMLタグに直接スタイルシートを指定する style=

スタイルシートは外部に.cssファイルを作成して独立させるのが一般的ですが、その箇所にだけ適用する場合には、そのhtmlタグにstyle属性を指定して直接記述することが出来ます。外部スタイルシートが使えない携帯サイトで使われることが多いです。
HTMLタグにstyle属性の指定方法 style=


背景色の指定 <div style="background-color:#ffffff;"></div>

ホームページの背景色は、background-color を使って指定しましょう。明るいパステルカラーを指定すると目が疲れてサイトが見にくくなるので、淡い色彩の背景色にしておくのがぶなんです。
background-colorで背景色の指定方法


文字色の指定 <span style="color:#ff0000;"></span>

文字の色彩やその背景色を指定する際には span style を指定しましょう。div style の場合はその前後で改行されますので、文中の文字単位では指定できませんが、span style の場合はその前後で改行されません。
span styleで文字色と背景色の指定方法


ページのメタ情報を記述する <meta タグ

メタ(meta)情報というのは、「高次の」とか、「上位の」といった意味になりますが、適切に記述されていないと文字化けしてしまったり、検索エンジンでヒットしなかったりします。重要度で上位にあたる大切なhtmlタグです。
<meta name=でページのメタ情報を記述


コメントを挿入する <!-- -->

コメントタグ<!-- -->で囲った箇所はサイト上では表示されません。主に、サイト運営者が自分用、あるいは共同作業者へのメモとして記述するために使います。
コメントを挿入するhtmlタグ <!-- -->


HTMLソースの書き方

HTMLソースにはインデントを挿入して字下げしたり、あるいはコメントアウトするなどして、他の人にも見やすく整形しながら書いていくとよいでしょう。
HTMLソースの書き方