2021/1/7

【初心者向け】HTMLってなあに?HTMLの基礎知識を徹底解説!

こんにちは、小・中学生のためのオンラインプログラミングサービス「HomoLudens」代表のナオキです。

HTMLという言葉を、プログラミングについて調べたことがある方なら聞いたことがあるのではないでしょうか?
HTMLはウェブのもっとも基本的な構成要素です。WEB制作をするうえでHTMLは必須なので、よくわかっていないという方は、ぜひこの記事を読んでHTMLについての理解を深めましょう!!

HTMLとは?


HTMLとは、「HyperText Markup Language」の略です。まずは単語ずつ見ていきましょう。

HyperText

HyperTextとは、 WEBページで下線の付いたテキストなど、クリックすると別ページへ移動することが出来るハイパーリンク」を埋め込むことができる高機能なテキストのことです。

Markup

Markupは直訳すると「目印をつける」という意味で、文章の構造、各部分が果たしている役割、意味をコンピューターが理解できるように目印をつけて意味づけを行うことです。

HyperText Markup Language

Language」は「言語」なので、HyperText Markup Languageを一言でいうと、「高機能なテキストに目印をつける言語」です。ですので、HTMLは実はプログラミング言語ではありません。HTMLは、その名の通りマークアップ言語の一つで、ウェブサイトの構成をコンピューターが理解できるように記述したものになります。

さて、この説明だけだと抽象的なよくわからないと思いますので、ここからは具体的なHTMLを見ていきましょう!

HTMLの要素

HTMLは、要素の集まりで出来ています。要素とは、下の図を見るとわかりやすいと思いますが、「開始タグ」と「閉じタグ」と呼ばれる要素名を山括弧で囲ったものと、コンテンツで構成されているものです。コンテンツはない場合もあります。



この「タグ」には色々な種類があり、文章の構造、すなわち見出しや段落、表やリンクなどをマークアップするためにタグを使い分けます。例えばこの図の場合は、段落タグである「<p>」を使うことで、これが段落であるとコンピューターに指定することが出来ます。

属性

要素は下の図のように属性(Attribute)を持つことが出来ます。



属性とは、振る舞いやデータの提供などの追加情報を要素に設定するものです。この図のケースでは、classが属性の名前、textが属性の値です。class属性は要素を分類するための名前を指定するもので、この名前を使ってデザインを行ったり様々なことが出来るようになります。

属性は以下のルールに基づいています。

  • 要素名の後ろ(すでにいくつか属性がある場合はひとつ前の属性の後ろ)半角スペースを開ける
  • 属性名の後ろに「=」(イコール)をつける
  • 属性値を引用符をつける


色々な要素

ここからは、段落タグ以外にもどのような要素があるかを見てみましょう。

見出し


物語でも、新聞でも、教科書でも、基本的に文章は見出しと段落で構成されています。HTMLでは、見出し要素が文章中の見出しや小見出しを指定します。

見出し要素には、<h1>,<h2>,<h3>,<h4>,<h5>,<h6>の全部で6段階あります。これは、数字が小さいほうがメインの見出しを意味します。主題には<h1>を使い、章題には<h2>を使い、副題には<h3>を使う、といったような形で使用します。

<h1>主題</h1>
<h2>章題</h2>
<h3>副題</h3>


リンク

リンクはHyperTextの説明にも出てきましたが、それほどにWEBにとって重要なものです。
HTMLでは、リンクはアンカー要素と呼ばれる<a>要素を用いて指定します。文章をリンクにするにはhref属性を追加し、href属性の値にはリンク先の URLを書き込みます。

リンクは、WEBページ以外にもメールアドレスや電話番号へのリンクも作成することが出来ます。

<a href="https://homoludens.dev/">HomoLudens</a>


画像

写真やイラスト、ベクター画像など、画像はWEBサイトを華やかなものにしたり、内容をより分かりやすいものにしたりと、WEBサイトで非常によく使われます。

HTMLでは、画像は画像埋め込み要素である<img>要素を用います。必須のsrc属性に画像ファイルのパスを書き込むことでその画像を表示できます。

<img>要素には必須ではありませんが、alt属性を指定することが推奨されています。alt属性は、画像のテキストによる説明です。この属性を指定することで、何らかの理由で画像が表示されなかった場合に、その画像の代わりにalt属性で設定した文がテキストが表示されます。また、WEBサイトを読み上げるスクリーンリーダーを利用した場合も、alt属性で設定した文を読み上げてくれます。このようにいわゆるアクセシビリティの観点から、alt属性を設定することはとても重要なことです。

<img src="images/HomoLudens_logo.svg" alt="HomoLudensのロゴ">


まとめ

HTMLについて、HTMLの意味や具体的な要素を見てきました。簡単にまとめますと、

  • HTMLは、高機能なテキストに目印をつける言語!
  • HTMLの要素は、タグとコンテンツ(ないこともある)で構成される
  • 属性は、追加情報を要素に設定するもの
  • 色々な要素があり、適切な要素を使い分ける(マークアップ)


また、他の記事でHTMLの書き方について紹介したいと思います。この記事を読んでHTMLについての理解が深まれば幸いです!


~~~

HomoLudensでは、小・中学生を対象にオンラインで一対一のプログラミングレッスンを行っております。
ご興味があられましたら、無料のトライアルをぜひお試しください。
お申し込みは下記のURLから受けつけております。
https://homoludens.dev/trial