MENU

スポンサー

本記事では、HTML5のタグと基本構文の書き方について解説します。

今回の目標

  • HTML5のタグを理解する
  • HTML5の基本構文を書く
  • ブラウザに「Hello world!」の文章を表示させる

HTMLやCSSで何ができるのか?について知りたい方はこちらの前回記事をご参照ください。

HTML5のタグとは何か?

タグは文章に意味や役割を持たせる印

タグとは、文章に意味や役割を持たせる印のことです。「見出し」や「段落」といった文章構造をタグという印を使って明示します。

tag

  • 開始を表すタグを開始タグ<>、終了を表すタグを終了タグ</>と呼びます(終了タグ</>がない空要素というものもあります)。
  • タグの<></>の間にある意味や役割を表す文字を要素名と呼びます。
  • 開始タグ<>〜終了タグ</>までを含む全体を要素と呼びます。
Tips
開始タグ<>の内には<html lang="ja">のように〇〇="△△"の形のものが出てきます。〇〇は属性、"△△"は値と呼びます。

なぜタグを使う必要があるのか?

Webサイトでタグを使用して文章構造を記す理由。それは、Webがどんなユーザーに対しても情報を同じように伝えることができるメディアだからです。文章に対して適切なタグを用いることで、目でホームページを見ているユーザーだけではなく、 音声ソフトを利用しているユーザーや、検索エンジンなどの機械にも意味や役割を同じように伝達することができます。

重要
タグはおよそ100種類存在しますが、全てのタグを覚える必要はありません。よく使うタグは自然と覚えますし、インターネットや参考書で調べながら使用できれば問題ありません。

スポンサードサーチ

HTML文章を書く

HTMLの基本となる全体構造の書き方について解説します。

まずはエディタを立ち上げ、ファイル名を「index.html」として新規保存しておきましょう(ほとんどのエディタにおいて、左上のファイル新規作成から新規ファイルの作成が、左上の保存からファイルの保存ができます)。

Tips
Webサイトのデータはhtmlファイル、cssファイル、jsファイルで作られています。HTMLのファイルを作るためにはエディタというコードを書く編集ソフトが必要です。お手元にエディタがない場合は、フリーソフトのエディタ、「Atom」・「brackets」・「Sublime Text」などを使うと良いでしょう。

DOCTYPE宣言

はじめに、「これからHTML5で記述します」という宣言をします(DOCTYPE宣言)。HTML5のDOCTYPE宣言の記述方法は<!DOCTYPE html>となります。

<!DOCTYPE html>

html要素を記述

続いて、html要素(<html></html>)を記述します。

html要素は、文書がHTML文書であることを宣言する要素です。lang="ja"は、要素内の文書や言語を日本語にしますという意味です。

<!DOCTYPE html>
<html lang="ja">
</html>

head要素とbody要素を記述

続いて、html要素内にhead要素(<head></head>)とbody要素(<body></body>)を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>

head要素

head要素内はブラウザには表示されないですが、検索エンジンやブラウザに対する指定や、文書に関するメタ情報(meta)などの付加的な情報を記述する場所です。head要素の内容で、ブラウザ上に直接現れるのはtitle要素の情報だけです。

body要素

body要素内はブラウザの表示枠に表示される、目で見える文書全体を記述する場所になります。HTML文書のコンテンツを示す要素です。文書の内容となるテキストや画像、リストなどは全てこのbody要素の子要素として記述します。

head要素内に文字コード情報を記述する

続いて、head要素内に文字コードを「UTF-8」と指定する記述(<meta charset="UTF-8">)をします。metaは文書に関する情報(メタデータ)を指定し、charsetは文字のデジタルデータの変換方法(エンコーディング)を指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
重要
文字コードとは、数字の「0」と「1」だけを扱えるパソコンが文字を読み込むために使うコードのことです。近年主流となっているのが多言語に対応した文字コード(Unicode)の「UTF-8」です。その他に「Shift_JIS」や「EUC-JP」など様々な文字コードがあります。HTMLの文字コードとブラウザが解釈する文字コードが違うと文字化けが発生します。

head要素内にtitle要素を記述する

続いて、head要素内にtitle要素(<title></title>)を記述します。title要素はこの文章のタイトルとなり、ブラウザのタブにtitle要素の中身(下記の例では「Webサイトのタイトルが入ります」)が表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webサイトのタイトルが入ります</title>
</head>
<body>
</body>
</html>

body要素内に文字を記述する(ブラウザに文字を表示する)

続いて、body要素内にHello world!と記述します。body要素内に記述することで、ブラウザ上に表示させることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webサイトのタイトルが入ります</title>
</head>
<body>
Hello world!
</body>
</html>

ファイル「index.html」をブラウザで表示してみてください。ブラウザに「Hello world!」と表示されていれば成功です。

ブラウザに「Hello world!」が表示

helloworld

ソースコードにインデントをつけて見やすさ、ミスを減らす

ソースコードは、誰もが見やすいように、また、ミスを減らすために綺麗に記述しましょう。インデントを半角スペース2つ分でつけるのが一般的です。要素の外であれば半角スペースを付けてもブラウザ上の見た目には影響しません。

インデントをつけたソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Webサイトのタイトルが入ります</title>
</head>
<body>
  Hello world!
</body>
</html>

ここまでできたら、忘れずに上書き保存しておきましょう。

まとめ:タグと基本構文の理解は全ての基本

HTML5の「タグ」は文章に意味や役割を持たせる印のこと、また、基本構文はWebページ制作のすべての基本となります。

どちらも毎回出てくるのでしっかり抑えておきましょう!

今回は以上となります。

次の記事はこちら。

B! Copy

タグ: ,

この記事を書いた人:ディレ松

人材営業マンからWebディレクターにジョブチェンジ。画像編集、Webサイト制作など、初級レベルからお届け!

スポンサー

WORK REQUEST

CONTACT