【初心者向け】HTMLとは？HTMLの書き方

こんにちは！

フロントエンドエンジニア・マークアップエンジニアのリクです。

みなさんは、「HTML」という言葉を聞いたことはないでしょうか？

• HTML聞いたことあるけど、書き方とかルールはあるの？…
• そもそもHTMLって何？…

上記のように、疑問に思っていることを解決できる記事となっています。

僕は、マークアップエンジニアとして毎日「HTML」のマークアップ言語を書いています。実際にHTMLはどんなところで使われているのか、どんなルールがあるのかなど、この記事でお伝えします。

1 そもそもHTMLとは何？

そもそもHTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略で、Webサイトのページの土台を作るためのマークアップ言語になります。

HTMLを書く人をマークアップエンジニアと言います。マークアップエンジニアについては前回記事を参照お願いします。

1.Webサイトの土台

HTMLを分かりやすく、自分たちが住んでいる家に例えて、家の骨組みが「HTML」となります。なので、Webサイトの土台とも言われたりしています。

2.HTMLでできること

HTMLでできることとしては、Webサイトで表示させたいコンテンツ（文字や画像など）を決まったルールに従って、表示させます。

もっと分かりやすく言いますと、コンピューター上で表示させたいことを、コンピューターが理解できる言葉で指示して、コンピューターに表示させることができます。

2 HTMLの構造

HTMLを簡単に理解できたと思いますが、更に深堀りしていき、どのような構造になってWebページで表示されているのかご説明していきます。

1.要素とタグ

例えば、Webページに「ニュース」という文言を表示したいといったときに、このまま「ニュース」と記載してもWeb上では表示されません。

表示させたい「ニュース」に対して、<ここから表示させたい>ニュース<ここまで表示させたい>というようなHTMLを書いていきます。

実際にHTMLで書いてみると、<p>ニュース</p>例えばこのような書き方になります。

タグと要素は何かと言いますと下記の図を見れば分かりやすいかと思います。

タグは、<>で構成された文字列のことを指します。開始タグと終了タグと言われます。このタグを用いることで、見出し文や本文など様々な意味を表現します。要素は、タグで囲まれた全体のことを指します。なので、<p>ニュース</p>全部を今回の例ではpタグで囲んでいるので、p要素と言います。

タグに関しては、様々な種類のタグがあります。例えば、見出しの文字を表示させる<h1>〜<h6>タグや、入力フォームを作成するための<form>タグなど、その他にもたくさんのタグが存在します。

2.画像を表示

文字をWebページに表示させることができました。次に、画像を表示させたいと思います。

先程使用した、pタグでは画像を表示させることはできません。画像を表示させるには、<img src=”画像を格納してあるURL”>を使用します。

3 HTMLの基本的ルール

HTMLの書き方にはルールがあります。

ここでは簡単にですが、基本的な書き方のルールをご説明します。

1.タグの書き方

タグは基本的には、開始ダグと「/」を入れた終了タグで要素を書いていくことが基本的なルールになります。※画像を表示させるためのimgタグのなど、終了タグが無いタグも存在します。

<　p>ニュース</p>

上記のように、タグの前にスペースを入れてはいけません。また、半角スペースでも入れてはいけません。

コードを書くツールによっては、エラー表示が出る場合がありますので、エラーを見ながら気をつけて書いていきましょう。

2.属性について

HTMLの要素には、「属性」というものを付けることができます。属性の役割としては、要素に対して何かしらの設定をつけるようなものになります。

属性にはその要素固有の属性と、グローバル属性の2種類があります。要素固有の属性は、主にページ内のリンクを設定するときなどに使用します。例えば、imgタグにて使用します。

<img src=“画像URL”>

上記のように、「src=“”」の部分が要素固有の属性になります。（要素で元々指定されている属性のことです。）

グローバル属性は、様々な種類があります。HTMLで主に使用する属性を例に挙げていきます。

・id属性

Id属性は、主にCSSでデザインを行う際に使用されます。任意の文字列を指定できますが、同じページに同じid名が存在してはいけません。

・class属性

Class属性は、主にCSSでデザインを行う際に使用されます。任意の文字列を指定可能です。id属性とは異なり、同じページに同じclass名を指定しても問題ございません。

・title属性

title属性は、主にリンクをする際にリンク先の情報を記す目的で使用します。属性値には捕捉情報を文字列で指定できます。

上記の他にも様々な属性が存在しますので、別の記事で詳しくご紹介しようと思います。

4 まとめ

HTMLはWebサイトを作成する上で、サイトの骨組みとなりますので重要な部分だと思います。デザインにこだわるなら尚更です！

Webサイトは、学べば学ぶほど奥が深いものですが、簡単なものであれば、すぐに作ることができます。Webサイトを一から自分で作ってみたいという方は、ぜひHTMLの基本を理解した上で、実際にコードを書いてみて、サイトに表示させてみましょう！