LINEで現役エンジニアに直接質問してみよう!登録無料

【初心者向け】HTMLとは?10分でわかる基礎と書き方をイラストを使って解説

HTMLとは、Webサイトを作るために一番基礎となる言語の事です。HTMLを初めて見た初心者には、「暗号みたいなよくわからない文字列」というイメージがあるのではないでしょうか?

  • HTMLを書いてWebページを作成できるようになりたい!
  • HTMLを書き始めるにはどうすればいいの?
  • HTMLを簡単に読めるようになりたい!
  • HTMLは暗号みたいで怖いけど、理解できるようになりたい!

このような疑問に答える初心者向けの内容となっています!

HTMLとは?

HTMLとは、Webページを作る基礎になっているコンピュータ言語です。ちなみにHTMLは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。

HTMLを操ることができれば色々なWebサイトを作ることができます。下記のような有名なサイトもすべてHTMLで書かれています。

yahoo.co.jp

apple.com

暗号みたいで、難しそうですよね。。。でも安心してください!

これが難しそうに見えるのは、本当のHTMLに圧縮や最適化の処理を施しているからなんです。

例えるなら、「zip化などで圧縮されている状態」をイメージするとわかりやすいかもしれません。データの内容は一緒だけれど、容量を小さく高速でデータ転送するために余計な部分を削ぎ落としているのです。

そのため、複雑に見えるんですね!

では、圧縮する前のHTMLはちゃんと理解できるか気になりますよね!大丈夫、簡単な対応図を用意しました。

このように、HTMLとブラウザ上で表示される要素には1対1の関係があります。そのため、慣れてくると「このように書けばこのように表示されるな」とわかってきます。

ちなみに、今すぐにあなたが見ているHTMLは今すぐに確認することができます。

STEP.1
右クリックをしてソースを表示

ブラウザ上でどこでもいいので「右クリック → ソースの表示」を選びます

STEP.2
タブが開いてHTMLが表示される

すると、もう一つダブが開いてそこにHTMLの内容が表示されます。

完成!

気になったら、見てみてくださいね!

HTMLの例を少し見てカジッてみよう

ここまでで、HTMLがWebサイトの基礎である事とHTMLの概要がわかった所で、更に踏み込んで実際にHTMLを細かく見ていきましょう!

ここでも簡単なHTMLを使った例で紹介するので、安心してくださいね!

まず文章内でリンクを作るHTMLを下記に書いて見たいと思います。リンクとはこのようなものです。

ブラウザ上でテキストをクリックすると、リンク先に飛ぶテキストや画像をリンクといいます。

リンクは<a>という「タグ」で書かれます。タグとは簡単に言うと「<」と「>」に囲まれた文字で、<タグ>~</タグ>のように対になっているものです。詳しくはこの記事の下章で解説します!

それで、この<a>タグを使ってリンクを表現すると下記のようになります。

<a href="https://hackable.jp/posts/1334">リンク</a> 

書いてある内容や構造は下記のようになります。

<a href="飛ばす先のリンク">リンクテキスト</a> 

このように、HTMLにはちゃんと書く決まりがあって、それに従って書くとWebページを作ることができます。

HTMLはGoogle語(検索エンジン語)?

結論から言うと、同じURLを開いても人間が見ているものとGoogle(検索エンジン)が見ているものは違うということです。

人間が見ている内容

Googleが見ている内容

例えば、人間が見ている内容で、見出しはどれかと聞かれれば、簡単に「プログラミングスクールのご案内」だとわかりますよね。

でも、これがGoogleが見ている内容で、見出しはどれかと聞かれれば「<h1>で囲まれている内容」と判断するわけです。

Googleが見出しを見つける手順

  1. <h1>を見つける
  2. 内容を見出しだと判断

ここで「もしタグの名前が違ったらどうなるのか?」という疑問が湧くと思います。ご想像の通り、「Googleは誤認」してしまいます。
なので、人間にもGoogleにもどちらにもわかりやすいWebページにすることが大事なのです。

