HTML/CSS

HTMLのタグを知ろう「よく利用する主なタグ9選」

HTMLのタグとは

HTMLとは、Webページ制作に使用するマークアップ言語です。

HTMLではタグというものを使用しています。

タグというのは、書いているものに意味を与えるということです。

例えば、<tittle>文章</tittle>はタイトルを意味し、<p>文章</p>は段落を意味します。

基本的に、タグは文章のはじめと終わりに記入しなければなりません。

よく使う主なタグ9選

よく使うタグを紹介します。

  1. <html>
  2. <head>
  3. <body>
  4. <tittle>
  5. <meta>
  6. <link>
  7. <script>
  8. <div>
  9. <section>

<html>

htmlタグは基本的なタグです。<html>と書くと、HTML言語をこれから使用するという意味をもちます。

<head>

headタグは画面上には表示されないタグです。

なんのためのタグなのかというと、検索エンジンやブラウザのためのものとなっています。

検索エンジンに利用されるので、SEO対策をしたい方にとってはしっかりと書いておきたい箇所となります。

<body>

bodyタグはheadタグと反対に画面上に表示するためのタグです。

bodyタグがheadタグよりも先に書いてしまうとエラーになってしまうので気をつけましょう。

<tittle>

tittleタグは、読んで字のごとくタイトルを書くタグです。

tittleタグはheadタグ内に記載します。

そのため、画面上には表示されません。

しかし、ウェブページのブラウザのタグに利用されたり、ブックマークやSNSの共有の際にも使用されたりするので、SEO対策をしたい方にはとても重要な要素となっています。

<meta>

metaタグはメタ情報を書くタグです。

tittleタグ同様にheadタグ内に記載をします。

また情報は、検索エンジンなどがネットワークの巡回の際に取得されます。そして検索結果として表示されるのです。

<link>

linkタグはファイルを読み込みするときに使用します。

こちらもheadタグ内に記載をします。

基本的な書き方として、そのページ(読み込みを行う画面)との関係性をあらわる「rel」、ファイルのURLを示す「href」を書きます。

例えば、CSSファイルを読み込むときは、以下のように書きます。

<link rel=”stylesheet” href=”cssファイル名.css”>

ただ、relとhref以外にも記載する要素は他にもあります。

<script>

scriptタグはクライアントサイドのスクリプトを埋め込みたいときに使います。

属性として主に使用するのは「type」「src」です。

「type」はスクリプトのMIMEタイプを記載します。

MIMEタイプというのは、サーバーとブラウザ間に行う送受信のデータ形式を決めるものです。

<div>

divタグは文章などまとめたいものがあるときに使用します。

単体では意味はなしませんが、表示位置をグループ単位で変えたいときなどは便利といえるでしょう。

<section>

sectionタグはdivタグと似たような使いかたをします。つまり、文章などまとめたいものがあるときに使用するのです。

divタグとの違いは、divタグは囲むことに意味を持ちませんが、sectionタグは章や節といったまとまりをもつということです。

文章に対して意味を持たせるため、divタグとsectionタグのどちらを使用するか迷った場合は、意味を持たせたいのかを考えるといいでしょう。

まとめ

いかがでしたか。

HTMLのタグにはどんなものがあるのか、よく使われるタグについて学べたのではないでしょうか。

ホームページなどHTMLを使用した画面制作する際に利用してみてください。