HTMLとは

HTMLとは「HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)」といって、ウェブページを作成するために開発されたマークアップ言語(*1)のひとつです。

目次

HTMLはホームページを作る言語

HTMLとは「HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)」といって、ウェブページを作成するために開発されたマークアップ言語(*1)のひとつです。

(*1)マークアップ言語とは

マークアップ言語は、文書やデータの構造を記述するための言語です。
通常、マークアップ言語は、タグ(特定の形式の注釈)を使用して文書内の要素を識別し、それらの要素に意味を付けます。
マークアップ言語は、コンピューターやブラウザが文書の構造を理解し、正しく表示するために使用されます。
マークアップ言語を使うことで、文章や文書の構造を明確にすることができ、ウェブページや文書のデザインやレイアウトを制御することができます。

マークアップ言語の種類

代表的なマークアップ言語は以下になります。

●HTML(HyperText Markup Language)
ウェブページを作成するための言語で、コンテンツの構造や意味を表現します。
ブラウザはHTMLを読み込んで、画像やテキストなどを表示します。

●XML(Extensible Markup Language)
データを構造化して表現するための言語で、HTMLと同じようにタグを用いて情報を表現します。
XMLは、Webサービスやデータベースなどで利用されます。

●Markdown
軽量で簡単なマークアップ言語で、文書の書式を指定するためのものです。
メモ書きやドキュメント作成など、プレーンテキストで書かれた文書を整形することができます。

現在、ホームページやネット通販、また、FacebookやTwitterなど、インターネット上で公開されているさまざまなウェブサービスのほとんどがHTMLで作成されています。

HTMLのページは、通常 .html または .htm (拡張子)を持つテキストファイルとして保存されます。テキストエディタ(*2)でこれらのファイルを作成し、ブラウザ(*3)を使用して表示することができます。

(*2)テキストエディタとは

テキストエディタとは、テキストを編集するためのソフトウェアのことで、WindowsやMacなどのパソコンに標準で搭載されていることが多いです。
代表的なテキストエディタとしては、Windowsに搭載されている「メモ帳」や、Macに搭載されている「TextEdit」があります。
また、機能が豊富なテキストエディタとして、Sublime Text、Atom、Visual Studio Codeなどがあります。

(*3)主要なブラウザ

・Google Chrome
・Microsoft Edge
・Mozilla Firefox
・Safari
・Opera
・Internet Explorer(現在は廃止されています)

HTMLには、文章の見出しや段落、リスト、画像などを表示するためのタグ(<>で囲まれた文言)があります。

例えば、<h1>〜</h1>タグは、見出しを表し、<p>〜</p>タグは、段落を表します。
また、<img>タグは、画像を表示するために使われます。

HTMLは、ブラウザによって解釈され、ウェブページを表示するために使用されます。
ウェブページのレイアウト、構造、および内容を定義することができ、CSS(Cascading Style Sheets)とJavaScriptといった他の技術と組み合わせて、ウェブページをより魅力的に、インタラクティブに、そして使いやすくすることができます。

このように、HTMLは非常に簡単な言語であり、初心者でも学ぶことができます。
HTMLの基礎をマスターすれば、ウェブページを作成するための基本的なスキルを身に付けることができます。

HTMLとは

HTMLタグの基礎を知る

HTMLタグについて

HTMLタグは、ウェブページのコンテンツを構造化して表現するために用いられる記号のことです。

タグには特定の意味や機能があり、ブラウザがタグを解釈して、Webページを表示します。
HTMLタグは、< >で囲まれた要素の名前と、その要素に適用される属性で構成されており、全て半角英数で記載します。
タグは、開始タグ< >と終了タグ</>で構成されます。

HTMLタグの種類は豊富|Joshiba MAGAZINE Created by mami
HTMLタグの種類は豊富

HTMLを覚える?覚える必要なし!

英語が苦手でしゃべれなくても、なんとなく理解できる、もしくは、スマートフォンで翻訳できれば、コミュニケーションができるから大丈夫!と思えれば、海外旅行はできます。

