前回までのあらすじ

Visual Studio Codeをインストール Roadmapに沿って勉強していくことを決意 dev-daikichi.hatenablog.com

実践

さて、HTMLについてはある程度知っていますがまずは基本形から。

(現在ではHTML5が主流である為、以後HTML5での記述となります。)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="">
    <script src=""></script>
  </head>
  <body>
    <header>
    </header>

    <footer>
    </footer>
  </body>
</html>

まぁこんなところでしょうか。ではでは復習がてら解説。

`<!DOCTYPE html>`

これはブラウザ側にHTMLのバージョンを伝える為の様なものですね。
ちなみにこれ、なくても動くのですが厳密に言うと無い場合は
ブラウザが互換モードとして動き、htmlがレンダリング(描画)されるようです。
言わずもがな標準モードとして動かしてほしいので、必ず書くこと。
互換モードを使うのはあえて古いブラウザで表示する必要がある時のみみたいです(IE6とか)

`<html>`

htmlタグ。全てを統べるタグ。コーナーで差をつけろ。
指定できる属性は下記二つ。

lang
manifest

lang

言語の指定を行います。
実際には指定しているところはほぼ見たことないです。
過去、Googleに指定するなと言われたんだおじさんに言われて私も使っていません。
(詳しくはこちら: Google「言語指定にlangは使うな」／公式発言)

manifest

これまたマニアックな属性(個人の感想)
使用目的としては、キャッシュデータを使用してオフラインでも表示ができるようにするだそうです。
要するに静的なページをキャッシュしとくとかそういう話か・・・？
と、思ったので調べてみました。以下メリットの引用。

・オフラインブラウジング: ユーザーがオフライン状態であるときにもサイトを閲覧できます。
・速度: キャッシュされたリソースはローカルに置かれることになり、その結果、より速く読み込まれます。
・サーバー読み込みの削減: ブラウザーはサーバーから変更されたリソースのみをダウンロードします。
(引用元: アプリケーションキャッシュの使用 | MDN)

ふむふむ、別にhtmlだけじゃなくてjsとかもキャッシュできるのね。
引用元で標準から外れていますみたいな文言を見た気がするので、オフライン対応以外は使わなくていいかな🙄

`<head>`

headタグ。こちらにはHTML文書のメタデータを記載するのが正しい使い方です。
<meta>や<link>、<script>、<title>等がこの中に記載されていくかと思います。
あまり解説はいらないですね。

`<meta>`

今まで一番自分がわかったつもりでわかってなかったタグ。
とりあえず調べてみると

HTML文書のメタデータは<head>～</head>の中に、 <title>（タイトル）・ <base>（基準URL）・ <link>（リンク情報）・ <style>（スタイルシート）・ <script>（スクリプト）などのタグで指定しますが、これらのタグで表現できないその他の様々なメタデータは<meta>で表します。 (引用元: http://www.htmq.com/html5/meta.shtml)

なるほど、元々用意されてるタグで表現しきれない部分をmetaタグで表現するっていう風に取ればいいのか。
わざわざmetaの属性にcharsetを使用して文字エンコードを決定していたのはその為だったということか・・・。

`<title>`

こちらもあまり解説はいらないですね。
chromeでいうタブのところに出るタイトルのことです。

`<link>`

外部stylesheetを読み込むのに使われているおなじみのタグ。
rel属性にはstylesheet以外にも多くの属性が設定できるようですが
実際にはstylesheetとalternative以外はあまり使用されていないようです。
alternateは私は使ったことがなかったのですが、SEO対策に使われてるのかな？
内容が同一でURIが違うページや、多言語版のページ等で用いられているそうな。

`<script>`

外部javascriptを読み込むのに使われているおなじみのタグ。
ちなみにtype属性にはよく'text/javascript'を指定していると思いますが
HTML5記法では'デフォルトでtext/javascriptに設定されている為省略が可能'です。
むかーしは直接スクリプトを記述する際はコメントアウトしていましたねぇ・・・。
最近のブラウザではscriptタグはきっちり認識してくれるので、コメントアウトは不要ですが。

`<header>`

イントロダクションやナビゲーショングループであることを示す際に使用。
<head>タグとはまた別物です。
必須ではないですが、<nav>要素等を置いたりするのに使います。

`<footer>`

こちらも<header>と同様に必須ではないですが
webサイトの構造的にCopyrightや連絡先情報等を置いていることが多いですね。

今回はここまでです。久しぶりに大量に文章を書くと疲れますね。タグの説明を延々と続けるのも疲れてきたので
次はsampleページでも作ろうかと思っています。

ではまた。

わしのlog

プログラミングとかバイクとか。

Web Developer Roadmap 2018実践 -1日目- HTML5の基本構文