Webデザイン

HTMLとは?名前の意味やバージョン、書き方などを説明します。【ホームページ制作入門講座】

2019年12月26日

ホームページ制作に必須のコンピュータ言語(マークアップ言語)、HTMLについて【ホームページ制作入門講座】としてお話しして参ります。

このページでは、HTMLの名前の由来や概要、「HTMLとは?」等を中心にお話しし、具体的な記述方法等については別ページにて改めて説明していきたいと思います。

no image
HTMLの基本構造(要素と属性)から記述方法、各タグの役割と意味まで解説。【ホームページ制作入門講座】

続きを見る

この記事は、動画バージョンでも解説しておりますので、動画で学習されたい方は以下のリンクより閲覧下さい。

HTMLとは

HTMLとは、Hyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)の略で、コンピュータ上で文章を構築する為の記述形式で、文字をマークアップ(タグというモノで囲う)していく事です。

ハイパーはあまりピンときませんが、テキストマークアップランゲージという意味はなんとなく直感的にイメージできますよね。言葉の意味がわかると、スッと理解できるようになります。

HTMLのバージョン

ホームページを制作するには「HTML!」という印象があり、それで概ね間違いではないのですが、実はHTMLにはバージョンがあり、バージョン毎に呼び名が違ったりします

過去には、XHTML1.0HTML4.01などがあり、独特な呼び名になっておりました。2014年から現在2019年は、HTML5というものが最新バージョンになっております。

バージョンにより記述方式が違う

厄介な事にHTMLのバージョンにより、マークアップの記述形式が大きく違うところがあったりします。

最新バージョンのHTML5を使っていれば、過去バージョンを補完したりする事ができますのであまり気にする必要はありませんが、過去のHTMLバージョンで記述していく場合は、最新のHTML5の記述形式が通らなくなりますので要注意です。

最新バージョンの記述方法はSEOの検索エンジンの最適化にも適しており、記述方式も容易になっておりますので、初めて学習する際は必ずHTML5の記述方法で勉強するようにしましょう

マークアップの書き方

HTMLをマークアップするには、タグと呼ばれる<>で囲まれた英単語で、テキストを囲っていきます

マークアップの例

<p>今日は晴れです。</p>

この場合、「今日は晴れです。」という文章を、<p>というタグでマークアップしているという事になります。

マークアップのルール

文章をタグでマークアップする際にはルールがあります。

閉じタグ

マークアップする文章は、「閉じタグ」で終わらなければなりません

例えば<p>タグを利用する場合、閉じタグは、<p>のpの前に「/(スラッシュ)」を入れた</p>というものになります。

ですので、<div>今日は晴れです。</div>の場合は、<div>に対して、必ず閉じタグの</div>で終わらなければならないという事になります。

閉じタグが不要な特殊なタグもありますので、その場合は必ずしも閉じタグで終わらなければならない訳ではありません。

入れ子

また文章をタグで跨ぐ際は、「入れ子」にするというルールもあります

入れ子とは「階層構造を保持したまま挿入する」という意味です。

<p>今日は晴れです。</p>

この文章に強調するタグ<strong>で、「おそらく」という文章を挿入する場合は、以下のようになります。

<p>今日は<strong>おそらく</strong>晴れです。</p>

このように、タグでマークアップされた文章の中に、更にマークアップされた文章が入り込む形になります。

タグの種類

HTML5には、100種類近くのタグがあります。

しかし、全ての使い方や意味を覚えておく必要はありません

主要なタグはせいぜい2.30個ですので、そのあたりを中心に覚えておき、わからないところは都度調べるという形がベターかと思います。

主要なタグについては以下の記事にてご紹介しております。

no image
HTMLのbodyタグ内でよく使う、実践的基本タグおすすめ12選【ホームページ制作入門講座】

続きを見る

まとめ

いかがでしたでしょうか?

ホームページ制作に必須の言語HTMLは、Hyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)の略で、年代ごとにバージョンがあり、2014年から現在2019年まではHTML5というものが最新バージョンになっております。

テキストをマークアップする際には、「閉じタグで終わる」や「マークアップされた文章の中に、更にマークアップされた文章を入れ込む[入れ子]にする」というルールがあります。

HTML5には、マークアップできるタグは100種類近くありますが、全て覚える必要はなく、主要なところだけを覚えておき、わからない事は都度検索して調べていけば問題ないでしょう。

完全無料のクリエイター育成講座開催中!

人物イラストの無料ダウンロードサイト公開中!

人物イラストの無料ダウンロードならMIDO-KICHI

-Webデザイン

Copyright© デザイナーブリッジ , 2020 All Rights Reserved.