2018.5.7更新に手が回っていません
この記事の動機とか目的はC言語の記事と同様です
現在のメジャーなブラウザが対応してる範囲での話になるつもりです。
<!DOCTYPE html>
DOCTYPE宣言と呼ばれるものの1つで、これを置くとウェブページがHTML4.01とかXHTMLとかではなくHTML5であることをブラウザに教える。それ以外の場所には置かない。今時のウェブページはこれを1つ置いて、次に<html ○○>・・・</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をもつタグにあたる位置までスクロールされる