トップページ > ブログ > 【HTMLを学ぶ】タグの意味を覚えて使ってみよう!

BLOG

ブログ

UPDATE:2020.6.16

CATEGORY

【HTMLを学ぶ】タグの意味を覚えて使ってみよう!

さやさんです。

皆さんはHTML(エイチティーエムエル)という言葉を耳にしたことがありますか?

HTMLはHyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、
ウェブページを作成するために開発された言語です。
つまり今見ているこのページもHTMLで作られているのです。

また、普段皆さんが何気なく更新しているブログなどウェブ上で公開するものの多くがこのHTMLで作られています。

HTMLは通常、ウェブページを閲覧しているときに目にすることはありません。
目に見える部分はテキストや画像、それに動画や色の装飾などですよね。
しかしそれらを表示させるのにHTMLが多く使われています。

例えばブラウザ上をマウスで右クリックして「ページのソースを表示」というメニューを選択すると、
なんだか難しい英語がずらっと表示されませんか?
それがHTMLです。

また、よく見ると画面上に表示されている文章を見つけることが出来ますが、
一方で画面上には表示されていない、普段は目に見えない部分が非常に多いことに気づくと思います。

とくに多いのは<>で囲まれた謎の英語ですよね。
これらはタグと呼ばれるHTMLを構成する大事な部分で、骨組みのようなものです。
ウェブページはタグを使ったHTMLで骨組みが作られ、
cssと呼ばれる装飾によって見やすくデザインされたページが表示されているのです。

ウェブページの基本的なことは理解できたでしょうか!

今回は通常ブログ等を更新するときに多用されるHTMLのタグを、覚えやすいように意味も併せてご紹介します。


<a>タグ

リンクを設置するときによく見かけるタグ。
anchor(アンカー)の略で、アンカータグと読みます。
(リンクの出発点と到達点を指定するため、アンカーと呼ばれるのだと思います。)

下記のhref属性を設定することでアンカーテキストとなり、リンクが作成されます。


href属性

hypertext referenceの略。エイチレフと読みます。
hypertext referenceは「ハイパーテキストの参照」という意味です。
意味通りaタグの参照先などを設定します。


<h1>~<h6>タグ

heading(見出し)の略で、上位の見出し毎に1~6までを使い分けます。

<h1>はウェブページの最上位の見出しを意味し、
検索エンジンがウェブサイトの内容を把握するために用いられるのでSEOにも影響を与えます。
<h1>は使用回数に制限はありませんが、いくつも使用するとそのページ内の<h1>の重要度が下がってしまうので、
利用は1回に留めておきましょう。(小見出しは<h2>~<h6>を利用しましょう)

<strong>タグ

<strong>タグで囲まれたテキストは重要であることを示します。
ただし、重要だからと言って多くの単語に使用するのは間違った使い方です。
できるかぎりページ内で最も重要なテキスト(結論など)に使いましょう。


<em>タグ

emphasis(強調)の略で、
<em>タグは囲まれたテキストを強調する(アクセントをつける)目的で使用します。
使い方が少し難しいタグなので、例を示します。

・アクセントのない文章
<p> ねこは梅おにぎりが好きだ。</p>
・ねこは様々なおにぎりの中でとくに「梅おにぎり」が好きと強調したい場合
<p>ねこは<em>梅おにぎり</em>が好きだ。</p>

<b>タグ

<b>タグはテキストの重要性や強調目的はなく、単にテキストを目立たせて他と区別させるのに利用します。
<b>タグでテキストを囲うと文字が太字になり他のテキストと区別されるので、装飾目的で利用します。
ただし太字にするタグという意味ではないので、タグの意味を覚えるときは注意しましょう。
(ウェブデザイン系の試験で問題に出ることがあります)


<q>タグ

quotation(引用)の略。
その名の通り引用する文章に対して使います。


<blockquote>タグ

上記の<q>タグ同様、引用する文章に対して使います。
<q>タグとの使い分けは、<q>は短い文章、<blockquote>は長い文章を引用する場合に使います。

<ul>タグ、<ol>タグ

<ul>タグはunordered list(順序のないリスト)の略、
<ol>タグはordered List(順序付きリスト)の略です。
上記は箇条書きのリストを表示する際に利用します。
順序のないリストは<ul>タグを、順序のあるリストは<ol>タグを利用します。

さいごに

HTMLのタグは意味を理解すると使い方がわかるものが多いです。

また、普通にブログを更新するだけではなく
『ブログ記事中の見出しは<h3>や<h4>で記述する』『引用する文章には<q>や<blockquote>を使う』など
タグを使って正しくマークアップをしながら記事を作成するとコンテンツの質が高まります。

HTMLがわからなくてもブログ等は更新できるようになっていることが多いですが、
コンテンツの質を高めることはSEOでも重要な要素なので、ぜひタグを意識して使ってみてください!


Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE