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と具体的に何が変わったの?」という方にもおすすめです。

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


The following two tabs change content below.

湊川 あい

湊川あい(みなとがわ あい) 絵を描くWebデザイナー。2014年より「マンガでわかるWebデザイン」をインターネット上に公開していたところ、出版社より声がかかる。 著書「わかばちゃんと学ぶWebサイト制作の基本」 Web連載「マンガでわかるGit」「わかばちゃんが行くオフィス訪問マンガ
  • Pocket       
  • このエントリーをはてなブックマークに追加

関連記事

image

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

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

記事を読む

image

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

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

記事を読む

マンガでわかるWebデザイン

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

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

記事を読む

image

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

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

記事を読む

Message

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

dakkou
マンガでわかるGitが書籍化!2017年4月21日 書店にて発売予定

マンガでわかるGitが書籍になります Web連載中の「マンガでわかる

tax_001
マンガでわかる確定申告 第1話 源泉徴収ってなあに?

第1話 源泉徴収ってなあに? 書籍「わかばちゃんと学ぶWebサイト制

HTMLちゃん
2016年ふり返り:本を出して会社を辞めてフリーランスになってました

湊川あいです。 Webデザイナーの傍ら、マンガや図解を取り入れた技術書

Gitコラボ漫画
【コラボマンガ】怖くない!黒い画面入門【 #シス管系女子 + #マンガでわかるGit 】

こんにちは!絵を描くWebデザイナーの湊川あいです。 普段 マンガでわ

emojigit_catch01
絵文字でわかるGit🍣 マージとリベースの違い・リセットとリバートの違い

こんにちは。絵を描くWebデザイナーの湊川あいです。 絵文字 / Em

→もっと見る

PAGE TOP