カテゴリー

  • プログラミング
  • 英語学習
  • 海外
  • キャリア
  • Kredo
Kredoオンラインキャンプ
スタッフ募集中
Kredoオンラインキャンプ体験談
無料カウンセリングはこちら

セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」

無料カウンセリング予約
  • プログラミング
    • Web・プログラミング(学習)

    • Web・プログラミング(知識)

    • AI・テクノロジー

    • デザイン

  • 英語学習
    • 英語学習法

    • 英語フレーズ

  • 海外
    • 海外移住

    • 海外留学

    • 海外就職

  • キャリア
    • 転職情報

    • キャリアデザイン

  • Kredo
    • ニュース・キャンペーン情報

    • セブ島情報

    • インタビュー

  • 無料ウェビナーに予約する >
5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • プログラミング
  • Web・プログラミング(知識)
  • HTMLの基本とよく利用されるタグの使い方を徹底解説【初心者向け】

HTMLの基本とよく利用されるタグの使い方を徹底解説【初心者向け】

アバター画像
太田 ヨウタ
公開日:2023.03.10
更新日:2023.03.10
Web・プログラミング(知識) |
  • ツイート
  • シェア
  • はてな
  • ポケット
【初心者向け】HTMLの基本とよく利用されるタグの使い方を徹底解説
少年

Webサイトを作ってみたいけどHTMLがわからない

少女

HTMLの基本や使い方を知りたい

こんな疑問、要望に答えるべくHTMLの基本からよく利用されるタグの使い方などについて解説する記事です。具体的には、次の順番でお話ししていきます。

  • HTMLとは?
  • HTMLを確認する方法
  • HTMLでWebページを作成する方法
  • HTMLでよく利用されるタグの使い方
  • HTMLだけでWebページは作れる?

これからWebサイトを作ってみたい、というあなたに向けた記事ですので、ぜひご覧ください。

記事のもくじ

  • HTMLの基本1:HTMLとは?
    • HTMLの基本知識
    • HTMLの使い方
  • HTMLの基本2:HTMLを確認する方法
  • HTMLの基本3:HTMLでWebページを作成する方法
    • ファイルの拡張子は「.html」
    • HTMLをテキストエディタで書いてみよう
  • HTMLの基本4:HTMLでよく利用されるタグと使い方
    • ハイパーリンクを作成(aタグ)
    • 画像を表示(imgタグ)
    • 見出し、段落、改行(hタグ、pタグ、brタグ)
    • リストを作成(ulタグ、olタグ)
    • テーブルを作成(tableタグ)
    • グルーピングする(divタグ、spanタグ)
  • HTMLの基本5:HTMLだけでWebページは作れる?
  • まとめ:HTMLの基本を抑えてWebページを作ってみよう

HTMLの基本1:HTMLとは?

はじめに、HTMLとはどんなものなのか、基本的な使い方とあわせて、基礎知識として覚えておきたいことを解説します。

HTMLの基本知識

HTMLは、HyperText Markup Languageの略称です。

Webページを形作るための骨組みとして、利用されるマークアップ言語となります。 私たちが普段見ているWebサイトは、HTMLによって書かれた文書をブラウザが読み込むことで表示されています。

ハイパーテキストとは、ハイパーリンクを埋め込むことができる高機能なテキストのことです。

Webページのリンクのことをハイパーリンクと呼びます。 ハイパーテキストに目印をつけることができる言語がHTMLだと覚えましょう。

通常の文書と異なり、見出しや段落・表などの目印をつけることにより、Web表示した際の見た目を形作ります。 画像・動画の配置やハイパーリンクの配置など、Webサイトを作るために必要となる機能を実現する言語です。

HTMLの使い方

HTMLは「タグ」と呼ばれる目印を使用します。タグにはそれぞれ意味があり、主に「<>~</>」といった形でタグで囲んで使用することが基本です。

よく利用されるタグについては、後ほど詳しく解説します。 また、HTMLは基本となる形があります。

基本形から構成したい要素を追加していくことでWebページが作られているのです。 HTMLの基本形は次の通りです。

