Webのいろは
MENU
  • HTML
  • CSS
検索結果
検索結果
  • HOME
  • >
  • HTML&CSS
  • >
  • Webサイト制作の基本となるHTMLとは?

Webサイト制作の基本となるHTMLとは?

2018/4/24 2019/10/14
いろは
Webサイト制作の基本となるHTMLとは?
  • B!

MENU

  • 1 HTMLの歴史
    • 1.1 最新バージョンの「HTML5」
  • 2 HTML構造の基本
    • 2.1 マークアップ
  • 3 まとめ

Webサイト制作において必須の言語としてHTMLがあります。

HTMLとは“Hyper Text Markup Language”というマークアップ言語のことで、英名の頭文字をとってHTMLと呼ばれています。
「ハイパーテキスト」を「マークアップ」するための「言語」で、要は文章にHTMLタグを加えて(=マークアップ)、文章に意味を持たせる仕組みのことです。

今回は、そんなHTMLのお話です。まさにWebサイト制作のいろはの「い」なので、基本を押さえてまずは簡単なところから学んでみましょう!

HTMLの歴史

HTMLは1993年に誕生した言語です。当初HTML1から始まり、2014年にはHTML5が勧告されています。
誕生から15年(2018年現在)の間に色々な改良が加えられてきました。
それぞれのHTMLバージョンによって、使用できるタグやそのタグの使い方の違いなどありますが、今から覚えるならばHTML5での仕様を覚えるのがいいと思います!

最新バージョンの「HTML5」

現在の最新バージョンはHTML5です。正確にはHTML 5.2で、.〇のように数年ごとにマイナーアップデートが行われています。
このマイナーアップデートでもタグの使用・不使用や意味の変化などが行われます。

HTML5ではheaderタグやfooterタグ、articleタグなどが追加され、それ以前と比べてよりセマンティックな構造を重視しているのでWebページ内のタグの使い方などを今まで以上にしっかりと把握してマークアップを行う必要があります。

一聞すると、難易度が高くなっているように聞こえますが、しっかりとタグの意味を捉えて使うことでサイトの質の向上やSEO対策としても有効です。また、タグの使いどころがより明確になったため曖昧な記述を減らせるというメリットもあると思います。

HTML構造の基本

HTMLでは原則、単語や文章をタグというもので囲みます。タグとは「<」と「>」で囲まれた文字、または文字列のことで100種類を超える様々な種類があり、それぞれが意味を持ちます。
以下がタグの使用例です。開始タグ(< >)と終了タグ(</ >)でテキストなどのコンテンツを囲みます。

<p>テキスト</p>
<h1>テキスト</h1>
<a>テキスト</a>

「<」と「>」の中の文字が”p”、”h1″、”a”という様にそれぞれ異なっていますよね。例えば「p」は段落を表現するときに使います。
段落には段落用のタグ、見出しには見出し用のタグ、表には表用のタグという風に使用していきます。
現在主流のHTML5ではタグの種類は100種を超えますが、普段よく使うタグは数十種類程度ですので、まずはよく使うタグを覚えておけば問題ないです!

ここで紹介した、p、h1タグに関しては以下の記事でまとめてあります。

<p>|正しい段落の使い方・記述方法
<h1>~<h6> | 見出しの使い方・記述方法

マークアップ

以下のようなテキストドキュメントがあった場合、パッと見で「今日の出来事」が見出し(タイトル)で、「今日は朝からうどん・・・」が本文だと理解できますよね。

しかし、コンピュータは全部同じ”文字の羅列”としか捉えることが出来ません。
なので、以下のようにそれぞれに適したタグ付けを行います。

<h1>今日の出来事</h1>

<p>今日は朝から青空でした。<br>
公園で日光浴をしてきました。<br>
気持ちよかったです!</p>

<p>気分もリフレッシュして、明日から<br>
また頑張ります。おやすみなさい。</p>

※ここでは分かりやすいようにタグが見えるようにしてあります。実際にタグは画面上に表示されません。

このように、コンテンツ内の部分ごとにコンピュータでも分かるように意味を持たせるため、それぞれのタグを適した場所に記述していく作業をマークアップすると言います。

まとめ

  • Webサイト制作にはまずHTMLが必要
  • HTMLの基本はコンテンツを対応したタグで囲むこと(マークアップ)
  • B!
Webサイト制作の基本となるHTMLとは?
いろは
Webのいろは

Relate Post

  • HTMLでCSSを読み込む3種類の方法
    HTMLでCSSを読み込む3種類の方法
  • Web(ウェブ)の意味と役割
    Web(ウェブ)の意味と役割
  • Webページの構造をブロックごとに見てみよう!
    Webページの構造をブロックごとに見てみよう!
  • <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
    <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法

アーカイブ

  • 2018年5月
  • 2018年4月

新着記事

  • <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
    2018-05-12
    <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
  • <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
    2018-05-11
    <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
  • <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
    2018-05-04
    <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
  • <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
    2018-04-30
    <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
  • <h1>~<h6> | 見出しの使い方・記述方法
    2018-04-30
    <h1>~<h6> | 見出しの使い方・記述方法
Webのいろは
  • Webのいろは の利用規約
  • お問い合わせ

Copyright © 2023 Webのいろは All Rights Reserved.