HTMLの基礎

HTML（Hyper Text Markup Language）とは、ブラウザにWebサイトを表示させるためのコンピューター言語のこと。HTMLタグを使って入力された文字が画面上に表示される仕組みになっています。

image1.png
画像：ferretのソースコード

ここで、画面上で右クリックをして「ページのソースを表示」を選択してみましょう。
「>」と「<」の間に囲まれた文字列がHTMLタグ。そしてHTMLタグを含めた全体の文字列がソースコードです。

実はソースコードはWebサイトの設計図だとも言われており、単に文字を表示するだけでなく、「これは見出し」「画像を動かす」などの指示が含まれています。

文字に意味を持たせる役目

単純に文字を並べただけでは、ブラウザに表示されても、何の意味もありません。そこで、文字に「見出し」「リスト」といった意味を持たせることがHTMLの役目です。

ここで、よく使うHTMLのタグをご紹介します。

・見出し／hタグ
<h1>見出し、またはタイトル</h1>
・画像／imgタグ
<img src="画像のパス" alt="画像の説明" />
・リンク／aタグ
<a href="リンク先のURL">ここをクリックするとリンク先に飛びます</a>
・文字のグループ分け／divタグ
<div>グループ分けしたい文字<div/>
・リスト作り／ul、ol + liタグ
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>

文字に意味を持たせることで、Webシステムにその文章の内容を理解させることができます。実はHTMLタグを使わず意味を持たない文字列は、検索してもヒットしないのです。

参考：HTMLとは？−HTMLの基本｜HTMLクイックリファレンス

HTMLタグとSEOの関係

HTMLとSEOは切っても切り離せない関係です。
Webサイト内の文章すべてを検索エンジンに読み取らせるのは非効率。そこで、HTMLタグを使って優先的に読み取らせる部分や強調する部分を分けるような仕組みになっています。

例えばHTMLタグの＜h1＞は見出し1、つまりタイトルを意味しますが、検索エンジンは＜h1＞を読み込んで、SEOの順位付けを行うのです。

HTMLタグを使って文章を入力することで、検索エンジンは「この記事はこんなタイトルで、タイトルの中にこのキーワードが含まれているんだな」と理解します。

SEO対策を行うにはHTMLタグも重要な知識となるので、ぜひ覚えておきたいですね。

圧倒的に使いやすいCMS！見たまま編集のferret One

圧倒的に使いやすいCMS！見たまま編集のferret One

直感的な操作で、Webサイト・LP・フォームも作成も自分で完了！さらに、問い合わせの管理や効果測定もできてPDCAが高速に回ります。