blog

ブログ

初心者用! これだけは押さえておきたいHTMLタグ

本稿ではHTMLの基礎を解説する。初心者の方にもこれだけは押さえておいていただきたいと思う、学習必須のHTMLタグだ。これさえ覚えておけば、例えば自分が持つサイトの修正なんかも容易にできる。

目次

<p>タグ

「Paragraph」の略で、段落を意味する。段落を指定するためのタグ。
※一般的には、改行しつつスペースも開くイメージ。

■使用例

<p>文章をここに記述します。</p>
<p>文章をここに記述します。</p>

■表示例

文章をここに記述します。

文章をここに記述します。

<br>タグ

「Break」の略で、改行を意味する。段落を分けるほどではないが、視覚的に改行したほうが読みやすいと思われる場合はbrで改行しよう。

■使用例

<p>文章をここに記述します。<br>文章をここに記述します。</p>
<p>文章をここに記述します。<br>文章をここに記述します。</p>

■表示例

文章をここに記述します。
文章をここに記述します。

文章をここに記述します。
文章をここに記述します。

<h3>、<h4>、<h5>タグ

「Heading」の略で、見出しを意味する。文章の見出しを表すタグ。

■使用例

<h4>見出しをここに記述します</h4>

■表示例

見出しをここに記述します

<strong>、<b>タグ

strongタグは、重要な文章を指定するときに使用する。
bタグは、単に文字に装飾を加えたいだけのときに使用する。
※一般的には、どちらも太字になる。

■使用例

<strong>非常に重要な文章</strong>をここに記述します。
<b>非常に重要な文章</b>をここに記述します。

■表示例
非常に重要な文章をここに記述します。
非常に重要な文章をここに記述します。

<span>タグ(スタイリング)

文字の色を変更する際に使用する。色は「red」「blue」「green」「#fff000」のように指定する。

■使用例

<span style="color:red;">非常に重要な文章</span>をここに記述します。
<span style="color:#fff000;">非常に重要な文章</span>をここに記述します。

■表示例
非常に重要な文章をここに記述します。
非常に重要な文章をここに記述します。

<a>タグ

クリックするとページが移動する、ハイパーリンクを指定する際に使用する。targetを「_blank」と指定したら、クリック時に別タブで開く。

■使用例

<a href="https://www.google.co.jp/#gws_rd=ssl">Google検索</a>はこちら
<a href="https://www.google.co.jp/#gws_rd=ssl" target="_blank">Google検索</a>はこちら

■表示例
Google検索はこちら
Google検索はこちら(別タブで開く)

<img>タグ

画像を表示するときに使用する。「src」とはsourceの略で転送元という意味。

■使用例

<img src="画像のURL(画像パス)" alt="画像の説明">

■表示例
画像の説明

一覧へ戻る