hタグで文字を太くするのやめよう

ブログやウェブサイトを見ていると時たま不思議な使い方をしているタグを見かけるのです.
かく言う私も間違った使い方をしていたものがありました.
そう,hタグです.



MarkdownとHTML


今回はウェブページやブログを書くときに使用する言語なんだなって思ってもらえれば結構です.
どちらもマークアップ言語というプログラミング言語に分類されます.

マークアップ言語(マークアップげんご、英: markup language)は、組版指定に使われる言語と言える[1],[2]。視覚表現や文章構造などを記述するための形式言語である。テキストファイルであることが多いが、バイナリデータによる形式もある。 “英: markup”という語は英語圏の出版業界で著者、編集者、印刷者の間で指示を伝える方法を意味していた(語源を参照)。 wikipedia-『マークアップ言語』


HTML(HyperText Markup Language)はハイパーテキストというものを記述するための言語です.ウェブページを作るときに使用されます.タグ(識別のための目印)でプレーンテキストを囲み要素とします.

markdownはホームページを簡単に書くための言語で,HTMLのタグや記法の一部を使用することができます.githubのREADMEや,はてなブログにも使われます.

私のブログはファイル形式がMarkdownになっています.しかし,Markdownで記述をするときの特有の記法(空白2つで改行,一部のタグを書くときに改行を入れる必要があるなど)に慣れず,結局HTMLのような記述しています.



「hタグ」ってなんだ?

では,今回の本題に入ります.
最初に述べられていたhタグとは何でしょう.
h1~h6まであるので,実際に書いてみます

コード

<h1>文字 or # 文字
<h2>文字 or ## 文字
<h3>文字 or ### 文字
<h4>文字 or #### 文字
<h5>文字 or ##### 文字
<h6>文字 or ###### 文字


表示結果

文字

文字

文字

文字

文字
文字


ヤッターモジガオオキクナッター

そう思っていませんか?
私はそう思っていました.

太くしたい文字を<h3>で成形したりして…

(hタグで文字を大きくするのは)駄目です

hタグは「見出し」に使われるものです.
別にいいじゃんと思う人は少なくないと思いますので,それについて解説します.


どうして「hタグ」が使われるの?

ページにタイトル・見出し・小見出しがはっきり書いてあると読みやすいですよね.しかし,hタグによってページが見やすくなるのは我々ユーザーだけではないのです.
ユーザーは何か調べたいことがあるときに検索サイトの検索窓にキーワードを打ち込みます.
「マークダウン インラインコード 表示されない」
というのはこの記事を書いたときの最も新しい検索ワードです.

hタグを正しく使うことでSEO対策になります.
SEO対策とは,検索サイトの検索結果に表示させやすくするためのものだと思ってください.
検索エンジンがページの内容を理解するときに参考にしているものがページ構成です.中でも,ページのタイトルともいえるh1,ページの内容となる見出しのh2は正しく使わなければなりません.
正しくタグが使われたページというものは検索エンジンにも評価してもらいやすくなり,検索結果の上位に表示されやすくなります.自分の書いたページを見てもらうためにはとても大切なことですね.


じゃあどうやって文字を太くするんだい?

ここまで読んで,hタグで文字を太くしてはいけないということは分かっていただけたかと思います.
しかし,hタグが文字を太くする手段だと考えていた人は,文字を太くする手段を失ってしまいました.
ここで文字を太く表示させる方法をいくつか紹介します.

b要素・strong要素

<b><strong>で囲まれた要素は太字で表示されます.
b要素は単純に太字に,strong要素は文字を強調したいときに使用します

コード

文字が<b>太字</b>で表示されます<br>
文字が<strong>太字</strong>で表示されます

表示結果

文字が太字で表示されます
文字が太字で表示されます


CSS

cssはHTMLやMarkdownの見た目を整えるものです.
idやclassを設定することで,それに対応した部分の見た目を変えることができます.

今回は太くしたい部分を<a id="bold1"></a>で囲みます. <style></style>の中にどのように変えるかを記述します.

コード

<style>
#Bold1{
font-weight: bold;
}
</style>
文字が<a id="Bold1">太く</a>なります<br>

表示結果

文字が太くなります


文字を太くしたいときはこれらを使うようにしましょう.


まとめ

見出し以外でhタグを使うとユーザーにも検索エンジンにも見にくくなってしまいます.他のタグ,CSSを使いましょう.

ウェブページ(ブログ)を書きましょう.