HTMLとは?|デザイン用語辞典

デザイン用語辞典

HTMLとは

HTMLは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、WEBサイトの基本構造を記述するための言語です。

個人のブログから企業のコーポレートサイトまで、ほぼすべてのWEBサイトがこのHTMLで書かれています。
もちろん、このサイトも同様です。

HTMLのタグ

HTMLでは、タグと呼ばれる決まった形の記号で挟むことにより、文字列に特定の役割を持たせることができます。

例えば、 < h1>見出し1< /h1> と記述すると、「見出し1」という文字が大きな見出しとしての役割を持ちます。

この< h1>がHTMLのタグです。

HTMLタグの例

<h1>, <h2>, <h3>, <h4>見出し
数字が小さいほど大きな見出しになります。
<p>文章</p>段落
文章を記述する基本的なタグです。
<br>改行
段落内で改行する際に使用します。
<a href=”URL”>テキスト</a>ハイパーリンク
テキストに”URL”へのリンクをつけます。
<img src=”URL”>“URL”の場所にある画像を表示します。
<ul>
<li>リスト1
<li>リスト2
</ul>
・リスト1
・リスト2
というリストを作成します。
<div>文章や画像をひとかたまりにまとめるタグです。
<form>文章を入力するフォームを設置するタグです。

このようにたくさんのタグを組み合わせて

見出し1
本文
見出し2
本文
・リスト1
・リスト2

といった構造を書いていきます。

構造を書くのね…うーん、なんとなくわかったけど…じゃあWEBサイトの見た目はどうやって変えているの?

見た目にはCSSという別の言語を使います。


構造はHTML、外見はCSS

HTMLはWEBサイトの構造を記述する言語だというお話をしましたが、それだけでは構造化されただけの文章の集まりです。

これにWEBデザイナーが作ったデザインを反映させていくには、CSSという別の言語を使用します
CSSは、HTMLのタグなどを指定して、そこに視覚的な効果を与える言語です。

CSSについてはこちらで詳しく解説しています。

WEBサイトは、構造をHTML、外見をCSSという言語で記述してできているということを覚えていただければ大丈夫です。


ゼロからHTMLを勉強するなら

実際にHTMLとCSSを使ってWEB制作をする際は、タグの他にも様々な知識が必要になります。
HTMLをゼロから勉強するには、こちらの本がおすすめです。

実例や図解が豊富で、具体的にイメージしながら勉強することができます。

HTML関連の記事一覧
デザイン用語辞典へ戻る

最後までお読みいただきありがとうございます。

Otto!

美大を卒業後、デザインプロダクションでデザイナーを5年。 その後、IT企業のPR戦略室でブランディングデザインを担当。 WEBデザインを中心に、ユーザーに寄...

プロフィール

ピックアップ記事

関連記事一覧