HTML

【初心者向け】そもそもHTMLとは？HTMLの基本をわかりやすく解説

2022年7月29日

そもそもHTMLとは？

WEB制作・プログラミングの勉強を始めるとき、1番最初に勉強するのがHTMLと聞くことが多いと思います。
しかし「そもそもHTMLってなに？」と感じている方も多いのではないでしょうか？

この記事では初心者の方に向けてHTMLとはなにか・どうやって使うのかを図解などを使用してわかりやすく解説します！

こんな人にオススメ

  • これからプログラミングの勉強を始める
  • HTMLとはなにか知りたい
  • どうやって使うの？
  • タグってなに？

HTMLの基本を知りたい方は是非最後までお読みください！

HTMLとは？

HTML(エイチ・ティー・エム・エル)とは、「Hyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)」の略で、

  • Hyper Textとは、ハイパーリンクを埋め込むことができるテキストで、
    よくあるテキストをクリックすると、別のページに移動するあのリンクのことです。
Hyper Textイメージ
  • Markupとは、文章の中のどれが「見出し」どれが「本文」など、読み取れるよう目印をつけてコンピュータに指示するものです。
    WEBサイトではその目印に「HTMLタグ」を使用して指示しています。
    例えば見出しタグを使用すれば『この文章は見出しです』、段落タグを使用すれば『この文章は段落です』といった感じです。
Mack upイメージ

つまりHTMLとは、文章構成の指示を出しコンピュータが理解できる形にして、WEBサイトに文章や画像などを表示する言語です。

WEBページのHTMLファイルを見てみよう

私たちが見ているWEBページもHTMLファイルを用いてできています。
そしてパソコン・スマホから簡単にHTMLファイルを見ることが可能なんです。

例としてChromeの場合、閲覧しているWEBページで右クリックをして「ページのソースを表示」を押してください。

すると、記号や英単語がたくさん組み合わさったものが表示されます。

これがWEBページを構成しているHTMLファイルの中身になります。
このような記号や英単語が組み合わさってコンピュータが読み取れる文章を「ソースコード・コード」といいます。

ソースコードがWEBブラウザ(Chrome・Edge・safariなど)によってどのように表示するか判断されて、私たちが見ているWEBページが表示されています。

HTMLタグ・要素・属性とは？

HTMLの基本となる3つの用語について解説していきます。

タグ

タグとは記述している文章の役割をコンピュータに指示するための記号、英単語です。

全て 「< > (大なり、小なり)」の記号で囲まれた記述になり、最初に書かれる方を「開始タグ」、後から書かれる方を「終了タグ」といいます。

開始タグと終了タグは基本的にセットで使用されますが、場合によっては終了タグがないものもあります。

そして開始タグと終了タグに囲まれた部分がWEBページに表示されます。

開始タグ

開始タグ内に記述されるものが、文章の役割を指示しています。

上記でいえば、開始タグ内に「h1」とあるのでタグで囲まれた文章「Hello, world」は見出しの役割を持っているということになります。
(h1に関しては後述します。)

終了タグ

終了タグには必ず「/」をつけます。
「/」をつけることで、このタグはここまでですよ！という合図になります。

要素

要素とは、開始タグから終了タグまでの1つのかたまりのことです。

属性

属性とは、タグの役割についての付加情報です。

開始タグ内に記述され、属性の名前を「属性名」、付加する情報を「値」といいます。

属性の書き方ルール

  • 開始タグのタグ名の後にスペースを空けて記述
  • 属性名の後は必ず「=(イコール)」でつなぐ
  • 値は「””(ダブルクォーテーション)」で囲んで記述
  • 複数の属性を記述する場合はスペースで区切る

上記はimgタグで画像を表示するためのタグですが「src属性」と「alt属性」が付与されています。
「src属性」はどの画像を表示するのか、「alt属性」は画像が表示されなかった場合に表示される文章を設定しています。

このように属性を付与することでタグの役割を細かく定義することができます。

代表的なタグ一覧

タグにはかなりたくさんの種類がありますが、ここでは基本となる代表的なタグを紹介します。
もっと色んな種類を見たい方は下記リンクを見てみてください！

HTMLタグ一覧サイト：HTMLタグリファレンス（ABC順）

タグ説明
<h1>〜<h6>見出しに使用します。
<p>文章の段落を表すタグです。
文章のまとまりを表示するときに使用します。
<a> リンクを挿入したいときに使用します。
<img>画像を表示したいときに使用します。
<ul><li>箇条書きのリストを表示するときに使用します。

<h1>〜<h6>タグ

