takuizmです！
ゼロから実践するこのシリーズは、
30代の初心者がHTML入門したアウトプットです。
第１回目はHTMLの基本構造について
学びました。
| takuizmです！最近知識への欲求がすごくて、HTMLのお勉強をはじめました。HTMLやCSSなどのいわゆるフロントエンド系の技術とは全く縁のない人生です。SEですが、早い段階からPM的な仕事も多く技術的な部分がほぼ素人のためこのままでは駄目だと重い腰を上げてみました。超初心者の勉強アウトプットですが、同じタイミングで学習されている方いましたら、一緒に頑張りましょう！！連載する？予定です。HTMLの基本知識まずはHTMLの概念というか基礎的な部分を見ていきましょう。普段当たり前のように見ているWEBページは、そのほとんどが... 32歳の初心者が実践するゼロからのHTML入門：HTMLの基本構造を理解する - With The Family |
今回は<body>タグ内に記述する、
ヘッダータグ（見出し）について
学習します。
<h1>や<h2>などのタグですね。
それでは一緒に頑張りましょう！
Contents
h1〜h6はどんなタグなのか
h1〜h6は、見出しタグとも呼ばれます。
（hはheaderを表すのでヘッダーとも表現されます。）
h1が一番大きい見出しで、
番号が大きくなるごとに
小さな見出しになっていきます。
数字が小さいほど大きな見出しで、
数字が大きいほど小さな見出しである
と覚えておきましょう。
HTMLでの記述と使用例
見出しタグはHTMLで記述すると
以下の通りとなります。
ではそれぞれがどのような表示になるか
確認してみましょう。
上は実際にhtmlでh1〜h6を
記述して表示させています。
文字の大きさが違うことが
はっきりとわかると思います。
これはCSSなどを使用していません。
ブラウザが勝手に文字を装飾しています。
h1〜h6タグの使用ルール
見出しタグには、いくつかのルールが
存在しています。
SEO効果の面も多少あるそうですが、
わかり易い文章を記述するのに見出しタグは
効果的です。
見出しタグを使ってきれいな文章を書きましょう。
各タグの順序性
h1〜h6は必ず順番に使用します。
たとえばh6をいきなり使用して、
文章を始めるのはNGです。
あくまで論理的な文章を記述するための
見出しなので、しっかりh1から記述するよう心がけます。
見出しのためを意識する
SEO効果が謳われていることもあり、
キーワードを詰め込みたくなりますよね。
しかし、最近のGoogleのクローラーは
大変頭が良いようなので、意図的なキーワード詰めは
嫌われる可能性があります。
ですので、わかりやすい文章を表現するための
見出しとして使用し、コンテンツのクオリティを
上げることを意識しましょう。
必ず文章を記述する
「見出しタグ」という名前の通り、
それだけでは文章として成り立ちません。
見出しタグだけにはせずに。
その配下には必ず文章を記述しましょう。
h1タグは意識しなくていい？？
h1タグは１記事中に１回のみ使用可能です。
１記事中に１回。。。
記事中に１度だけ使用される大きな見出しって
なんだと思いますか？？
タイトルですね！！
ということは、
記事の本文中はh2から見出しを降っていく形になります。
僕はこれをかなり勘違いしていました。
wordpressの記事投稿でにおいて
タイトルを入力したら、h1は勝手に作られています。
ですので記事本文の最初の見出しはh2から
記述するようにしましょう。
僕はこれを完全に間違えており、
本文中もh1から振ってしまっていました。。。
最後に
今回はh1〜h6までの
見出しタグについて学習しました。
h1タグの使いみちなんかは、
意外と盲点だったりして個人的に勉強になりました。
自分でhtmlを記述してみて、
h1〜h6のそれぞれの変化を確認してみると
いいかもしれません。
では次回も一緒に頑張りましょう！！