Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@otupy(py 乙)

100日後にエンジニアになるキミ - 7日目 - HTML - HTMLの基礎2

Posted at

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

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?