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