HTMLもコンピューター言語ですが、HTMLを覚えていなくても、なんとなく理解できる、もしくは、「辞書サイトで調べればわかるから大丈夫」と思えれば、ホームページ制作は可能です。

少々理解できなくても、ホームページ制作できますと言い切れる度胸が必要です。

とは言え、HTMLは、Webページの構造やレイアウトを決定するために使用されるマークアップ言語であり、HTMLタグはそれぞれ異なる役割を持っているので、基本的なHTMLタグを知っていることが役立ちます。

HTMLタグを完全に覚える必要はありませんが、基本的なタグを理解しておくことで、Webページの基本的な構造を作成することができます。
また、インターネット上には、HTMLタグの使用例やリファレンスが多数存在しているため、必要に応じて参照することができます。

HTMLコード参照サイト
基本となるHTMLコード一覧
【初心者向け】HTMLタグ一覧! よく使うものをまとめました
HTMLのよく使うタグ一覧!この15個さえ押さえればOK!
CSS参考サイト
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
コピペで使える見出しタイトルのCSSデザイン&サンプルコード35選
コピペで使える!ビジネスブログ向けのシンプルなCSSで飾る見出しデザイン30選

HTMLはどのように機能しているのか?

ホームページにおけるHTMLの役割は、Webページの構造や内容を記述することです。
HTMLは、テキスト、画像、音声、動画などのコンテンツを含むWebページを作成するための言語であり、Webブラウザによって解釈されて、ユーザーが見ることができるWebページを作成するために必要不可欠な役割を果たしています。
HTMLを使用することで、Webページの構造や要素、ページ内リンクなどを指定することができます。
また、HTMLは構造的なマークアップ言語であるため、Webページの検索エンジン最適化(SEO)にも重要な役割を果たします。

ホームページにアクセスしてページを見るというアクションを分解して理解するとHTMLの役割が見えてきます。

ホームページが表示されるまでの一般的な流れは以下のようになります。

  1. ユーザーがWebブラウザを開き、アドレス欄にアクセスしたいサイトのURLを入力する。
  2. Webブラウザは、入力されたURLに対応するWebサーバーに接続を試み、HTTPリクエストを送信する。
  3. Webサーバーは、リクエストされたページを探し、HTMLやCSS、JavaScriptなどのコンテンツを含むHTTPレスポンスを返す。
  4. Webブラウザは、受信したHTTPレスポンスを解釈し、HTML文書をパースして、ウェブページの構造を理解する。
  5. Webブラウザは、HTML文書の中で参照されている画像やスタイルシートなどの追加ファイルをダウンロードする。
  6. Webブラウザは、ダウンロードした画像やスタイルシートを適用して、ウェブページを表示する。

このように、ユーザーがWebサイトにアクセスすると、WebブラウザがWebサーバーにリクエストを送信し、WebサーバーがHTTPレスポンスを返すことで、Webページが表示される仕組みとなっています。


よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

好きな言葉:縁の下の力持ち

✜経歴✜
出産を機に前職を退職
前職:製造会社にて総務・経理事務
現在、3歳(♀)と6歳(♂)の2児の母。

■2018年 「大分県自営型在宅ワーカー実践講座 文字起こしコース」を受講
以来、よりフリーランスの在宅ワーカーとして活動

■2022年「大分県自営型テレワーカー実践講座 webサイト制作コース」受講
Wordpressを使ったwebサイト制作を学び、チームで1つのサイトを制作したり、
週1回、webマガジンを作成しながら実践的にwebサイト制作を学んでいます。

■2023年「Adobe Creative College Premiere Proコース」を受講し、動画編集のスキルを習得中!

✜できること✜
・各種事務作業
・パワーポイント作成
・仕訳け等経理事務
・文字起こし
・音声起こし
・データ入力
・ライティング
・webサイト制作
・Canvaを使用してのフライヤー作成や画像作成
・SNS投稿代行

コメント

コメントする

目次