はじめてのホームページ作成 ホームページ作成

HTMLのタグとは - 新米web担のためのホームページの作り方 | 第8回

ここでは、ホームページ作成のスキルを独学で身につける方法をシリーズでご紹介します。先回は、HTMLの構造と基本的な作成の方法をご紹介しました。今回はHTMLファイルの作成に欠かせない、「タグ」についてご説明します。

 

 

「タグ」とは

HTMLにおいて基本となる考え方が、この「タグ」と呼ばれるものです。先回のブログでも少しご紹介しましたが、この「タグ」とは簡単に言うと、「印」もしくは「札」のことです。

例えば、「こんにちは」という一つの文章があるとします。しかし、この文字列を入力するだけでは、コンピューターはそれが何なのか理解できません。それで、これは「このページのタイトルです」<title> </title>とか、「これは目次です」<h1> </h1>とか、「これはリンクです」<a> </a> などのように「印」つけてその文章の役割をコンピュータが理解できるようにしていきます。

この作業こそが「マークアップ」と呼ばれるもので、それがHTML(HyperText Markup Language=ハイパーテキスト マークアップ ランゲージ)の基本です。

HTMLには、このコンピューターが理解できる「タグ」がいろいろあるのですが、実はよく用いるのはそれほど多くありません。大体10数個の「タグ」さえ覚えておけば、基本的なホームページを作成することができます。

 

 

絶対に使うタグ

<html> </html>  = このファイルがHTMLファイルであることを示す。

<head> </head> = その部分がHTMLファイルの「情報を記す」部分であることを示す。

<meta> </meta> = そのHTMLファイルに関する情報を記す。

<title> </title> = そのページのタイトルであることを示す。。

<body> </body> = その部分が「ホームページのメインの部分」であることを示す。

 

 

使う頻度が高いタグ

<div> </div> = その文章をひと固まり(ブロック)として認識させる。

<span> </span> = その文章を一つの文字列(インライン)として認識させる。

<a> </a> = リンクであることを示す。

<img > </img> = 画像であることを示す。

<li> </li> = リストであることを示す。

<h1> ~<h6>  = 見出しであることを示す。

<script> </script> = スクリプトを指定する(主に動きのあるサイトを作るときに使用しますが、詳しくは後ほど)

たったこれだけです!

しかも、上に挙げた「絶対に使うタグ」はAtomで自動的に生成されますので、書く必要はありません。(自動生成の方法については、この前のブログをご覧ください。)

HTMLのタグとは - 新米web担のためのホームページの作り方 | 第8回

もちろんこれ以外にも「タグ」の種類はありますが、基本的なページは上にあげたもので十分です。そして、もし「ここではどんなタグを使ったらいいのだろう?」と分からなくなったら、すぐに調べることができます。

この下のサイトは、そんなときに便利です。いわいる辞書のようなものなのですので、困ったときには使いましょう。(なお、このリンクは公式なものなので、ほかにもHTMLについて疑問に感じることがあるなら、最初に確認すると良いと思います。)

HTML「タグ」の索引

 

 

「属性」と「属性値」

なお、タグ内で半角スペースの後に記されているもの(Atomで見るとオレンジ色の文字で表示)を「属性」、そのあと「=」後に書かれるもの(Atomでは緑色の文字で表示)されるものを「属性値」と呼びます。

一般的にはこの「属性」と「属性値」というものがHTMLの基本中の基本と言われるのですが、この「属性」という用語も、その種類もほとんど覚える必要はありませんのでご安心ください。

ただ、一つだけ理解していただきたいのは、基本的に、「タグ」と「属性」はセットで用いられ、その組み合わせはほぼ決まっているということです。

例えば、<a> </a> (リンクであることを示す)という「タグ」には「href」という「属性」が必ず付きます。なぜなら、リンクをページに埋め込む場合、そのリンクをクリックしたときに移動する先(場所)を指す「href」が絶対に必要だからです。(なお、<a> </a>というタグにはほかにも多くの「属性」がつけられるのですが、通常のホームページを作成する際には、「href」以外ほとんど使用しません)

同様に<div> </div>というタグには「id」か「class」<script> </script>という「タグ」には「type」というように通常使用する組み合わせはわずかです。

そして便利なことに「Atom」であれば「d」と打ち込めば、選択肢として「div」という選択肢が出てきて、それを選択すると、自動的に以下のように表示されます。

<div class="">

</div>

上のように、単に「div」という「タグ」だけでなく、「class」という、タグとセットになっている「属性」も表示されていることにお気づきになるともいます。(この「class」(クラス)の意味については次回「CSS」の項目でご説明します。)

 

 

まとめ

ということで、まずここでは、HTMLを作るときには「「タグ」と呼ばれるものでその文章の役割に「印」をつけるのだ!」ということだけ理解しましょう。

次に、この文章の体裁(色や大きさ等々)を指定する「CSS」について見ていきましょう。

-はじめてのホームページ作成, ホームページ作成

Copyright© コアースのブログ , 2022 All Rights Reserved.