お問合せ先 無料見積もり

APRICOT DESIGN BLOG

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

UPDATE : 2020.06.16

CATEGORY : Sasayama Sayaka

さやさんです。

皆さんは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でも重要な要素なので、ぜひタグを意識して使ってみてください!


    営業マンゼロだから低コスト・高パフォーマンス!東京・長野(長野市、松本市)・金沢(石川県金沢市)でホームページ制作・WEB制作・ネットショップ制作を中心に、ブランディングに繋がるロゴ制作・チラシ・名刺・パンフレット・DM・ショップカード等の各種印刷物、看板・のぼりなどの販促物を制作しているデザイン事務所アプリコットデザイン。

    [長野オフィス-本社-]
    〒381-2246
    長野県長野市丹波島1-805

    [東京ブランチ]
    〒100-0004
    東京都千代田区大手町 2-6-1 朝日生命大手町ビル2F

    [松本ブランチ]
    〒390-0851
    長野県松本市大字島内4619-3 QuintetDoor 1階南室

    [金沢ベース]
    〒920-0831
    石川県金沢市東山1丁目10-1 103

    記事が気に入ったら「いいね」してね。(SNSとは連動してません)

    6+

    この記事を書いた人Who wrote this blog

    Sasayama Sayaka

    向上心ハンパない、ワクワク系WEBエンジニア。写真を撮るのは苦手笑

    無料見積

    まずは無料でお見積もりを作成いたします。
    お気軽にお問い合わせください。

    無料見積もり

    お問合せ先

    クリックで
    事務所一覧が
    開きます

    tel.0120-622835

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

    Copyright © 2020 APRICOT DESIGN All Rights Reserved.