プログラミング

【HTML5入門】1-4 よく使われるタグ

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、HTMLの基本となる構造について、4つのタグを通して学んでいきました。

今回は実際に、4つのタグの中に入るタグのうち、よく使われるものについて学んでいきましょう。

よく使われるタグ

まずはタグの紹介からします。今回学ぶタグは、以下の4種類です。

  • metaタグ
  • titleタグ
  • divタグ
  • spanタグ

それぞれ順番にみていきましょう。

metaタグ

metaタグは、文書の情報を伝えるために使われるタグです。記述する場所は、headタグの内側です。

前回は以下のコードまで記述しました。

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

それでは早速、headタグの内側にmetaタグを入れていきましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
  </body>
</html>

このように記述してみました。metaタグは、情報を伝えるためのタグですので、「ここからここまで」を表す</meta>のような閉じタグは必要ありません。

charset=”UTF-8″について

metaタグの後ろに書かれたcharset="UTF-8"は、文字コードを意味しています。この記述によって、index.htmlが「UTF-8」という文字コードで書かれていることを示しています。

titleタグ

titleタグは、文書のタイトルを伝えるためのタグです。例えば、パソコンで何かページを見る時に、上のタブにタイトルが表示されますよね。このタイトルの表示の役割を担うのが、titleタグとなります。

titleタグも、headタグの内側に記述していきます。実際の記述例が下記となります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>MyPage</title>
  </head>
  <body>
  </body>
</html>

これにより、このHTML文書のタイトルが「MyPage」という名前になりました。実際にこのHTML文書をGoogle Chromeで開いてみると、以下の画像のような形で、ちゃんとタイトルが表示されているのが確認できると思います。

お気に入りやブックマークをする際にも、titleタグで付けたタイトル名が表示されることになります。

divタグ

divタグは、一つの塊を示すためのタグです。divタグで囲まれる内容は、実際に表示をさせる内容なので、bodyタグの内側に記述します。

早速、コードを書いていきましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>MyPage</title>
  </head>
  <body>
    <div>これはdivです。</div>
  </body>
</html>

これを実際にブラウザで表示してみると、以下のようになると思います。

bodyタグに書いたので、しっかりと実際のページに表示されました。

spanタグ

spanタグは、文書の一部を示すためのタグです。spanタグも、divタグと同様、bodyタグの中に記述していきます。

こちらも早速、コードを書いていきましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>MyPage</title>
  </head>
  <body>
    <div>これはdivです。</div>
    <span>これはspanです。</span>
  </body>
</html>

この状態でブラウザを更新すると、以下のようになることが確認できると思います。

ブロック要素とインライン要素

これまで、実際に文字がページに表示されたところまで確認できましたが、これだけだと、divタグとspanタグの違いがわかりにくいですよね。

divタグとspanタグの決定的な違いは、ブロック要素であるかインライン要素であるかというところです。ブロック要素は、それ自体が一塊であることを示しますが、インライン要素は、文章の一部を示しています。

タグで表示が変わる例

タグは、タグの内側にタグをいれる、いわゆる「入れ子」の状態で使われることがあります。ここまでのコードを見ると、htmlタグの中にheadタグやbodyタグがあり、bodyタグの中にdivタグやspanタグがある、という構造になっているのが理解できると思います。

ここでは、実際にdivタグの内側にspanタグを入れた場合とdivタグを入れた場合で、どのように表示が変わるのかを見ていきましょう。

divタグの内側にspanタグを入れた場合

先ほど記述したdivタグの内側にspanタグを入れてみましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>MyPage</title>
  </head>
  <body>
    <div>これは<span>div</span>です。</div>
    <span>これはspanです。</span>
  </body>
</html>

この状態でブラウザを更新しても、表示には一切変わりがないことがわかると思いますが、実際には、「div」という文字がspanタグによって囲まれている状態となっています。

ただ、spanタグはあくまでも文書の一部を選択しているだけの状態ですので、特に見た目に変化が起きることはありません。

divタグの内側にdivタグを入れた場合

では、先ほどdivタグの入れ子にしたspanタグを、以下のようにdivタグに変えてみましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>MyPage</title>
  </head>
  <body>
    <div>これは<div>div</div>です。</div>
    <span>これはspanです。</span>
  </body>
</html>

そうすると、ブラウザの表示は以下のように変わることがわかると思います。

divタグで囲まれた内容は、あくまでも一つの塊を意味しますから、「div」という文字をdivタグで囲んだことによって、一つの塊として独立したような形になっています。

ブロック要素の特徴として、改行されるというものがあります。これはインライン要素にはない特徴となります。

おわりに

今回は、HTMLでよく使われる4つのタグについて見てきました。metaタグやtitleタグはheadタグの内側に書き、divタグやspanタグはbodyタグの内側に書きます。そして、divタグとspanタグは、ブロック要素とインライン要素という特徴の違いがある、ということが理解できれば、この時点では完璧です。

次回は、文書の根幹となる「見出し」や「段落」について、学んでいきます。

次の記事はこちら

【HTML5入門】1-3 HTMLの基礎構造

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、HTMLの正式名称や、マークアップの考え方、タグの使い方や記述例を確認しました。

今回はそれを基に、HTMLがどんな構造で書かれていくのかを確認していきましょう。

HTMLに必要なタグ

HTMLを記述する際に、最低限必要になるタグが以下の4種類です。

  • doctypeタグ
  • htmlタグ
  • headタグ
  • bodyタグ

それぞれ順番にみていきましょう。

doctypeタグ