<!DOCTYPE html>でHTML文書であることを宣言し、<html>~</html>の中にHTMLを記載していきます。

<head>~</head>で囲まれた部分は、本文ではなくメタデータを記載する部分となり、ページのタイトルやCSSの読み込みなどを記載する部分です。

実際の本文は、<body>~</body>で囲まれた中に記述していくことになります。 HTMLを使う上で、最低限守らなければならない基本形ですので覚えておきましょう。

HTMLの基本2:HTMLを確認する方法

私たちが普段見ているWebページはHTMLで作られていますが、実際にHTMLの内容を確認する方法があります。

これからHTMLの学習をしたいと考えているのであれば、普段見ているWebページのHTMLを確認することは、非常に有用ですので覚えておきましょう。

WebページのHTMLを確認する方法は、次の通りです。

HTMLを確認する手順
  1. HTMLを確認したいWebページを開く
  2. Webページ上で右クリック
  3. 「ページのソースを表示」をクリック

ブラウザによっては、「ページのソースを表示」が出ないことがありますが、その場合は対象のWebページで「F12キー」を押して開発者ツールを開きましょう。

HTMLのソースとあわせて、さらに詳しい情報も見ることができますので、Webページがどのように形作られているのかのイメージを掴むことができますよ。

HTMLの基本3:HTMLでWebページを作成する方法

それでは、具体的にHTMLを使ってWebページを作ってみましょう。

他のプログラミング言語と異なり、HTMLは特別な開発環境を用意する必要がありません。 簡単なWebページを作る方法について解説していきます。

ファイルの拡張子は「.html」

HTMLをファイルとして保存する際、拡張子を「.html」として保存します。

OSは拡張子によってファイルの種類を判断しているため、HTML文書だとOSに認識させるためです。

OSの設定によっては、拡張子が表示されないこともあります。 その場合は、次の手順で拡張子を表示する用に設定を変更してください。

Windowsの手順
  1. 「Windowsキー+S」で「フォルダオプション」を検索
  2. 「ファイルとフォルダーの検索オプションの変更」をクリック
  3. 「表示」タブから「登録されている拡張子は表示しない」のチェックを外す

Macの手順
  1. Finderを開く
  2. Finder-「環境設定」を開く
  3. 「すべてのファイル名拡張子を表示」にチェックを入れる

パソコンでHTMLを書くための準備としては、ファイルの拡張子を表示させることだけです。

HTMLをテキストエディタで書いてみよう

HTMLは、OS付属のテキストエディタで書けます。

Windowsであれば「メモ帳」、Macであれば「テキストエディット」を使いましょう。具体的な手順は次の通りです。

HTMLを作成する手順
  1. テキストエディタを開く
  2. HTMLの基本形を入力
  3. ファイル名を「index.html」として保存

たったこれだけでHTML文書は完成します。 HTMLの基本形は先ほど紹介したものと同じですが、以下の文章をコピー&ペーストして利用してください。

HTMLの基本形
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
本文
</body>
</html>

作成したHTMLファイルをダブルクリックすると、ブラウザで表示されます。

本文を修正したりして、実際に動きを確認してみましょう。 もっといろいろなことをWebページで表現するためには、さまざまなタグを利用しなければなりません。

Webページ作成でよく利用されるタグについては、次の章で解説していきます。

HTMLの基本4:HTMLでよく利用されるタグと使い方

HTMLはパソコンで簡単に作成できることがわかりましたが、これから紹介するタグを覚えると、さまざまな表現をWebページで行えるようになります。

ぜひ、実際に試しながら覚えていきましょう。

ハイパーリンクを作成(aタグ)

Webページにリンクを作成するためには、Anchor(アンカー)「aタグ」を利用します。 aタグの基本的な使い方は次の通りです。

タグには「属性」を付与することができ、hrefの後にリンク先のURLを入力すると、リンク文字列がハイパーリンクとなります。

また、「target=”_blank”」はよく利用される属性の一つで、リンク先を別ウィンドウ(別タブ)で開くことを指定する属性です。

画像を表示(imgタグ)

