<!DOCTYPE html>

DOCTYPE宣言と呼ばれるものの1つで、これを置くとウェブページがHTML4.01とかXHTMLとかではなくHTML5であることをブラウザに教える。それ以外の場所には置かない。今時のウェブページはこれを1つ置いて、次に<html ○○>・・・</html>を置いて、他には何も置かない

sample.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf8">
    <title>内容のないページ</title>
  </head>
  <body>
    <h1>内容のないページ</h1>
    <p>内容がないゾ</p>
  </body>
</html>

タグ

<○○>の形式のものをタグ、HTMLタグと呼ぶ

開始タグ

<○○>(○○は英数字で構成)もしくは<○○ △△="××" □□="◇◇" ...>はこう呼ばれる

属性

タグの中の△△="××"はこう呼ばれる

終了タグ

</○○>はこう呼ばれる

<html lang="ja">・・・</html>

lang属性をjaにすることによって日本語のページであることを知らせる

<head>・・・</head>

裏方的な設定を書いておくための部分。<html ○○>・・・</html>の内容は<head>・・・</head>と<body>・・・</body>各1つのみ

<meta charset="utf8">

ウェブページの文字コードがUTF8であることをブラウザに教える

<meta name="description" content="○○">

検索エンジンの検索結果でcontent属性に書いた文字列がページの説明文として考慮される

<title>・・・</title>

内容(テキスト)がブラウザのタブのタイトルとして表示

<body>・・・</body>

ブラウザの表示領域に表示される文書そのものの構造・内容を書く

<p>・・・</p>

bodyタグ内に置き1つの段落であることを表す。見た目の上ではただの長方形領域

<link rel="shortcut icon" href="○○.ico">

href(エイチレフ)属性に書いた相対・絶対アドレスで示されるアイコンファイルをファビコンにする。これに限らずlinkタグは全てheadタグ内に置く

<link rel="stylesheet" href="○○.css">

href属性に書いた相対・絶対アドレスのCSSファイルを読み込んでそれに書いてあるスタイルをページに適用する

<style>・・・</style>

head要素内に置く。中にCSSを書くとそのページ専用のスタイルとして適用される

・・・に何を(-->以外)書いてもブラウザの動作上影響がない、つまりコメント

グローバル属性

どの要素にもつけることができる属性

id="・・・"

グローバル属性でタグにIDを与える。同じページに同じIDをもつ要素が複数存在することはできない。CSSやJavaScriptで使う。また例えばindex.html#messageというURLにアクセスするとindex.htmlでmessageというIDをもつタグにあたる位置までスクロールされる