ウェブログラム ~学習するな実践せよ~

HTMLとは?初心者にも分かりやすく解説!

HTMLの細かい内容は置いといて、簡単にどういうものなのか説明します。

一言で言うと

「HTMLとはサイト設計図」

です。

Webサイトのいろいろな情報があります。
例えば、

  • ナビゲーション
  • 記事
  • 記事タイトル
  • サイドバー

これらは大体の場合文字です。文字だけでズラーッと記述していくと、Webサイト全体の中で、その文字はどの情報にあたるのかそれが分かりません。
なので、「ここに書いた文字は記事」、「ここに書いた文字は記事タイトル」などのように、同じ文字でも意味をもたせていく。これがHTMLになります。

サイトの骨格を作るイメージですね。

※一つ注意なのが、意味を持っているだけで表示はあまり変わりません。サイドバーという意味をもたせたからと言って、左に行くわけではありませんし、記事タイトルだからといって文字が大きくなるわけでもありません。

このあたりのデザインの部分はCSSというものが担っています。次の記事で紹介します。

具体的にHTMLとは?

簡単なHTMLは↓のようなものです。

<div>Webサイトです</div>

これは「Webサイトです」という文字を「<div></div>」という文字で囲んでいます。

この「<div></div>」を「HTMLタグ」と呼びます(以下タグと省略)。
<div></div>」以外にも色々なHTMLタグが存在します。

  • <h1></h1>
  • <span></span>
  • <a></a>

のような<〇〇></〇〇>というタグが100以上存在します。
Webサイトはこのようなタグをたくさん使って、作られています。

そして、タグはそれぞれ意味を持っています。
h1タグであれば「見出し」、aタグであればリンクなどなど。

いきなり全てを覚える必要はありません。使っていくうちに慣れてくるので、使いながら覚えていきましょう。

とりあえず理解としては、

HTMLは簡単?

HTMLは正直言って結構簡単です。

タグの種類は100以上あると言いましたが、Webサイトを作るにあたって全て必要なわけではなく、
10種類くらいのタグを使えばなんとかなります。

基本的にタグは文字を囲むものなので、それだけ覚えておけば今の所OKです。

使い慣れてきたら、いろんなタグを使ってレベルアップしていきましょう!

もちろん深く詳細を調べていくと難しい部分はたくさんあります。セマンティックWebやコンテンツモデル、各種プロパティなど。
この辺もステップアップした際に学んでいきましょう。

HTMLはSEOと深く関係してくる?

ここでSEOという言葉が出てきましたが、
これはGoogleなどの検索をしたとき、

「上位に表示される」

というような意味です。

Googleの検索結果で上位に表示されることにより「たくさんのアクセス」を集めることができます。
上位に表示されるサイトは「SEOが強いサイトだね〜」などと言われます。

HTMLがSEOとどう関わってくるのかですが、
100以上のHTMLのタグの中から、適切なタグを選んでサイトを作ることで、SEOが強くなり検索結果上位に表示されるようになります。

ですが、ここはHTMLの入門なのでSEOは特に意識せず、HTMLを使えるようになることを目指します。
HTMLは簡単なので、すぐにSEOを意識したHTMLの書き方にもなれると思います。