<h1>〜<h6>は見出しタグで記事のタイトルなどによく使用されます。
最初につく「h」は「heading」の略です。
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>の6種類があり全て強調された太字になり、<h1>が1番大きく、<h6>が1番小さい見出しになっています。

HTMLファイル
WEBページ表示結果

<p>タグ

<p>タグは段落を表示するタグで文章のまとまりを表示するときに使います。
最初につく「p」は「Paragraph」の「p」からきています。

<p>タグをわけて使用することで段落がわかれて表示されるので、各段落ごとに改行され段落の間には少しスペースがあきます。
<P>タグ内で改行してもブラウザの表示では改行されません。

HTMLファイル
WEBページ表示結果

<a>タグ

<a>タグはコンテンツにリンクを挿入するタグです。リンク先は「href属性」で指定します。

HTMLファイル
WEBページ表示結果

<img>タグ

<img>タグは画像を表示するタグです。終了タグが無いので、文章を囲まず単独で使用されます。
<img>タグを使用する場合は「src属性」と「alt属性」が必要です。

  • 「src属性」はどの画像を表示するのか画像ファイルがある場所を指定します。
  • 「alt属性」は画像がうまく読み込めない場合に画像に代わって表示されるテキストです。
HTMLファイル
WEBページ表示結果

<ul><li>タグ

<ul><li>タグは箇条書きのリストを表示するタグです。


「ul」は「Unordered」の略で順序の決まっていないリストを意味します。
「li」は「List Item」の略でリストのアイテムを意味します。

表示するには<ul>タグだけでは機能せず、<ul>タグ内に<li>タグが必要になります。
リストの項目を増やしたい場合は<li>タグを増やすことで可能です。

HTMLファイル
WEBページ表示結果

類似タグ

ここでは紹介していませんが、<ul>タグとよく似た<ol>タグというタグがあります。

2つの違いは<ul>タグの項目が「・」から始まる順序の決まっていないリストに対し、<ol>タグは項目は「1,2,3」と番号から始まる順序の決まっているリストになります。
両方とも書き方は同じです。

HTMLファイルの書き方

HTMLのファイル名

HTMLのファイル名は何でも良いわけではなく、決まったルールがあります。

拡張子

HTMLファイルには拡張子をつける必要があります。

拡張子とはそのファイルの種類をあらわす文字のことで、ファイル名の「.(ピリオド)から右側」です。

よく見かける拡張子

HTMLファイルの場合は「.html」とつけましょう。

拡張子より前

次は拡張子より前の部分についてです。上記のイメージでいうと「image、test、sample」の部分です。
実は絶対これ！！というルールは決まっておりません。
ただし最低限のルールは決まっていますのでご紹介します。

ルールgoodbad
半角英数字のみ使用可能test.htmlｔｅｓｔ．ｈｔｍｌ
テスト.html
基本的に小文字に統一test.htmlTest.html
使えない記号に注意する
ex:)「\」「:」「,」「;」「*」「/」など
基本的に「-」「_」以外使用しない		test-page.htmltest/page.html
test*page.html
空白は使用できないtest-page.htmltest page.html

ルールは以上です。前述では絶対これ！！というルールはないと書きましたが、
WEBサイトを作成する場合は基本的に「index.html」にしましょう！

さっきと言ってることが違う、、と思われた方もいるかと思いますが、これには理由があります！
もちろん前述通り最低限のルールさえ守ればどんなファイル名でも構いませんが、
WEBサイトにアクセスして1番最初に表示されるページは「index.html」というファイル名にすることが基本になっています。

なぜならWEBサイトにアクセスされたとき、コンピュータは最初に「index.html」がないか探しあれば自動で表示してくれるからです。
WEBサイトのURLが「https://sample.com/index.html」の場合、「https://sample.com/」だけでアクセスすることが可能になります。
反対に「https://sample.com/top-page.html」の場合、「https://sample.com/」だけではアクセスできません。

なのでファイル名は基本的に「index.html」にすると覚えておきましょう！

HTMLの基本構造

HTMLは大きな外枠として「html要素」があり、その中で「head要素」と「body要素」の2つにわかれています。

そして最低限記述することがありますので、まずはサンプルコードを見てみましょう！

HTMLファイル
WEBページ表示結果

よくわからない英数字が並んでいるように感じるかと思いますが、1つずつ解説していきます！

<! DOCTYPE html>

1番最初の「<! DOCTYPE html>」とは「Doctype(ドクタイプ)宣言」といい、このページがどのバージョンのHTMLで作られているかを記述しています。

HTMLには色々とバージョンがありますが、「<! DOCTYPE html>」は「HTML5」を指しています。

