【HTML5】HTMLの学習を始めよう

HTML(Hyper Text Markup Language: エイチ・ティ・エム・エル)は、ブラウザに表示する文書構造の作成画像の配置装飾の指定などを行うための言語です。

普段目にする本にもタイトル見出し段落などがあるように、文にも様々な役割があります。
これらの役割をHTMLではタグで囲むことで定義します。

このタグは山括弧(<>)を使用して、次のように使用します。


<h1>最近の出来事</h1>
<p>川に洗濯に行くと、おばあさんとおじいさんが楽しそうに<strong>桃</strong>を拾っていました。<br>桃は「どんぶらこっこ」と流れていたのですが、それはそれは大きな桃でした。</p>
    

タグには開始タグ終了タグがあり、その中の文にはタグの持つ特徴が適用されます。
例にあるh1見出しを表すタグで「最近の出来事」が見出しであるということをコンピュータに伝えています。

タグを含む開始タグから終了タグのまとまりを要素(Element: エレメント)と言い、要素の中には複数の要素を記述することができます。

brタグは改行を表すタグですが、それのみで使用できるタグもあります。

HTMLは、これまでにいくつかのアップデートが行われており、現在はHTML5 が使用されています。

どの様なタグがあるかについては、HTML要素リファレンスで確認できます。

理解度チェック

  • タグとはなんですか?
  • 要素とはなんですか?
  • アップデートが行われて現在はHTMLの何が使用されていますか?

入れ子構造(親子関係)

HTMLの要素には他のHTMLの要素を含むことができます。


<section>
    <h2>まとめ</h2>
    <ul>
        <li>川に洗濯に行った。</li>
        <li>おじいさんとおばあさんを見かけた。</li>
        <li>大きな桃が流れてきた。</li>
    </ul>
</section>
    

この例では、sectionタグの要素の中にはh2ulがあり、ulの中には更にliの要素あります。

HTMLの入れ子構造

sectionとすると、h2ulで、liです。

この様な関係を入れ子構造(または親子関係)といい、HTMLでは重要な概念になります。

理解度チェック

  • HTMLのどのような特徴が入れ子構造(親子関係)となっていますか?

属性について

HTMLの要素に追加の設定を加える場合は属性を使用します。
次のコードを見てください。


<span style="color: red;">こんにちは</span>
    

span要素のstyle属性には「文字色を赤色にするための値」を設定しています。


<p hidden>こんにちは</p>
    

p要素にhidden属性を設定しています。hidden属性は要素を隠す場合に使用しますが、「隠す」か「隠さない」かどちらか一つの答えしかない属性になります。このような属性を論理属性といって「この属性が存在するかしないか」で値を設定します。

属性には他にも多くの種類があり、HTML要素で使える属性がそれぞれ異なる場合と、すべての属性で共通して使用できる属性(グローバル属性)があります。

属性については、HTML属性リファレンスで確認できます。

理解度チェック

  • 要素と属性の関係を説明できますか?
  • グローバル属性とはどのような属性ですか?

HTMLファイルの拡張子

HTMLはファイルに記述します。

ファイルには拡張子があり、音楽ファイルであればmp3、画像ファイルであればjpegpngなどがあります。
この拡張子はファイル名末尾のドット(.)の後に設定します。

HTMLファイルは、拡張子にhtmlを使用します。

この拡張子を使用すると[ファイル名].htmlのようなファイル名になります。

このファイルはテキストエディタで作成し記述することもできますが、開発者はVisual Studio Codeなどの開発専用のエディタを使用して作成します。

統合開発環境(VS Code)をダウンロードしよう

理解度チェック

  • 拡張子について説明できますか?
  • HTMLの拡張子はなんでしたか?

VS Codeの拡張機能

VS Codeを使用してHTMLを記述する際に便利な拡張機能を紹介します。

拡張機能の使い方や、その他の拡張機能のインストールについてはVS Codeのダウンロードページをご確認ください。

HTMLHint

この拡張機能をインストールすると、HTMLコードのエラーを探索し、波線やメッセージで教えてくれるようになります。

拡張機能: HTMLHint

HTMLコードのテンプレート

HTMLには多くの役割を持つタグがあります。
ここでは、どのページにも必要なテンプレートとなる次のコードについて説明します。


<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>最近の出来事 - マイブログ</title>
    </head>

    <body>

    </body>

</html>
        

VS Codeでプロジェクトを作成するチュートリアルを参考にHTML作成を試してみましょう。

「HTML5で記述する」を宣言

これまでHTMLはいくつかの大きな改定(バージョンアップ)が行われており、現在はHTML5が使用されています。

次のコードはHTML5で記述することを宣言する一文となり、コードの一番先頭に記述します


<!DOCTYPE html>
    

html要素

このhtml要素は記述するすべてのHTMLの祖先となる要素でルート要素といいます。

ルート要素にlang属性を使用して、このページがどの言語で書かれているかを明示することができます。


<html lang="en">
    ...
</html>
    

このlang属性は言語コードがenで設定されているので「英語で書かれているページ」という情報をブラウザに知らせます。
日本語のページを作成する場合はjaを設定します。

head要素

head(ヘッド)要素にはコンピュータが読み込んで使用する要素を記述します。ここで記述した要素はブラウザの画面には表示されません。


...
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最近の出来事 - マイブログ</title>
</head>
...
    

meta要素

meta(メタ)要素には、このページの情報を設定します。

SEO(検索エンジン最適化: エス・イー・オー)に重要な働きをするデータを設定する要素でもあります。

SNSで記事がシェアされた場合に必要なデータもこのmeta要素に設定します。
多くの役割をもつデータを設定するため、通常は複数のmeta要素を定義することになります。

charset(文字コード)

文字コードとは、コンピュータで扱う文字に割り当てられている符号のことです。

UTF-8は文字コードの一つで、英語や日本語など世界で使用される文字を多くサポートしています。
そのためWebサイトでは最も多く使用される文字コードとなります。


<meta charset="UTF-8">
    
viewport(表示領域)

ビューポートは、スマートフォンやタブレットの画面に適切なサイズで表示するために必要な設定です。

この設定を書かなければレスポンシブ・デザインに対応できないため忘れずに記述しましょう。


<meta name="viewport" content="width=device-width, initial-scale=1.0">
    

title要素

このページのタイトルを設定します。

このタイトルは、ブラウザのタブに表示されたり検索エンジンで検索したときの結果などに使用されます。

SEOでも重要度が高いので忘れずに記述しましょう。

body要素

body(ボディ)要素には、画面に表示するための要素を記述します


...
<body>

</body>
...
    

この例では何も要素が記述されていないので、画面には何も表示されません。


...
<body>
    こんにちは
</body>
...
    

この場合は、画面には「こんにちは」が表示されます。

理解度チェック

  • <!DOCTYPE html>は何のために必要ですか?
  • ルート要素とは何のことですか?
  • 主にコンピュータが参照するデータを記述する要素は何ですか?
  • 画面に表示する要素を記述するのはどの要素の中ですか?

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。