画像を表示するためには、「imgタグ」を利用します。

「src」属性で画像のURLを指定します。パソコン内のローカル環境であれば、相対パスでも指定可能です。 「alt」属性は、画像が表示できない場合に表示する代替テキストを指定します。

「width/height」属性は、画像の表示サイズを指定するものであり、「%」による相対指定や「px」による絶対指定が可能です。

見出し、段落、改行(hタグ、pタグ、brタグ)

見出し、段落、改行では、それぞれ「hタグ」「pタグ」「brタグ」を使用します。

見出しは、文章の章題や設題を指定するものであり、「<h1>~<h6>」まで利用できます。 数字が小さいほど、大きな見出しであり、表示サイズも大きくなります。

一般的に見出しとして利用されるものは「<h2>~<h4>」までであり、「<h1>」はページの章題として利用されるため、本文中ではほとんど利用しません。

pタグはParagraphの略であり、囲まれたテキストは1つの段落であることを表します。

pタグの利用頻度は高く、テキスト部分は基本的にpタグで囲むものであることを覚えておきましょう。

最後に、文章を改行する際に利用するタグがbrタグです。

HTML文書では、HTMLソース内の改行がそのままWebページに反映されるわけではありません。改行する場合はbrタグを利用しましょう。

リストを作成(ulタグ、olタグ)

箇条書きや、番号付きリストを作成するためには、「ulタグ」「olタグ」を使用します。

ulタグはUnordered Listの略であり、順序がない箇条書きのリストであることを表します。 olタグはOrdered Listの略であり、順序付きリスト(番号付きリスト)です。

リストを作成する際は、それぞれのタグで囲むだけでなく、データ要素を指定する「liタグ」をあわせて利用しなければなりません。

テーブルを作成(tableタグ)

テーブル(表)を作成する際は、「tableタグ」を利用します。

tableタグは少し複雑です。 tableタグも単体で使うことはなく、「trタグ」「thタグ」「tdタグ」などと組み合わせて利用します。

trタグはTable Rowの略であり、テーブルの行(横方向)を指定するタグです。 trタグで囲まれた部分は横並びに表示され、trタグごとに行が作成されます。

thタグはTable Headerの略であり、テーブル項目のタイトルを指定するタグです。

デフォルトでセンタリングされ、フォントは太字で表示されます。 そして、tdタグはTable Dataの略であり、テーブルのデータを指定するタグとなります。

tableタグに関連するタグには、多くの属性が指定可能ですので、今回紹介した基本の形を覚えて、いろいろと試してみてくださいね。

グルーピングする(divタグ、spanタグ)

HTML文書内の要素をグルーピングするために利用するタグが「divタグ」と「spanタグ」です。

divタグとspanタグは他のタグと異なり、単体では意味を持っていません。

しかし、HTML文書内の要素をグルーピングすることにより、さまざまな装飾をグループ単位に行うことができます。

divタグで囲まれた部分は「ブロックレベル要素」、spanタグで囲まれた部分は「インライン要素」としてグルーピングされます。

それぞれの違いとして、divタグでは前後に改行が挿入され、spanタグでは改行が挿入されません。

文章の一部を装飾したい場合はspanタグを利用し、段落・ブロック単位で装飾したい場合はdivタグを利用しましょう。

これらのタグはCSSとの相性がよく、頻繁に利用されるタグですので、ぜひ覚えておいてください。

HTMLの基本5:HTMLだけでWebページは作れる?

AI(人工知能)エンジニアになるために資格取得は必須? HTMLだけでWebページは作れます。しかし、私たちが普段見ているようなWebページほどの完成度とはなりません。

なぜなら、私たちが普段見ているWebページは、CSSやJavaScriptなどと組み合わせて作られているからです。

HTMLはWebページの骨組み部分であり、Webページを表示する上では必要不可欠なマークアップ言語です。

しかし、見た目のよいWebページを作るためには、CSSやJavaScriptとの組み合わせは欠かせません。

