こんにちは、かなきち(@kanakichi0801)です
この記事で紹介する４つのタグを覚えればホームページは作れます。さっそく書いていきます。
この記事を読むと
最低限覚えるべきHTMLタグとその使い方がわかるよ！
divタグとは？
divタグ(ディブタグ)とは特に意味の無いタグです。役割をあげるなら要素をひとかたまりにするという役割があります。divタグを多様化しても、タグ自体に影響力が無いので検索順位への影響はありません。
[divタグの使用例]
<div>divタグで囲まれた文章は特に意味を持ちません</div>
意味のないタグなら覚えることないじゃん！と思うかも知れませんが、意味が無いことがこのタグのメリットです。
タグに意味があるからこそ使って良い場所、悪い場所の制約があります。しかし、divタグには制約がないので、ほぼどこでも使えるというわけです。
SEO対策(検索エンジン最適化)にdivタグを使うことは推奨しませんが、最初のうちはdivタグを使ってでもサイトを多く作ることが近道だと思います。
また、同じタグが並ぶと区別ができないので、区別する方法を説明していきます。
同じ種類のタグには、classをつけよう
class(クラス)とは、[名前]と覚えましょう。
同じタグを区別するためにclassをつけます。
[classの使用例]
<div class="box__blue">青色の箱です</div> <div class="box__red">赤色の箱です</div>
class名には、[日本語]、[全角英数字・記号]、[半角カタカナ]は使用出来ません。そして、class名の付け方にはルールを持たせましょう。
命名規則
一般的に推奨されているルールは、以下になります。
「部位」__「種類(必須)」__「詳細」__「番号(連番)」__「状態」.「拡張子」
接続にはアンダースコア(_)を２つを使います。
classや画像の名前の付け方にも使えるので覚えるようにしましょう。ルールを作ることで他の人がコードを触りやすく更新しやすいコードになります。
部位
該当するエリア名
例)headerやsideなど
<div class="side__title">タイトル</div>
種類
種類は必ず書くようにしましょう。
例)imgやlogoなど
<div class="header__logo">LOGO</div>
詳細
例)機能や形状や色など
<div class="button__red">こちら</div>
番号
例)01や02など
<div><img src="img__01.jpg" alt=""></div>
状態
例)activeやcurrentなど
<ul> <li class="nav__active">たいとる</li> <li>たいとる</li> <li>たいとる</li> <li>たいとる</li> </ul>
idは使わないようにしよう。
classの説明と一緒にidの説明がよく書いてあることがありますが、HTMLで基本的にidは使わないようにしましょう。
どうしてもの場合は使用してもいいという記事もありますが、どうしてもの状態にならないようにコーディングをしましょう。先ほどの命名規則の時と同じで、idを使わないことで、他の人がコードを触りやすく更新しやすいコードになります。
aタグ
以下の記事で使用したaタグです。
blog.mimipen.net
URL(リンク)を貼る目的で使用します。単純に他のタグで代用ができないので、このタグは覚えましょう。
[aタグの使用例]
<a href="[URL(リンク)を記述する]">こちら</a>を押してください
ターゲットブランクとは？
別のサイトに飛ばしたいときは、aタグにターゲットブランク(target="_blank")を追記します。この記述を追加すると別のタブが開き、指定したページに飛ぶことができます。ルールとして同一サイトにはターゲットブランクを使わず、別サイトに飛ばす際にターゲットブランクを使います。書き方は以下になります。
[通常のaタグ]
クリックしてください
<a href="https://blog.mimipen.net/">クリックしてください</a>
[ターゲットブランクを追記したaタグ]
クリックしてください
<a href="https://blog.mimipen.net/" target="_blank">クリックしてください</a>
imgタグ
以下の記事で使用したimgタグです。
blog.mimipen.net
画像を設置するために使用するタグです。画像を表示する方法は他にもありますが、最初はimgタグを使って画像を表示しましょう。そして、imgタグのaltは必ず書きましょう。
altとは？
imgタグのaltには、適切な画像の説明を入れましょう。画像の適切な説明がわからない場合は空でも大丈夫ですが、alt=""は必ず残しましょう。
[imgタグの記述例]
<img src="mimipen.jpg" alt="画像の適切な説明を記述します"> <img src=mimipen.jpg"" alt=""><!-- 画像に適切な説明がわからない場合は空でも大丈夫です -->
[imgタグのNG記述]
<img src="mimipen.jpg">
hタグ
ページの見出しを指します。
h1がもっとも重要な見出しです。h1タグにはページのタイトルを記述することが多く、検索の結果にも影響する部分なので最低１つはこのタグを入れましょう。
その次に、h2→h3→h4 の順番になるように意識してコーディングしていきましょう。
追記 : 2019.09.25
厳密には順番を必ず守らなくても検索結果には影響しませんが、グーグルのクローラーが回りやすい、ユーザーが見やすいコンテンツ作りは日々心がけましょう！
[hタグの記述例]
<h1>タイトル</h1> <div> <h2>サブタイトル</h2> <p>だみーてきすとだみーてきすと</p> <h3>見出し</h3> <p>だみーてきすとだみーてきすと</p> </div> <div> <h2>サブタイトル</h2> <p>だみーてきすとだみーてきすと</p> <h3>見出し</h3> <p>だみーてきすとだみーてきすと</p> </div>
[hタグのNG記述]
<h1>タイトル</h1> <div> <h3>サブタイトル</h3><!-- h1の次がh3になっている --> <p>だみーてきすとだみーてきすと</p> <h4>見出し</h4> <p>だみーてきすとだみーてきすと</p> </div> <div> <h2>サブタイトル</h2> <p>だみーてきすとだみーてきすと</p> <h4>見出し</h4><!-- h2の次がh4になっている --> <p>だみーてきすとだみーてきすと</p> </div>
まとめ
今回は最低限覚えるべきタグ4つとそれに付属する知識を説明させていただきました。
万能タグのdivタグ。リンクを貼る時ために使うaタグ。画像設置に使うimgタグ。最後に、見出しのhタグ。この4つのタグを覚えればもうサイトは作れます。
次回からはこのタグを使って、ホームページを早速作っていきます。練習用の簡単なデザインデータも無料で支給するので一緒に少しづつ作っていきましょう！参考書がわりにこのブログを見ていただだけたら幸いです。
最後までご覧いただきありがとうございます。
この記事がいいなっと思ったら読者登録をお願いいたします！
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)