☰
Hiroblog Written by Hiro Terao

【初心者向け】これでわかる！HTMLとは？【専門用語なしで解説】

Programming


プログラミング初心者
「プログラミングって言えば、HTMLって言葉をよく聞くけど。そもそもHTMLってなに？HTMLの具体例はなんだろ？HTMLの役割は？この際に知っておきたいなぁ！」

こう言った、疑問に答えます。

本記事のポイント

  • ①HTMLとは？簡単に解説
  • ②身近にあるHTMLの例
  • ③主なHTMLの役割
  • ④ゼロからHTMLを学習するなら

記事の信頼性

現役エンジニアの僕が解説します。>> Twitter
(僕は体育会文系出身なので、難しい専門用語を使わずに解説します。)

こう言った、僕が解説します。

なので、この記事を読み終わった後には
プログラミング初心者の方が「HTMLとは？」を理解することができます。

①HTMLとは？簡単に解説

whatishtml

HTMLとは？

HTMLとは、Webページを作成する為に開発された言語です。

HTMLの正式名称

  • 日本語：ハイパー・テキスト・マークアップ・ランゲージ
  • 英語：Hyper Text Markup Language

意味分解：Hyper Text Markup Language

  • Hyper Text →テキストを超える
  • Markup Language →目印を付ける言語

ザックリ言うと、Webページのリンクをクリックすれば
様々なページに移動できることを実現したのがHTMLです。

例えば、コチラをクリックするとHTMLクイックリファレンスに移動できます。

HTML豆知識

  • HTMLは論文を共有するために開発された。
  • WHATWGという機関がHTMLの標準・使用を決めている。
  • 拡張子は「~.html/~.htm」(Wordなら~.docxなど)

世の中ほとんどのWebサイトはHTMLで構成されています。

つまり、HTMLとはWebページを作成する為に開発された言語です。

②身近にあるHTMLの例

website

HTMLの具体例

  • Webサイト
  • メール
  • アプリ

Webサイト

WebサイトはHTMLを使って作成されています。
それを確認する方法があるので、参考程度に見てみましょう。

恐縮ですが、僕のHiroblogで確認しましょう。
普段見ているWeb画面・Webサイトの裏側で確認します。

普段見ているWebサイト画面

view

Webサイトの裏側

Windowsの方は Ctrl + U
Macの方は⌘ + Option + U
を同時に押すことで、確認することができます。
code

上記の画像が、HTMLで書かれたソースコードになります。

メール

メールでもHTMLが使われていたりします。

例えば、メルマガ・登録したサイトからのお知らせを受け取った経験はないですか？
あのようなメールはHTMLを使って作成されており、通常のメールより自由に構成できるのでHTMLが使用されています。

アプリ

HTMLを活用することでアプリを開発することができます。

厳密に言えば、HTMLとCSS・JavaScript・PHPと言った言語
などを組み合わせてモバイルアプリなどを開発することができます。

私自身も、HTML・CSS・JavaScriptを使って
・簡単なホームページ
・テトリスゲーム
なども開発した経験があります。

つまり、Webサイト、メール、アプリなどもHTMLによって作られています。

③主なHTMLの役割

task

見出しの作成

見出し：h1~h6タグ

  • h1：1番目に大きな見出し
  • h2：2番目に大きな見出し
  • h3：3番目に大きな見出し
  • h4：4番目に大きな見出し
  • h5：5番目に大きな見出し
  • h6：6番目に大きな見出し

こんな感じの表示になります。
header

箇条書きの作成

箇条書き：点・番号など

  • 点：ulとliタグを使用
  • 番号：olとliタグを使用

こんな感じの表示になります。
ulliol

リンクの作成

リンク：aタグ

  • aタグを使用してHiroBlogのリンク作成

こんな感じの表示になります。
link

これらは、あくまで一例ですが、様々なタグが用意されており
柔軟にWebへの表示を行うことができます。

④ゼロからHTMLを学習するなら

study

HTMLを学習するなら、まず無料サイトで始めるのが良いです。

なぜなら、無料サイトとは言え、内容が濃いものがあるからです。

オススメ：無料学習サイト

いずれか3つで学習すれば、基礎はマスター出来ます。

挫折しない学習のコツ

  • 全てを暗記しようとしない
  • 基礎を終えたら自分で作ってみる
  • 綺麗にノートにまとめようとしない
  • 学んだことはSNSでアウトプットする

こんな感じで、やっていけば爆速成長できます。

⑤最後に…

aciton

本日の内容を振り返ります。

まとめ

  • ①HTMLとは？簡単に解説
  • ②身近にあるHTMLの例
  • ③主なHTMLの役割
  • ④ゼロからHTMLを学習するなら

①HTMLとは？簡単に解説

Webページを作成する為に開発された言語です。

②身近にあるHTMLの例

Webサイト・メール・アプリなどです。

③主なHTMLの役割

文書構造の作成(=見出し・箇条書き・リンク)

④ゼロからHTMLを学習するなら

無料学習サイト
・Progate
・ドットインストール
・YouTube(はじめてのHTML24本)

繰り返しになりますが、HTMLとはWebページを作成する為に扱う言語です。

プログラミング初心者の方はHTMLから学習を始める人が多いと思います。
今回でHTMLのイメージが付いたと思うので、実際に手を動かしてやってみましょう。

プログラミングスキルを身に付けることで、人生の自由度がかなり上がります。

これから挑戦する方を全力で応援します。
また、YouTube・Twitterでも発信していますので、参考にしてください。
>> Twitterはコチラ
>> YouTubeはコチラ

RELATED

HOME >  Programming >  【初心者向け】これでわかる！HTMLとは？【専門用語なしで解説】