HTMLって何?簡単解説!マンガでわかるHTML入門

公開日: : 最終更新日:2014/05/22 HTML ,

HTML入門マンガ1

HTML入門マンガ2

HTMLとは?

「自分でWebページを作るぞ!」となったときに、まず最初に必要なのがHTMLです。
でも「HTML」ってそもそも何なんでしょう?

HTML

HTMLとは、
Webページ上の文章を書くための言語のことだよ


Webデザイン初心者 わかば

HTMLのことを調べてみたら、「HTMLはマークアップ言語だ」って書いてあったよ。

マークアップ言語って初めて聞く言葉だなぁ。
なんだか難しそうね


HTML

全然難しくないよ!
HTMLは、素直で単純な言語なんだ。
人間である閲覧者に対して、そしてブラウザや検索エンジンのロボットに対して、文章の構造をよりわかりやすく見せてあげることが、HTMLの役目なんだよ。

例えば、わかばちゃんが書いた文章が、使うパソコンやブラウザによって、わかばちゃんの意図と違った構造で表示されたとしたら、どう思う?


Webデザイン初心者 わかば

う〜ん、それは困るなぁ


HTML

そうだね。
どのパソコン・どのブラウザで見ても、文章の構造がちゃんとわかったほうがいいよね!
そのために、文章にルール化された印をつけてあげて、人にもプログラムにも優しい形にすることがHTMLの目的なんだ。


HTMLとは、「ハイパー テキスト マークアップ ランゲージ」の頭文字から名付けられました。

「マークアップ」とは、「文章に目印をつける」という解釈でOKです。

HTMLを使うことで、「ここからここまでは見出し部分」「ここからここまでは段落部分」というように、範囲を指定することができます。

HTMLの基本のかたち

HTMLファイルには二つの部分がある

ひとつのHTMLファイル(マイクロソフトオフィスでいう、ひとつのWordファイルのようなもの)には、2つの部分があります。

  1. HTML文書全体の情報記述する部分
  2. HTML文書の内容を記述する部分

1.HTML文書全体の情報記述する、head要素

head要素内には、ページのタイトル名や、関連付けたい外部ファイル(スタイルシートなど)を記述します。

ブラウザ上の見た目では、ブラウザ上部のタブにタイトル名が表示されます。

2.HTML文書の内容を記述する、body要素

body要素内には、Webページ上に表示させたいコンテンツを書いていきます。ブラウザ上で、Webページのコンテンツとなって見える部分です。閲覧者が見る画像や文章を書いていくのはこのbody要素内です。

HTMLでは文書を構成するパーツを「要素」と呼んでいます。
例えば、「このHTMLファイルに関する情報を記述していますよ」という部分は「head要素」で囲います。
「ここからここまでがHTMLファイルの内容だよ」という部分は「body要素」で囲います。
このように、いろいろな要素を組み合わせていくことでWebページを作ることができます。

文章に目印をつけてあげる方法

閲覧者やプログラムにとって、「ここからここまでがこの要素だ」ということが分かりやすいように、文中にタグという目印をつけましょう。

Webデザイン初心者 わかば

タグが1つだと、「ここからここまで」という範囲指定ができないよね?


HTML

その通り!範囲を指定するときは、「開始タグ」「終了タグ」をセットで使うんだよ。
例えばこんな感じだね。


body要素をマークアップしてみよう

    <body>ボディ要素の内容</body>
HTML

こうやって要素を組み合わせてページを作っていくんだ。
次回の記事では、今日学んだ要素を使って、HTMLで1ページ作ってみよう!


HTML おすすめの本

HTML5の基本を優しく学べる本です。初心者の方だけでなく、「もう一度基本に立ち戻って学んでみたい・HTML5って今までのHTMLと具体的に何が変わったの?」という方にもおすすめです。

記事作成:湊川 あい
マンガ・イラスト:湊川 あい


  • Pocket       
  • このエントリーをはてなブックマークに追加

関連記事

Web制作で使う言語たちを図解してみた HTML,CSS,JavaScript,PHP

HTML CSS JavaScript PHPの関係を図解してみた HTML 「HTML

記事を読む

HTMLの基本構造を簡単解説 マンガでわかるHTML入門

HTMLちゃんはなぜ混乱しているの? HTMLちゃん、どうしたの!? 突然混乱し

記事を読む

マンガでわかるWebデザインが書籍化!全国の書店・アマゾンで発売

マンガでわかるWebデザインが本になりました! 「わかばちゃんと学ぶWebサイト制作の基本」 出

記事を読む

HTMLちゃんとCSSちゃんを擬人化するとこんな感じ

  ちょっとラクガキ。 HTMLちゃんとCSSちゃんの日常を描いてみました。

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

『わかばちゃんと学ぶ』シリーズ #技術書典 5に出展します【あ20】

◎貴サークル「湊川あいの、わかば家。」は、 あ20 に配置さ

#マンガでわかるScrapbox Kindle化しました:便利な使い方をイラストで

技術書典4で、配布開始後30分で150冊即なくなった「マンガでわか

Live2Dモデル制作 ご依頼承ります
Live2Dモデル制作依頼受付中(サンプルモデル・制作料金掲載)

こんにちは。本ページをご覧頂きましてありがとうございます。 フリー

YouTubeヘッダー画像のサイズは2560×1440ピクセル。チャンネルアート作り方2018

チャンネルアートの作り方 2018年8月時点での、YouTubeチャ

わかばちゃんと学ぶ Git使い方入門 PDF版ダウンロードはManateeで!

御礼 拙著「わかばちゃんと学ぶ Git使い方入門」が、2017年4月

→もっと見る

PAGE TOP