HTMLの基礎の続きです

タグについて

前回はHTMLの構成要素についてやりました。
今回はタグについてのお話です。

HTML要素を表現するのにHTMLのタグを用います。

HTMLのタグはかなり沢山の種類がありますが
主要な部分を覚えれば
全てを覚えなくてもHTMLファイルを作ることができます。

まずは主要なタグを抑えていきましょう。

HTMLタグ

<!DOCTYPE html>
<html></html>

htmlタグはHTML文書の冒頭に記述し
HTML文書であることを示すために使います。

<!DOCTYPE html>は
この文書がHTML5で作成されたものであることを宣言するために
文書の先頭（<html>タグよりも上）に記述するDOCTYPE宣言です。

<html></html>のタグ直下には
<head>タグ と <body>タグ がそれぞれ一つづつ必要です。

htmlタグでは , lang属性で言語を指定することができ
日本語の場合はlang="ja" , 英語はlang="en"を指定します。

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

終了タグで閉じるのを忘れないようにしましょう。

HEADタグ

<head></head>
コンテンツに表示しない文書情報で
metaやtitleなどを記述できます。

<head>
<title>乙py<title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="乙py">
<meta name="keywords" content="乙py">
<script type="text/javascript" src="sample.js">< script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

headタグの中で用いることのできるタグは
以下のようなものがあります。

<title>
タイトルを指定,ブラウザのタイトルバーに表示される

<meta>
文書の情報を定義する

<link>
href属性で指定したファイルとの関係を定義する

<style>
スタイル情報を記述,type属性の記述が必要(text/css等)

<script>
スクリプトを記述,type属性(text/javascript)とmeta要素でスクリプトタイプの宣言をする

titleタグ

<title>タイトル<title>

ブラウザーの上部に表示される情報を記述するタグです。
タグの要素がブラウザーのタブ部分に表示されます。

<title>乙py<title>

metaタグ

<meta>
HTML文書というよりは、WEBサイトの情報を記述する部分です。

metaタグは開始タグのみで終了タグが不要ですが
複数の要素を記述することができます。

書き方は
<meta name="属性名" content="属性値"

というように書きます。

<head>
    <title>タイトルを記述</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="keywords" content="キーワード,内容">
    <meta name="description" content="説明文">
    <meta name="author" content="作者名とか">
    <meta name="robots" content="noindex,nofollow">
</head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">
これはこの文書の文字コードをさしていて、utf-8を指定しています。

属性名としては他に

keywords
description
author
robots

などがあります。

keywordsではこのページの内容で重要なワードなどを書き込みます。
<meta name="keywords" content="キーワード,内容">

descriptionはこのサイトの説明文を書くところです。
<meta name="description" content="説明文">

authorはこのサイトの作者名などを記載します。
<meta name="author" content="作者名とか">

robotsはクローラー(検索エンジンのWEB巡回プログラム)に対する指定です。
<meta name="robots" content="noindex,nofollow">

noindexとは、検索エンジンにページを認識（インデックス）させないために指定する値です。
nofollowとは、クローラーにページ内のリンクを辿らせず
リンク先にページの評価を渡さないために指定する値です。

metaタグを書く順番には特に決まりはなく、書かなくてもそこまで問題はありません。
検索エンジンにに認識してもらうためにはmetaタグを整備しないと
読み取られないため、検索にひっかからなかったするので、整備した方が良いでしょう。

linkタグ

<link>
主にCSSなどのファイルを紐づけるために記述するタグです。
linkタグは終了タグが不要です。

<link rel="stylesheet" href="./style.css">

外部のファイルを読み込みしたければlinkタグを用います。
CSSファイルの場合はrel属性にstylesheetを指定します。

linkタグはrel属性で何のファイルであるのかを指定し
href属性でリンク先(パス)を指定します。

リンク先は相対リンク、もしくは絶対リンクで書くことになります。

相対リンクはこのHTMLファイルから見たファイルの場所になり
絶対リンクはWEBサイトの構造から見たファイルの場所を記述することになります。

外部のWEBサイトからのlinkはそのファイルのURLを指定します。

faviconというブラウザーのタグの部分につく小さな画像がありますが
それをきちんと表示させたい場合はheadタグ内で指定が必要です。

rel属性でshortcut iconを指定します。
ファビコンの拡張子は.icoとなります。

styleタグ

このページ全体のスタイルをまとめて記述することができます。

<style></style>

<style>
    body {background-color: #00ff00}
    .container {width: 90% ; text-align: center;}
    .first-sentence {font-weight: bold;}
</style>

タグの固有のstyle属性とは別物になります。
全体のスタイルを記述できますが、通常はスタイルシートをファイルで分けますので
そこまで多用することはありません。

scriptタグ

<script></script>
文書にJavaScriptなどのスクリプトを組み込む際に使用します。

<script type="text/javascript" src="sample.js"></script>

type属性ではtext/javascriptを指定し
src属性でファイルのパスを指定し
外部サイトからのファイル読み込みの場合はサイトのURLを記述します。

またscriptタグはheadタグ以外にbodyタグ内でも書くことができます。

外部ファイルを先に読み込んでおかないと
外部ファイルの関数は動かないので、headタグで読み込んでおきましょう。

noscriptタグ

<noscript></noscript>

あまりなじみのないものかもしれませんが
javascriptが働かない場合に動作するタグになります。

javascriptはブラウザーの方でOn,OFFを切り替えることができます。
javascriptOFFの状態ではjavascriptは動作しません。

javasciprtを動作させる前提でいた場合何もおきない事になり
画面表示がおかしくなったりするケースがあります。

その場合に代わりに動作させるタグを記述できます。

<script type="text/javascript">
    (function () {
        var tagjs = document.createElement("script");
        var s = document.getElementsByTagName("script")[0];
        tagjs.async = true;
        tagjs.src = "//s.yjtag.jp/tag.js#site= AAABBBCCC";
        s.parentNode.insertBefore(tagjs, s);
    }());
</script>
<noscript>
<iframe src="//b.yjtag.jp/iframe?c=AAABBBCCC" width="1" height="1" 
 frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</noscript>

最後の部分がnoscriptタグの記述です。

広告用のタグはjavascriptが働くことが前提で書かれているため
javascriptが働かないと画面崩れが起きることがあります。

それを防ぐためにnoscriptタグを併せて記述しています。

まとめ

本日は主にhead内で使用されるタグについて
説明しました。

WEBサイトの情報や外部ファイルの読み込みは
HTMLを構成するのに欠かせないものですので
書き方は押さえておきましょう。

君がエンジニアになるまであと93日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython