【HTML50分講座】まず覚えるHTMLタグ10選ーChapter02

今回は、まず覚えてもらいたいHTMLのタグ10選を説明していきます。

HTMLのタグとは

HTMLのタグとは、コンピュータに文書の意味（文書構造）を理解してもらうための印のようなものです。

タグは大文字・小文字が混在しても、問題なく動作することができます。ですが、ソースコードが見やすいように統一することをお勧めします。

開始タグ+終了タグ+内容全てを含んだモノを”要素”と呼ぶ

<title>これはタイトルです</title>を例に説明します。

<title> は要素名であり、要素名から始まるタグを開始タグと呼びます。それに対し、</title> のように、スラッシュ要素名で始まるタグは終了タグと呼びます。この開始タグから終了タグまでのひとまとまりを要素と呼びます。

ここから　→<title>これはタイトルです</title>　← ここまで全てを要素と呼びます。

タグには属性がある

ここで、簡単にタグの属性について触れておきます。属性の種類等については、後々説明しますので、まずは属性があることだけを理解してください。

属性とは、タグの機能拡張です。例えば、別のWEB（ブラウザ）に飛ぶことができるAタグというものがあります。
<a>Yahooにジャンプします</a>　　　　　　　　　　　　　　　　　　　　　　　　　　　但し、これだけではYahooのWEB（ブラウザ）を開くことができません。なので、Aタグの属性 hrefを使います。
<a href=”https://www.yahoo.co.jp/”> Yahooにジャンプします</a>

“要素”にはブロック要素とインライン要素の２種類がある

ブロック要素とは、1かたまりになっている箱をイメージしてください。箱のため、要素を並べた場合には、縦にどんどん並んで作られます。また、余白や縦横の大きさも自由に指定できます。最後に、ブロック要素の最大の特徴は、必ず改行が含まれていることです。

それに対し、インライン要素とは、簡単に言うと行の一部になります。一部であるため、要素を並べた場合には、横にどんどん並んで作られます。また、行の一部である為に余白はうまく指定できず、縦横の大きさは指定できません。

インライン要素の一覧

Aタグ,SPANタグ,IMGタグ,FONTタグなど

ブロック要素の一覧

DIVタグ,Pタグ,TABLEタグ,OLタグなど

例えば、DIVタグの一部の文字を赤文字に変更したい場合は、FONTタグを使うことで、文字色を変更できます。このFONTタグがインライン要素となり、DIVタグはブロック要素となります。

まず最初に覚えるタグ10選

HTMLタグ(=要素）は、100種類以上もあると言われています。この100種類の意味を理解し、使いこなすことはとても大変です。なので、まずは最低限必要なタグを10コ紹介していきます。

<HTML>タグ

HTMLタグとは、この文書がHTMLであることを示すタグになります。HTMLのプログラムでは必ず記述するべきタグになります。

HTMLの中身は大きく head と body の2つの要素に分けることができます。

文章構造を表す<HEAD>タグ

HEADタグとは、ブラウザや検索エンジンに必要な情報を届けるタグになります。そのHEADタグ内でMETA・TITLE・LINKタグを入れていきます。

  • METAタグとは、WEB（ブラウザ）の情報を書き込むタグになります。
  • TITLEタグとは、ページのタイトルを決めるタグになります。
  • LINKタグとは、外部ファイルを読み込むためのタグになります。

記述例：

  1. <haed>
  2. <meta charset=”UFT-8″>
  3. <title>ここページのタイトルです</title>
  4. <meta name=”description” content=”ページの要約文”>
  5. <link rel=”stylesheet” href=”style.css” type=”text/css”>
  6. </head>

説明：1と6行目のHEADタグで囲みます。2行目は文字コードを指定して文書内の文字化けを予防しています。3行目はWEB（ブラウザ）のタイトルになり、4行目はGoogleなどの検索サイトでの検索結果の要約文になります。最後の5行目は外部スタイルシートを参照しています。

HEADタグ内はWEB（ブラウザ）に表示されません。

HTML文章の本文を記述する＜BODY＞タグ

BODYタグとは、HTML文章の本文を表すタグになります。

BODYタグ内はWEB（ブラウザ）に表示されます。

HTML文章で1段落を表す<P>タグ

Pタグとは、paragraph（段落）の頭文字で、<p>～</p>で囲まれたテキストは1つの段落であることを示し、一般的なブラウザの場合、<p>～</p>の前後で1行分改行されます。

＜P＞タグのalign属性

<P>タグのalign属性を使うことで、Pタグで囲まれた文章内を左（left）・中央（center）・右（right）に寄せることができます。ちなみに、この属性は省略することも可能で、デフォルトでは左（left）が設定されています。

記述例：<p align=”center”>この文章は中央寄せです</p>

HTML文章でグループ化できる<SECTION>・<DIV>タグ

HTML文章を記述する上で、1章・2章などに分けるSECTIONタグ、それ自体には意味を持たせずにブロック単位にグループ化できるDIVタグがあります。ちなみに、DIVタグはdivision （ディビジョン、仕切り）の略になります。

DIVタグの使い方

ここで問題です。1段目・2段目・3段目の文章を中央寄せしたいと思います。パターン①と②で正しく1段目・2段目・3段目の文章が中央寄せできるのはどちらでしょうか。

（パターン１）

  1. <p align=”center”>1段目です。</p>
  2. <p align=”center”>2段目です。</p>
  3. <p align=”center”>3段目です。</p>

（パターン２）

  1. <div align=”center”>
  2. 　<p>1段目です。</p>
  3. 　<p>2段目です。</p>
  4. 　<p>3段目です。</p>
  5. </div>

答えは両方正解です。但し、記述した箇所を見てください。パターン①では、Pタグ全ての属性をalign=”center”としています。それに対し、パータン②では、DIVタグの属性のみalign=”center”としています。

HTML文章の見出し＜H1～H6>タグ

<h1>～<h6>タグはheadline（見出し）の頭文字で、文章の見出しを表現するタグです。H1～H6の違いは、小さい数字になるほど、大きい見出しになることです。

今日の問題

まず始めに、以下をメモ帳で記述し、Chapter02.htmlファイルとして保存してください。

  1. <head>
  2. <meta charset=”UFT-8″>
  3. <title>ここページのタイトルです</title>
  4. <meta name=”description” content=”ページの要約文”>
  5. </head>
  6. <section>
  7.  <h2>まずはじめに</h2>
  8. <p>2021年08月31日</p>
  9. <p>今回はHTMLタグ10選を勉強します。</p>
  10. </section>

問1

Chapter02.html内において、本来必要であるタグが2つ省略されています。何と何のタグが足りないかお答えください。

問2

Chapter02.html内の8行目（”2021年08月31日”）を右寄せに変えてください。

問3

Chapter02.html内の11行目以降に新たなセクションを追加し、セクション名を”第1章”、内容は”1行目　2行目　3行目”としてください。

問4

問3で追加した文書の”1行目　2行目　3行目”がそれぞれ改行されるようにしてください。

コメント