なんでGoogleにきちんと認識してもらわないとダメなの?

ここまでGoogleを重視しているような内容でした。では、なぜそんなにGoogleに認識してもらう事を意識しているのでしょうか?

それは、GoogleがWebページの検索順位を司っているからです。

検索順位を上げることができれば、多くの人の目に止まり利用してもらえる人が大幅にアップします。だから、GoogleにわかりやすいHTMLを作ることを心がける必要があるんです。

しかし、ここで忘れてもらいたくないのが実際に使うのは人間だと言うことです。人間にわかりにくいWebページはGoogleが後から評価してくれなくなります

どちらにも気を配る必要があるのを覚えておきましょう!

HTMLの基礎や使い方・書き方解説

ここから本格的にHTMLを入門していきます。HTMLの構造の基礎、使い方、基本的なタグの種類までを解説していきます。

HTMLの構造

まずは、HTML基本「タグ」という基本的な構造から見ていきましょう。

HTMLの基本1: タグで挟む

yahooやappleのHTMLソースコードで使われていたHTMLなどを見ると<〜></〜>のような文字がたくさん使われていると思います。この文字を「タグ」と言います。

タグがHTMLの中で一番な基本になります。このタグで先程作ったリンクや画像などを挟み込むのが基本的な使い方です。

タグは2つの部品からできています。

  1. 開始タグ
  2. 終了タグ

です。

そして、この2つの部品(タグ)で囲まれた全体を「要素」と言います。

タグには<p> <h1> <a>など様々な種類があって、それぞれ役割が異なります。

例えば、<p></p>に挟まれたテキストは「段落」という意味になり、<h1></h1>に挟まれたテキストは「大見出し」という意味になります。

同じように<a> </a>に挟まれると「リンク」になります。

実際に先程のコードをブラウザで表示させてみると、このようになります。

このように、タグの種類ごとに意味ががあるので、適切に使い分けることでGoogleにわかりやすいWebページを作ることができます。

HTMLの基本2: タグは入れ子にする

HTMLは入れ子の構造を持っています。つまりタグの中にタグを入れた構造を持っているということです。

そして、HTMLは最初の部分から入れ子構造になっているという点も押さえておきましょう。

どういうことか、下記から解説します。まずは、実際のHTMLコードを使って紹介します。

すべてのHTMLはこのようにタグの入れ子構造になっています。例外は一番目の行の<!DOCTYPE html>の部分だけです。

ちなみに<!DOCTYPE html>はHTMLのバージョンを表しています。

これをわかりやすく分類して色付けすると、このようになります。

この図のように、<head><body><html>の要素です。他のタグも同様にたくさんの入れ子構造を作ります。

この図のように、<head><body><html>の要素です。他のタグも同様にたくさんの入れ子構造を作ります。

HTMLの基本3: 開始タグの中にメタ情報(属性)を書く

タグには、ブラウザに表示されない付属情報を書くことができ、HTMLでは「属性」といいます

属性は開始タグの中に書きます。

そして、タグ名と属性名の間には半角スペースを入れます。

例えば、aタグだとhref属性を使って、クリックしたとき飛ばすリンク先を指定します。

ここまでをまとめます。

  • HTMLは<>で「タグ」をつかって書く
  • タグには「開始タグ」と「終了タグ」がある
  • タグにはメタ情報として「属性」を設定できる
  • タグと属性の間には「半角スペース」を入れる
  • <a>タグでは属性を使ってリンク先を設定する

HTMLでよく使われるタグ

HTMLのタグや属性の意味と、それをどのように使うのかを解説しました。

今まで、「段落」「見出しタグ」「画像タグ」など色々なタグを解説時に使ってきました。タグの種類は実に100種類以上あります。
しかし、中には「Webページ中1回しか使ってはいけないタグ」「推奨されていない」「検索エンジン側が理解するプログラムを実装していない」「特定のタグとセットでしか使えない」など色々な理由があり、実際によく使われるのは10種類程度です。

