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タグ
- 画像の遅延読み込み loading="lazy"
- <imgタグにloading="lazy"属性を指定することで、画面をスクロールして実際に表示されるまで画像の読み込みを遅延できます。これにより、すぐに使用しない画像はダウンロードされなくなり、ページ表示の高速化に効果があります。
- loading="lazy"による画像の遅延読み込み
- 見出しを記述する <h1>、<h2>タグ
- 見出し部分は、h1からh2、h3と順番に記述していきましょう。また、h1タグとタイトルタグ<title>については同一の内容か、もしくは関連した内容のものを記述することをおすすめします。
- <h1>、<h2>タグは見出しを記述するHTML
- 箇条書きでリスト化する <ul><li>
- 箇条書きにしてリスト化するには ul、li のhtmlタグをセットで使います。また、番号付きでリスト化するにはul、liではなく、ol、liを使うようにしましょう。グローバルナビゲーションやフッターで横並びにリスト化する場合はスタイルシートに display: inline; を記述します。
- 箇条書きリストのhtmlタグ <ul><li>
- 用語説明をリスト化する <dl>、<dt>、<dd>
- 「用語と定義」の用語集や語彙リスト、あるいは「質問と回答」のQ&Aなど、何らかの説明リストを作成する際には<dl>タグを使用します。
- <dl>は用語説明をリスト化するHTMLタグ
- 用語を定義して説明する <dfn>
- 用語を定義して説明する際は<dfn>タグを使用します。また、この<dfn>タグは略語の正式名称を示す<abbr>と合わせて使用されることが多いです。
- 定義<dfn>タグと略語<abbr>の使い方
- 表を作成する <table>タグ
- 表を作成するには table タグを使用します。tableタグは tr と td を組み合わせてセットで使用し、行と列を指定することで表を作成することができます。
- <table>は表作成のhtmlタグ
- 横線や破線を引く <hr />タグ
- コンテンツ内の文中などでワンポイント的に横線を引くには<hr />タグを使います。DTDが xhtml で記入する場合は<hr />タグと書きます。レイアウトとしての区切りで線を引く場合は、スタイルシート側で border を使用するようにましょう。
- <hr />タグのhtmlとCSS
- 下線を引く <u>タグ
- 下線（アンダーライン）を引く場合は <u> タグを使います。軽く強調したい箇所やスペルミスの部分などで使いますが、クリックできるリンクと混同されやすいため、できるだけ使用するのは避けた方がよいでしょう。
- 下線を引く <u></u>タグ
- ブロック分けのhtmlタグ <div></div>
- ホームページを div でブロック分けして、その範囲で適用される文字の大きさや色彩、背景の色彩などを指定します。div に個別のidをふってスタイルシートの方で対応させるとよいでしょう。
- <div>タグはブロック分けのhtml
- HTMLタグに直接スタイルシートを指定する style=
- スタイルシートは外部に.cssファイルを作成して独立させるのが一般的ですが、その箇所にだけ適用する場合には、そのhtmlタグに tyle属性を指定して直接記述することが出来ます。外部スタイルシートが使えない携帯サイトで使われることが多いです。
- 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 利用します。
- span styleで文字色と背景色の指定方法
- ページのメタ情報を記述する <meta タグ
- メタ（meta）情報は「高次の」とか、「上位の」といった意味になりますが、適切に記述されていないと文字化けしてしまったり、検索エンジンでヒットしなくなります。重要度の高いhtmlタグのため、適切に記述するようにしましょう。
- <meta name=の説明文やキーワードの書き方
- ユーザーの入力データを送信する <formタグ
- <formタグは、ユーザーからの入力データを送信するためのHTMLタグです。<formタグ自体はそれほど難しくはないものの、サーバーサイドのPHPファイルやデータベースとの連携も必要になるため、難易度が高くなる傾向があります。
- <formは入力データを送信するHTMLタグ
- コメントを挿入する <!-- -->
- コメントタグ <!-- --> で囲った箇所はサイト上では表示されません。主に、サイト運営者が自分用、あるいは共同作業者へのメモとして記述するために使います。
- コメントを挿入するhtmlタグ <!-- -->
- HTMLタグをそのまま表示する方法
- HTMLタグをサイト上でそのまま表示する際、「<」や「>」などはそれ自体がHTMLタグを構成する特殊文字のため、これらを実体参照に変換してエスケープする必要があります。
- 実体参照でHTMLタグをそのまま表示
- HTML5とXHTML 1.0の違い
- 「html5」ではタグに意味的な要素が加えられており、より「セマンティック」なホームページを作成することが可能になっています。このセマンティックというのは「意味の」とか「意味論的な」を表す言葉ですが、そのタグの内容が何を意味するものなのかを明示できるようになりました。
- HTML5とXHTML 1.0の違い
- アウトラインを明示する <section>
- XHTMLでは「h1～h6」タグを使用することで文章のアウトラインを暗黙的に示すことができましたが、HTML5の<section>タグを使えば、アウトラインを意図的に明確に示すことができます。
- <section>はアウトラインを明示するタグ
- SNSでの表示を最適化 <meta property="og:
- FacebookやTwitterなどのSNSで自サイトがリンクシェアされた際、OGP関連のmetaタグを設定しておくと画像や説明文などが綺麗に表示されます。「200px × 200px」以上のOGP画像を設定しておくとよいでしょう。
- OGPのmetaタグでSNSに最適化
- モバイル環境での閲覧を高速化 「AMP HTML」
- AMPは、Googleが中心となって開発されたモバイル環境でのサイト閲覧を高速化するためのオープンソースプロジェクトです。「AMP HTML」はW3CのHTML5とほぼ同様ですが、画像の<amp-img>タグなどで多少の違いがあります。
- AMPページの作り方
- URLの正規化 <link rel="canonical"
- <link rel="canonical"のタグは正規ページを明示する際に使用します。同じ内容なのに重複したページが存在する場合、検索エンジンはどちらを優先して表示させればよいのか分かりなくなるため、カノニカルタグでURLを正規化しておくとよいでしょう。
- <link rel="canonical"でURLを正規化
- プログラムのコードを記述する <pre><code>
- <code>と<pre>でそれぞれ役割は違いますが、HTMLタグなどのプログラミングのコードをサイト上で表示させる際は<pre><code></code></pre>を使用するのが一般的です。
- <pre><code>でプログラムのコードを表示
- インラインSVG
- SVG画像はXMLベースのマークアップ言語ですが、HTMLタグとしても機能するため、コードをHTMLファイルに直接記載して画像を表示することができます。
- SVG画像をサイトで使用する方法
- プログラミングスクールでの習得
- HTMLとCSSは独学でも習得が可能ですが、プログラミングスクールを利用して体系的に学んだ方が習得する知識の漏れがなく、効率的に習得することができます。
- プログラミングスクール一覧