<html lang="ja">

「<html lang="ja">」の「html」の部分はこれがHTMLの文書だと表しています。
「lang="ja"」の「lang」が「language(言語)」、「"ja"」が「Japanese(日本)」の略となります。
つまり言語は日本語だと表しています。

両方を合わせると、これは言語は日本語のHTML文書ですということになります。

<head>〜</head>

<head>〜</head>は、このWEBページの情報を記述します。基本的にWEBページに表示はされません。

  • <meta charset="UTF-8">
    「meta」とはWEBページの情報を検索エンジンに伝えるためのものです。
    「charset="UTF-8"」は文字コードが「UTF-8」と指定しています。
    これが記述されていないと文字化けすることがありますので、必ず記述する必要があります。
  • <title>HTMLの基本構造</title>
    これはページのタイトルになります。この名前がWEBページを表示したときのタブなどに表示されます。
    今回は例として「HTMLの基本構造」と記述しましたが、任意で決めることができます。

<body>〜</body>

<body>〜</body>内は実際にWEBページの表示される部分になります。
今回は例として「h1、p」タグを記述していますが、ここに表示したいコンテンツを記述することになります。

実際にHTMLファイルを作ってみる

簡単にHTMLファイルを作成できるのでここでは実際にHTMLファイルを作ってみましょう！

必要なものはWIndows、Mac関係なく標準で入っている「メモ」だけになります。
以下の手順に沿って進めてみてください！(Macでの手順で進めますが、Windowsでも同じ手順になります。)

標準で入っているテキストエディットを開く

標準で入っている「テキストエディット」を開きます。

Windowsの場合は「メモ帳」を開きます。

テキストエディットの設定を変更する

  1. 画面左上の「フォーマット」をクリック
  2. 「標準テキストにする」をクリック

「標準テキストにする」をクリックするとテキストエディットが以下のように変更されます。

変更前
変更後

Windowsの場合は何もせず次に進んでください。

テキストエディットにソースコードを記述する

開いたテキストエディットにソースコードを記述してみましょう！
「title」、「body」内は任意で変えて問題ありません。
下記にサンプルコードを記述してますので、面倒な方はコピペしてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLを書いてみる</title>
  </head>
  <body>
    <h1>今日の晩ご飯</h1>
    <p>今日の晩ごはんはオムライスです。</p>
    <p>用意した具材</p>
    <ul>
      <li>卵</li>
      <li>玉ねぎ</li>
      <li>ピーマン</li>
    </ul>
  </body>
</html>

ファイル名を「index.html」にして保存

  1. 画面右上の「ファイル」をクリック
  2. 「保存...」をクリック

Windowsの場合は
「ファイル」をクリック
→「名前を付けて保存」をクリックします。

  1. 名前：「index.html」に変更
    場所：任意の場所(例ではデスクトップ)
    標準テキストのエンコーディング：「Unicode(UTF-8)」
    (初期表示で「Unicode(UTF-8)」になっているので確認)

    上記に設定して「保存」をクリック

Windowsの場合は名前、場所は同様に設定し、ファイルの種類を「すべてのファイル」を選択してください。

右の画像のように「この書類のファイル名の末尾に".html"という拡張子を使用しています。・・・」という表示がでてくるかと思いますが、「".html"を使用」を選択して保存してください。

Windowsはそのまま保存されます。

保存したファイルを開く

保存ができたら実際に開いてみましょう！
指定した保存先(例の場合はデスクトップ)にあります「index.html」をダブルクリックしてブラウザで表示します。

このように表示できていれば成功です！

まとめ

以上でHTMLの基本についての解説は以上になります。
要点を簡単にまとめますと、以下の通りになります。

  • HTMLとは文章構成の指示を出しコンピュータが理解できる形にして、WEBサイトに文章や画像などを表示する言語
  • タグとは記述している文章の役割をコンピュータに指示するための記号や英単語
    （ex: <h1>,<p>）
  • 要素とは開始タグから終了タグまでの1つのかたまり
  • 属性とはタグの役割についての付加情報
  • HTMLファイルの拡張子は「.html」であり、基本のファイル名は「index.html」にすること
  • 「head要素」「body要素」から成り立っていて、「body要素」のみWEBページに表示される

ここまで読んでいただけた方にはHTMLについて少しは理解が深まったのではないでしょうか？

プログラミングは何も覚える必要はありません。わからなくなったら調べることが1番です。
ただ覚えるより調べて理解する方が身につきますし、私はそちらの方が大切だと思います。

どんどん書いて実践していきましょう！

-HTML
-