Loading

プレオ日誌

blog

HTMLマークアップって?

みなさんこんにちわ。
フロントエンジニアを担当しています。 上西です。

さっそくですが、今回はHTMLマークアップについてお話ししていこうと思います。

現在、色々なツールを使って誰でも簡単にホームページを作れる時代になってきました。
HTML言語もプログラミング言語の中では比較的、覚えやすい言語なので使える人も増え、たくさんのホームページが世に出ています。

また、ホームページ自体はHTML言語以外にもCSSやJavascriptなど、さらに上級言語を使ってクオリティーを上げることができます。

しかし、比較的覚えやすい言語としているHTMLこそが、一番難しい言語なのではないかと私は考えています。
それでは、HTMLマークアップについて少しご紹介していきましょう。

HTMLマークアップとは?

そもそもマークアップ言語とは…

マークアップ言語(マークアップげんご、英: markup language)は、視覚表現や文章構造などを記述するための形式言語である。 テキストファイルであることが多いが、バイナリデータによる形式もある。 このように、記号を交えた「タグ」を使うものが多い。“

マークアップ言語 – Wikipedia

https://ja.wikipedia.org/wiki/マークアップ言語

つまり「視覚表現」「文章構造」をコンピューターが認識できるようにタグを使い文章等に意味を持たせることです。
わかりやすく言うと、本の表紙には大抵タイトルが書いてあると思います。
それをコンピューターが認識すると、タイトルは著作者名や本の説明と同じ「文章」としてしか認識できません。

そこで、タイトルにタグを付けてあげます(HTMLであれば<h1>タイトル</h1>)これで、この文章は他と違いタイトル(見出し)ですとコンピューターに認識させることができます。

このように、それぞれにタグを追加して上げることでコンピューターへ「視覚表現」「文章構造」を認識させることができるようになります。

HTMLにマークアップがなぜ必要なのか

上記でお話ししたような、コンピューターに認識させるためなのですが、HTMLに関しては特にSEOの部分で使われます。

マークアップをしっかりと記述することで、そのホームページが「言いたいこと」「伝えたいこと」を明確にしgoogleや色々な検索エンジンの、検索結果により理想的な形で表示されます。

ここでマークアップの記述を間違った書き方にすると、例えば「熊本のイタリアン」というお店があったとします。一番伝えたいことがお店の名前だとするとtitleタグやh1タグには「熊本のイタリアン」という項目が入ります。

しかし、このタグに別のテキストが設定されていたらどうでしょう。

当然、「言いたいこと」「伝えたいこと」と実際のホームページの中身にズレが生じます。
そうなると、このままコンピューターが認識してしまいますので、本来の結果がでません。
ホームページ運営されている方しだいでは、売り上げにも影響が出てしまうことも当然あります。

そのくらい、ただHTMLが書けるからというだけで、ホームページ作ってしまうと思ったような結果が得られなくなっていきます。

 

よくあるタグの違い

今回は例として2つあげます。

1, <b><strong>

よく間違われますが、この<b>タグと<strong>タグは見た目上どちらも太文字になります。
しかしそれぞれ意味は違います。
簡単に説明すると、

<b> :  キーワードや名前など他と区別する際に使用する。重要であるかどうかの強調の役割はない。
<strong> :  キーワードや名前など他と区別する際に使用する。重要であるかどうかの強調の役割がある。

とのこと。
つまり、見た目上は同じだが太文字になるからといって<strong>タグを使うと特に重要でないところがコンピューターに「重要度が強い」と認識されてしまう。

結果的に、そのホームページの方向性にも大きく左右してしまいます。

2, <table>

最近ではそこまで見なくなりましたが、まだまだ「なぜそこに?」という使い方をしているホームページは多い気がします。

<table> :  表を作成するさいに使います。

そうです。「表」なのです。
並びが綺麗に整列するからtableタグ使っちゃえ… ではマークアップの意味がありません。
使う際は、そこがしっかりと表になっているかどうか、表として表現したいのかを考えて使いましょう。

いかがでしたでしょうか、長年ホームページ制作に携わってきましたが、やはりHTMLは奥が深く他の言語より難しく感じます。

HTML5になりタグも増え、さらにまだまだ進化を遂げています。

ホームページ制作に使えるツールもまたどんどん増えていくでしょう。
その中で、今回お話ししましたマークアップをどれだけ意識して、制作をしていくかで、そのホームページのもつ意味、何を伝えたいのか、そしてそれがSEOとしてしっかり認識されるのか、が決まります。

今回の一言「デザインや視覚要素はCSS/javascriptで、HTMLはマークアップに全力投球!」

それでは、伝えたいことが伝わるホームページを作っていってください^^

上西 孝康

この記事を書いた仲間

上西 孝康 フロントエンドエンジニア

ご質問などお気軽にお問い合わせください

お電話でのお問い合わせ

096-312-3430

月〜金曜日(祝日除く) 9:00〜18:00

メールでのお問い合わせ

お問い合わせフォーム >

デザイン相談会
デザイン相談会を行っています。毎週月曜開催・予約制

これから開業する方はもちろん、事業主の方も大歓迎です。デザインやWEBサイト、ブランディングなどについて今現在お困りのことがあればお気軽にご相談ください。プレオデザインでお役に立てることがあれば嬉しいです。

相談会に申し込む >

TOPへ戻る