ブログ

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

本稿では、HTMLの基礎中の基礎を少し解説します。

初心者の方にもこれだけは押さえておいていただきたいと思う、学習必須のHTMLタグについてです。

これさえ覚えておけば、例えば自分が持つサイトの修正なんかも容易にできるようになります。

<p>タグ

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

■使用例

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

■表示例

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

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

<br>タグ

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

■使用例

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

■表示例

文章をここに記述します。
改行後。

文章をここに記述します。
改行後。

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

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

■使用例

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

■表示例

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

<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/">Google検索</a>はこちら
<a href="https://www.yahoo.co.jp/" target="_blank">Yahoo!検索</a>はこちら

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

<img>タグ

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

■使用例

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

■表示例
画像の説明

記事を書いた人

杉直樹の写真

杉 直樹 / ウェブ制作者

1990年2月 福岡県柳川市生。学習院大学在学時よりウェブ制作経験を積み、卒業後2014年(24歳時)から独立し、クラウドソーシングを中心に活動。300件以上の様々な制作実績を持つ。シンプルで普遍的なデザインの中規模コーポレートサイト制作業務が最も得意。格安の制作費用が売り。

一覧へ戻る