ここではそのようなタグを6つのグループに分けて紹介します。

見出しを表現するhタグ

見出しタグとは、書籍で言う見出しや目次みたいなモノです。

この画像のように、記事のタイトルや見出しに設定するタグです。

  • h1(大見出し) … 記事タイトル
  • h2(中見出し) … 記事の中見出し
  • h3(小見出し) … 記事の少見出し

適切に使い分けることで、人間だけではなく検索エンジンからも見やすいWebページにできる重要なタグです。

タグは<h>ではなく、<h1>のように<h + 数字>で書きます。

数字の数が小さいほど(1に近いほど)重要度が高まり、<h1>から順番に使います。

下記の記事で詳しく解説しているので、クリックして見てみてください。

HTML h1、h2〜h6で見出しタグの書き方と使い分け!h1は一回しか使っちゃダメ?

段落を表現するpタグ

<p>を使うと段落を表現できます。<p>はHTMLを書く上で最もよく使われ、文章を改行したり内容が変わったりした時に使います。

リンクを表現するaタグ

<a>を使うと、クリックした時に別のURLに飛ばすリンクを表現できます。HTMLの内容には「リンクテキスト」を、href属性でリンク先のURLを設定します。

<a href="https://hackable.jp/posts/1334">リンク</a> 

下記の記事で詳しく解説しているので、クリックして見てみてください。

HTML aタグとは?hrefを使ったリンクの作成する方法

画像を表現するimgタグ

Webページに画像を挿入したい時には<img>タグを使います。

このタグは今まで使ってきたものとは少し違います。まず、内容がありません。実際にHTMLコードを見てみましょう。

<img src="http://hackable.jp/s3/2020/3/harley.jpg">

このように、imgタグには終了タグがありません。逆に終了タグを書くと、HTML文法上はエラーになります。

どの画像を表示するかは、srcという属性を使って設定します。

<img src="http://hackable.jp/s3/2020/3/harley.jpg">

ここで注意点が1つあります。Googleなどの検索エンジンからどんな内容を表示しているのかまで評価してほしい場合、alt属性をつけるようにしましょう。

<img src="http://hackable.jp/s3/2020/3/harley.jpg" alt="harley">

alt属性とは、画像にどんな内容が書いてあるのか表す属性です。

Webページ制作の場合、必ずGoogleは意識しないといけないので、alt属性は全ての画像で設定するのが普通です。この画像の場合はalt="harley"を設定しておけばOKです。

下記の記事で詳しく解説しているので、クリックして見てみてください。

HTML imgタグとは?画像を表示方法や適切なサイズや解像度の書き方・仕方の基本

箇条書きリストを表現するul / ol / liタグ

箇条書きリストを表現したい場合は、<ul><li>、または<ol><li>を使います。

<ul>を使えば順番無しリストに、<ol>を使えば順番ありリストになります。

<ul><ol>を同時に組み合わせて使うことはありません。

下記の記事で詳しく解説しているので、クリックして見てみてください。

HTML ul、ol、liタグで箇条書きリストを作成する方法

表を表現するtable / tr / th / tdタグ

HTML上で表を表現するには<table> <tr> <th> <td>の4タグを組み合わせて使います。

結論から言うと、このような感じです。

<table>が表全体を表し、<tr>が各行を表します。そして、その中にセルとして<th><td>を使ってデータを挿入します。

<th>はテーブルヘッダ(Table Header)の略で、テーブルの見出しなどに使います。
<td>はデーブルデータ(Table Data)の略で、テーブルのデータを入れるのに使います。

また、<tr>はデーブルロウ(Table Row)の略です。

下記の記事で詳しく解説しているので、クリックして見てみてください。

HTML table、tr、tdでデーブルの作成方法と応用テクニックを解説
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。