HTMLやCSS、JavaScriptの関係を簡単に表すと次のようなものになります。

  • HTML:Webページの見た目を作る
  • CSS:Webページの見た目を調整する
  • JavaScript:Webページに動きをつける

HTMLだけでもWebページは作成できますが、見た目のよい高度なWebページを作成するためには、CSSやJavaScriptなどが必要であることを覚えておきましょう。

それぞれの違いについて、詳しく知りたい方はこちらの記事も参照ください。

【おすすめの関連記事】

【初心者向け】HTMLとCSSの具体的な違いから学習方法・使い方まとめ

まとめ:HTMLの基本を抑えてWebページを作ってみよう

HTMLは、Webページを作成するための基本となるマークアップ言語です。パソコンさえあれば、特別な開発環境を用意することなく、簡単にHTML文書を作成することができます。

HTMLだけでもWebページは作成できますが、見た目のよい高度なWebページを作成するためには、CSSやJavaScriptなどは欠かせません。

はじめからすべてを習得しようとすると覚えることが多すぎて挫折してしまいかねないため、まずは最も基本となるHTMLから習得するとよいでしょう。

今回紹介したタグを利用して、実際にHTMLを書きながら覚えていくことをおすすめします。 紹介した以外にも、タグは多く存在していますので、少しずつ覚えてみてはいかがでしょうか。

英語でプログラミングが学べるKredoオンラインキャンプ

プログラミング×英語を身につけてグローバルに活躍しませんか?

当メディアを運営しているKredoでは、プログラミング×英語が学べるオンラインスクール「Kredoオンラインキャンプ」を運営中です。プログラミング×英語を身につけた当校の卒業生はグローバルIT企業、外資系企業、海外就職、フリーランスへのキャリアチェンジを実現しています。これからの時代に必要な「英語×IT」のスキルを身につけてグローバルに活躍しませんか?

Kredo オンラインキャンプへ
  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
アバター画像
太田 ヨウタ

IT関連企業にてインフラエンジニア(SE)として官公庁や銀行などのシステム更改をメインに約10年従事。基本情報技術者・ネットワークスペシャリスト・情報セキュリティスペシャリストなどの資格も取得。その後、IT・Web専門ライターとして、プログラミング、ネットワーク、セキュリティ、AIなどの解説記事を中心に執筆している。「専門知識を初心者でも理解できるようにわかりやすく書く」ことを心がけている。

関連記事

  •  decoding
    Web・プログラミング(知識)

    CSSの基礎とよく使うプロパティを解説【初心者向け】

  •  decoding
    Web・プログラミング(知識)

    CSSの記号の意味「#」「>」「$」など〜使い方とあわせて完全網羅〜

  •  decoding
    Web・プログラミング(知識)

    Rubyで作られたWebサービス・アプリ12選!Rubyの可能性に迫る

  •  decoding
    Web・プログラミング(知識)

    CSSの2大レイアウトとは?覚えておきたい基礎知識や考え方、使い方【初心者向け】

よく読まれている記事

  •  decoding

    【無料オンラインセミナー】グローバルIT人材を2,000名輩出した海外テック企業代表が語る。未経験から7ヶ月で即戦力 グローバルIT人材を目指す方法:3/27(月) 〜 3/29(水), 4/3(月) 〜 4/5(水) 20:30 ~

  •  decoding

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  •  decoding

    【メディア掲載】Kredoオンラインキャンプを紹介していただいた生徒様、企業様の紹介

  •  decoding

    卒業生インタビュー

  •  decoding

    おすすめ記事

IT留学オンライン
新規CTA
@KREDO JAPAN Inc. 2023 All rights reserved.
Kredo オンラインキャンプ なぜ、プログラミング×英語なのか 英語が苦手な方へ 体験談 Webデザインコース Webデベロップコース インターン型実践プログラム IT英語コース カウンセリング予約 資料請求
Kredo ラーニング サービスサイト (準備中) KredoIT 留学 (現在Kredoオンラインキャンプに変更) 運営メディア Kredo Blog
運営会社 会社概要 採用情報 利用規約 プライバシーポリシー 特定商取引に基づく表示 お問い合わせ