基本要素

基本要素

html/ルートタグ

HTML文書の最初と最後を囲うタグ

解説

<html>はHTMLを書く場合必ず必要なタグです。
このタグの中に、<html>、<body>と入る書き方が一般的です。
日本語のページであれば、属性「lang=”ja”」と書きましょう。

head/HTML情報

<html>に続く最初の要素で、文書の情報を囲うタグ

解説

<head>で囲う情報は<meta>・<title>などのページに関する情報や、外部CSSやJavascriptなどの外部データを呼び出す命令を書くことが可能です。直にスタイルシート等を書くことも可能です。

body/本文内容

表示される許容部分をあらわすタグ

結果

タイトル

ページに表示される部分です。

解説

<head>に対して、ページ自身の情報ではない部分(目で見える部分)を意味します。

title/タイトル

ブラウザにページのタイトルを伝え、検索エンジンのページタイトルにもなります。

meta/メタ情報

このページに関する情報

解説

HTML5における、主なmeta情報一覧

  • <meta name="description" content="このページの説明、概要。">
    →検索エンジンのページ説明文などに反映されます。
  • <meta name="auther" content="小石 光">
    →ページの作者を表します。
  • <meta name="generator" content="Dreamweaver8">
    →作成時に使用したソフトウェアの名前を表します。
  • <meta name="keywords" content="コーヒー,紅茶,砂糖">
    →このページに関連するキーワードを入力します。「,(カンマ)」で区切ります。検索エンジン対策(SEO)にとって重要な項目です。数は決まっていませんが、5個程度までが妥当な数です。
  • <meta http-equiv="default-style" content="type1">
    linkタグで外部CSSを読むとき、「title="type1"」を指定していればそのCSSファイルを読み込みます。
  • <meta http-equiv="refresh" content="5">
    ページを自動的に再読み込みしたいときに使います。contentは秒数になります。
  • <meta http-equiv="refresh" content="5; http://~~">
    移転したページを自動的に移動したいときに使います。
  • <meta charset="UTF-8">
    ページのエンコードを指定します。これがないと文字化けを起こしたりします。
    HTML5では、理由がない限り「UTF-8」を使うように推奨されています。

base/基準URL

ページ内で使われるリンクの基準になるURLを指定する場合に使用します。

解説

事例では「http://sample-url.com/test/」を基準としました。
そうすると「test.css」は「http://sample-url.com/test/test.css」を呼び出すことになります。
階層が複雑になったり、メインページを別階層に置きたい場合にはとても便利です。
ただし、インターネットを繋いでいない環境では、テストを行う場合にファイルが呼び出されなかったり、
インターネット接続時には、オフラインで更新したデータのつもりがネットから呼び出されていたりと
更新を頻繁に行うようなサイトの場合は注意が必要です。

link/外部ファイル

外部データファイルとの関係を表す情報

結果

~~スマホのアイコンサンプル~~

HTML5における、主なlink情報

  • <link rel="stylesheet" href="test.css" type="text/css">
    →スタイルシートを読み込む場合。(HTML5では、typeは必須ではありません。)

このページの関連を表す

  • <link rel="search" href="test.html" title="検索">
  • <link rel="help" href="test.html" title="ヘルプ">
  • <link rel="prev" href="test.html" title="前のページ">
  • <link rel="next" href="test.html" title="次のページ">
  • <link rel="auther" href="test.html" title="制作者">

専用ページを用意している場合

  • <link rel="alternate" href="/english/index.html" hreflang="en-US" title="English">
    →他国語のページを用意している場合「hreflang」を指定します。指定コードはIETF BCP47に従う。
  • <link rel="alternate" media="print" href="print.html" title="印刷用のページ">
    →印刷用の代替ページのリンクを表示
  • <link rel="alternate" media="tv" href="tv.html" title="テレビ用のページ">
    →テレビ用のページを表示
  • <link rel="styleseet" media="print" href="tv_style.css" type="text/css">
    →メディアごとにスタイルシートを指定

アイコン関連

  • <link rel="icon" href="favicon.png" type="image/png" sizes="16×16">
    →いわゆる「ファビコン」。お気に入りに追加した時やブラウザのURL等に表示される。sizesは、小文字の「x」で繋げる。
  • →iPhoneやiPadのアイコンを指定。サイズは114px×114pxで作成します。

style/スタイルシートを指定

ページ内でCSSを利用する場合

結果

スタイルシートで赤になります。

解説

指定できる要素は主に3つあります。

  • <style type="text/css">
    →HTML5ではデフォルトで「text/css」なので、省略可能です。
  • <style media="all">
    →メディアの指定です。デフォルトは「all」なので、省略可能です。
  • <style scoped="scoped">
    →このスタイルが書かれたすぐ次の段落(<p>など)にしか適用されません。

script/スクリプトを指定

ページ内でJavascriptなどを利用する場合

解説

Javascriptなどのスクリプトを直接書き込むこともできますし、事例のように外部ファイルを呼び出すことができます。

また、スクリ/プトがOFFのパソコン環境を考慮して<noscript>を記述しておくと実行できない場合にこちらが表示されます(ただしhead内に書いた場合は表示不可)。