これはテンプレート用のテスト記事です。
こんにちは！Donyです。
今日はHTMLの基礎についてお話したいと思います。
WEB制作に関しては全ての骨格になるもの、そしてSEO対策でも重要な役割を持っているので、バックエンドエンジニアだとしても基礎は勉強すべきですね。
HTMLとは
HTMLは「Hyper Text Markup Language」の頭文字で略したものです。
HTMLは上の英語にもありますが、プログラミング言語ではなく「マークアップ言語（Markup Language）」と言います。
だからJavascriptやPHPみたいに、ループや条件分岐などは使いません！もしHTML内でループみたいなのがあるとしたら、それはプログラミング言語が混ざっているだけです。
HTMLは要素の集まりで構成されていて、要素とはハイパーテキストの「<a>」やリストを意味する「<ul>／<ol>」、文章を意味する「<p>」など、各コンテンツを定義するものですね。
WEBサイトに関しては必ずHTMLを使います。
HTML書き方
HTMLマークアップは基本的に上から下に書いて行きます。
また下にあるものの方優先されます。この特徴はCSSをやる時に理解できると思います。
開始・終了タグ
HTMLは基本開始タグと終了タグで構成されています。
<p>今日はHTMLを勉強しました</p>- 開始タグ（opening tag）：<p>
- 終了タグ（closing tag）：</p>
※終了タグには必ず「/（半角スラッシュ）」を入れます。 - コンテンツ（content）：今日はHTMLを勉強しました
- 要素（element）：開始タグから終了タグまでの全体を意味
これが一番基本的な書き方ですね。ただこれだけだと、CSSやJavascriptで区別がしづらいです。
その時に書く要素を区別しやすくしてくれるのが「属性」です！
属性
<p id="spring">春を書いた文章です。</p>
<p id="summer" class="text-tag">夏を書いた文章です。<a href="https://www.pref.okinawa.jp/">沖縄の海</a>はきれいですね！</p>属性は開始タグの中に設定するのがルールです。
上記の例を見ると開始タグの中に「id=”spring”」がありますね？これが属性になります。
また属性は複数書けることができて、「半角スペース」で区切って使います。
「id=”summer” class=”text-tag”」こんな感じですね。
要素の親子関係（ネスト／入れ子）
HTMLは要素の中に他の要素を入れることができます。
これを「ネスト（入れ子）」と言いますね。
ただ、このネストにも要素によっては入れていけない要素関係があるので、注意が必要です。
例えば<ul>の直下の要素は<li>しかできないルールがあります。
※実際にHTML上でエラー表示はされないですが、マークアップチェックの場合は警告が表示されます。
<p>終了<span>タグを忘れちゃいけない</p>また上記のようにネストしている要素の終了タグを忘れたりすると、サイト全体のレイアウトが崩れる場合があるので、注意が必要です。
空要素
要素の中には、終了タグがないことでコンテンツを持たない要素があります。それを空要素（empty elements）と言います。
一番よく使われるものの一つがイメージ挿入で使う「<img>」要素です。
<img src="https://ittoki.com/wp-content/themes/dg-style/image/no-image.gif" alt="テストイメージ">実際の<img>タグの例ですが、見ている通り終了タグがなくて、属性のみ入っていますね。
ちなみに昔は空要素に対し、「<img 属性 />」のように開始タグの最後に「スラッシュ」をつけて閉じてますが、今は廃止しているので使わないようにしましょう。（入れても正常に表示されますが･･･）
SEOでのHTML
ここではSEOに影響のあるHTML要素についてお話したいと思います。
<title>
ページの名前を定義する要素です。SEOで一番重要ですね！
<head>
<title>【無料講座】韓国語の「父、母、兄、姉、妹、弟」などの呼び方とは？
</title>
</head><head>の中に書きます。一番上がいいですね！ここに<title>を入れると以下のところに表示されます。
「ブラウザのタブ欄」と「検索結果のページ名」に表示されます。
この検索結果のページ名を見てユーザーが興味を持ってアクセスするので、すごく大事ですね！
もし<title>が設定されてなかったら、検索エンジンが勝手に作ってくれますが、ユーザーの興味を持つ名前にするかは不明なので、必ず設定しましょう！
<meta>
<meta>タグは<title>と同じく<head>の中に書きます。
name=”description”
<meta>の中でも重要なのが「description」です！
<head>
<title>ページタイトル</title>
<meta name="description" content="ここにページ説明を書く">
</head>気づいている方もいると思いますが、「空要素」ですね。
「name属性」に「description」を入れて「content属性」にページ説明を入れます。
検索結果にはこのようにサイト説明が表示されます。
<title>でも書きましたが、このサイト名と説明文を読んでユーザーはアクセスするので、ここの内容が魅力的じゃないといけません！サイトの訪問者数を決定する項目です。
name=”robots”
ページの公開有無を設定する要素です。
単に公開する場合は特に書かなくてもいいですが、検索エンジンに対し「このページは無視してよい！」とお知らせしたい場合は以下のタグを設定します。
公開したいページにこのタグがあるといつまでも検索エンジンから無視されてしまうので注意しましょう！
<head>
<title>ページタイトル</title>
<meta name="description" content="ここにページ説明を書く">
<meta name="robots" content="noindex,nofollow">
</head>SNSと関連する<meta>
FacebookやTwitterなどのSNSは、上記で説明した<title>と<meta name=”description”>ではなく「OGP」を使用します。
<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="ページ種類">
<meta property="og:url" content="ページURL">
<meta property="og:image" content="ページサムネイル画像URL">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ページ説明">上記は例です。SNSによって書き方が、若干違うので調べて設定してくださいね！
<link rel=”canonical”>
<head>
<title>ページタイトル</title>
<meta name="description" content="ここにページ説明を書く">
<link rel="canonical" href="ページURL">
</head>空要素です。<head>の中に入れるタグは空要素が多いですね。
この「canonical」ですが、これもSEOで重要な役割をしています。
簡単に言いますと、「canonicalで指定したURLがオリジナルページ」です！とお知らせします。
なぜわざわざこのような設定をするかというと、
- コピーサイトによるペナルティ防止
- 同じページを複数URLでアクセスできる場合、検索エンジンの評価が分散するため、評価をまとめる
この２点の理由で、設定が必要です。
２番の評価が分散することを防止するための作業を「URLの正規化」と言います。
<h1>~<h6>
ページ内コンテンツの見出しになる要素です。
これは検索エンジンにとっても、ユーザーにとってもページの内容を把握しやすくしてくれるので、大事な要素ですね。
検索エンジンは人工知能なので、人のように目で文章を読むわけではなく、要素と文字列を見て内容を分析します。
その中で見出しタグを設定すると「この見出しがあるから、次の内容は見出しに関連する内容だ」と認識してくれます。
但し、見出しと次の文章の内容が合わないと検索エンジンは「うん？」となり内容をはっきり認識できません。
人に関しても、見出しがあった方が文章の内容を把握しやすいですし、デザインによりはっきり区別させることで、内容を理解しやすくなります。
見出しの構造について
また見出しの構造に気をつけましょう！
<h1>の次は<h2>のように数字を一つずつ落として使います。<h1>の次に<h4>がくるのはよくないですね。
よい例
<h2>HTMLについて</h2>
<p>HTMLはWEBサイトを作るマークアップ言語です。</p>
<h3>HTML要素の種類</h3>
<p>HTMLの要素は色んな要素があります。</p>
悪い例
<h2>HTMLについて</h2>
<p>HTMLはWEBサイトを作るマークアップ言語です。</p>
<h6>HTML要素の種類</h6>
<p>HTMLの要素は色んな要素があります。</p><a>
ハイパーリンクテキストです。他のページなどに移動できる導線をつけるときに使いますね。
他サイトから自分のサイトURLをリンクしてくれることを「被リンク」と言います。
昔はこの「被リンク」が多ければ多いほど、検索順位が上がっていたためスパムサイトが検索順位の1位になったりしてました。
今はそれを禁止し、無駄に被リンクをつける場合は逆に検索順位が下がるようにペナルティを受けることになっています。
正しいリンクのつけ方
- <a>のコンテンツはリンク先に関連するものにする
- 現在ページと関連する／文章の流れに適切なリンクを設置
また<a>には「rel属性」利用して検索エンジンに対し、リンク先を読まないようにお知らせもできます。
<ul>／<ol>
これは箇条書きのことですね。
箇条書きの内容だと情報をまとめていることが多く、検索エンジンも重要な情報だと認識してくれます。
またユーザーが内容を見る時にも読みやすいので、内容をまとめる時は使うようにしましょう！
<strong>
強調するタグです。
見た目だと文字を太くしますが、見た目だけじゃなく要素の意味としても強調する要素なので、重要なキーワードなどに使うようにしましょう。
<img>
WEBサイトに欠かせない要素ですね！
写真が一つもないサイトは読みたくないですよね･･･。それは検索エンジンもよく分かっていて、サイトコンテンツの中に適切にイメージを入れることで評価を得られます。
ただ、<h1>～<h6>の説明でも話しましたが、検索エンジンは人工知能のため、イメージを見ることができません！
なので、<img>に「alt属性」を入れてこのイメージの内容を教えることができます。
<img src="https://ittoki.com/wp-content/themes/dg-style/image/no-image.gif" alt="イメージがない場合のイメージ">またアイコンみたいな「意味がないイメージ」に関しては「alt属性」は書かなくても大丈夫です！
あとがき
最初は軽い気持ちで書きましたが、書いていたらまた量がどんどん増えてしまいました･･･。
WEBサイトの基礎となるので、フロントエンド・バックエンド関係なく覚えておいたほうがいいと思います。
質問や指摘がある方はコメントしてくださいね！