カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

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

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

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • 【初心者向け】HTMLの基本とよく利用されるタグの使い方を徹底解説

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

太田 ヨウタ
太田 ヨウタ
公開日:2019.12.14
更新日:2020.02.19
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を書きながら覚えていくことをおすすめします。 紹介した以外にも、タグは多く存在していますので、少しずつ覚えてみてはいかがでしょうか。

  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
太田 ヨウタ
太田 ヨウタ

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

関連記事

  • Web・プログラミング

    初心者必見!Pythonの詳しい導入手順を徹底解説【Windows・Mac別】

    2020.10.19
  • Web・プログラミング

    Rubyで開発?Ruby開発に向いているもの&開発に必要なことまで解説

    2020.09.26
  • 【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!
    Web・プログラミング

    【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!

    2020.09.25
  • 【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!
    Web・プログラミング

    【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!

    2020.09.11
kredo it 英語 留学

よく読まれている記事

  • 2020.12.03

    【1/6&1/7 無料オンラインセミナー】なぜ今、プログラミング × 英語を身につけるべきなのか?

  • Kredo CEO横田猛夫さん
    2019.06.26

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

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

  • ショッピングを楽しんでいる男女のイメージ画像
    2019.02.12

    海外就職を成功させたい人へ!経験者が教えるメリットとデメリット

  • 熱心にプログラミングを教えるフィリピン人講師と日本人留学生

    【日本語で学んでいる場合じゃない】“英語”でIT・プログラミングを学ぶメリットとは?

IT留学オンライン
kredo 留学

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.