doctypeタグは、HTMLファイルがどのようなHTMLで書かれているのかを伝えるためのタグです。

HTMLは、今の状態になるまでいくつもバージョンアップを重ねてきました。このdoctypeタグを用いることで、書かれているHTMLファイルがどのバージョンなのかを正確に示すことができるようになります。

htmlタグ

htmlタグは、htmlタグの中の範囲が本文(内容)であることを伝えるためのタグです。つまり、htmlタグで囲むことにより、「ここからここまでがhtmlです」と伝えることができるタグとなります。

headタグ

大前提として、headタグは、htmlタグの中に書かれます。その上で、headタグは、「HTMLファイルを解釈する上で必要な情報を書く場所という役割を持ちます。具体的には、ページのタイトルなどがあたります。

bodyタグ

bodyタグも、大前提としてhtmlタグの中に書かれます。bodyタグは、「HTMLファイルの見せたい部分の内容を書く場所」という役割を持ちます。つまり、実際にページに表示させたい内容をbodyタグの中に書いていくことになります。

実際に書いてみよう

では、これらの4つのタグを使って、実際にHTMLファイルに記述をしていきましょう。

まずはdoctypeタグです。doctypeタグは、非常に特殊なタグで、書く場所が決められています。それはHTMLファイルの1行目です。スペースや空行を開けずに、記述します。

実際の記述は、下記の通りになります。

<!doctype html>

「HTML5」というバージョンのHTMLで記述する場合は、この記述をすればOKです。なお、doctypeタグには閉じタグ(</doctype>のような記述)は必要ありません。

続いて、htmlタグを記述していきます。

<!doctype html>
<html>
</html>

このような形で記述します。またhtmlタグ自体に、「このHTMLファイルが日本語なのか英語なのか」などのような、言語に関する情報も記述することができます。今回は日本語であることを記述したいので、下記のように記述します。

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

「lang」は、言語という意味のLangage、「ja」はJapanese、つまり日本語という意味になります。この記述をすることによって、「htmlの言語は日本語です」という情報を書き込んだことになります。

では次に、headタグとbodyタグを記述していきますが、これらはhtmlタグの中に入れるタグです。htmlタグの中に入っていることをわかりやすくするために、字下げ(インデント)をしましょう。

字下げ(インデント)をする前の記述はこのようになりますが…

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

headタグとbodyタグを字下げ(インデント)すると、下記のようになります。

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

これをすることによって、視覚的にheadタグとbodyタグがhtmlタグの中に入っていることがわかりやすくなりましたね。

index.html

ここまでのコード例のファイル名に「index.html」という名前を使用してきました。この「index」には、「索引・指標」などと訳されるのが一般的です。その意味通り、「index.html」は、多くのWebサーバーが最初に探すことが多いです。したがって、最初に作るファイルは「index.html」とすることが多いです。

おわりに

今回は、HTMLの基礎的な構造について見てきました。ただ、まだ実際に今の状態のファイルを読み込んでも、ページには何も表示されません。

次回は、実際にページに表示させたいことを表示させるためのタグについてよく使われるものを見ていきます。

次の記事はこちら

【HTML5入門】1-2 マークアップ

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、HTMLファイルを作るためのルールや、使うソフトについてなど、HTML自体の扱いについて考察してきました。

今回は、実際にHTMLで何ができるのか、そして書き方の基本について見ていきましょう。

HTMLの正式名称

HTMLを更に深く知るためには、HTMLという言葉自体がどんな意味を表しているのかを理解しておく必要があります。

HTMLの正式名称は、「HyperText Markup Language」といいます。なんのこっちゃ、と思われるかもしれませんが、日本語にすると、「文字情報をマークアップする言語」という意味になります。

ええ、まだわからないはずです。それもそのはず。まだマークアップについてご説明をしていないですからね。

そこで次は、「マークアップ」について見ていきましょう。

マークアップとは

マークアップとは、どこからどこまでに何があるのかを伝える、という意味になります。

  • 「ここから」〜「ここまで」
  • 「ここには○○がある」

などの情報を文字として記述するのが「マークアップ」となります。これについては、実際にどのように記述するのか、具体例をもとに理解した方がわかりやすい部分があるので、見ていきましょう。

HTMLの書き方

HTMLは、基本的に「タグ」と呼ばれるものを使って記述します。

< >

この不等号を表す記号で囲まれた中に、タグの役割となるものを記入していきます。代表的なものには「見出し」や「段落」があります。

  • 大見出し:<h1>~</h1>
  • 段落:<p>~</p>

このように、該当部分をタグで囲むような記述をします。終わりのタグには「/(スラッシュ)」がついていますが、これは「ここまで」という意味になります。

タグは必ず「半角英数字」で記述する

HTMLを初め、プログラミングをする際に必ず気をつけなければならないことがあります。それが、「全角と半角」です。

基本的にプログラミングは半角英数字を使用して記述します。HTMLにおけるタグも例に漏れず、半角英数字で記述しなければ、コンピュータがきちんと読み取ってくれませんので、記述をする際には注意するようにしましょう。

HTMLの記述例

例えば、見出しを「今日の日記」として、「今日は晴れでした。」という文章をHTMLに記述したいとします。

その場合は、下記のような記述となります。

<h1>今日の日記</h1>
<p>今日は晴れでした。</p>

非常に単純な例ですが、どんなに複雑なHTMLでも、この原則を常に頭に入れておくことで、構造がきちんと理解できるようになります。

おわりに

今回は、マークアップについて触れてきました。徐々にHTMLについてわかってきたところで、次回はHTMLの基礎構造について触れていきましょう。

次の記事はこちら