HTMLの基本構造

WEBサイトの構成要素
文字コード
URLの構造
1. 分かりやすいURL構造がSEO対策になる
2. 避けるべき方法
ファイルのパス指定
HTMLの基本構造
本日の課題

WEBサイトの構成要素

HTML：Web ページ内の各要素の意味や文書構造を定義
CSS：レイアウトデザインや各要素の装飾（色・サイズなど）を定義
JavaScript / jQuery：動きを付けたり計算などの処理
その他：ロゴ、写真等画像、アクセスマップ、ピクトグラム、原稿

◎要点：ファイル整理が重要。バックアップはファイル全体をコピー。

文字コード

日本語の文字コードは、シフトJIS、EUC、UTF-8など。
Web作成時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用

URLの構造

構造：プロトコル名 :// ホスト名＋ドメイン名（FQDN) / ディレクトリ名 / ファイル名

分かりやすいURL構造がSEO対策になる

コンテンツと関連した単語を使用する
区切り記号にはハイフン（-）を使用する
ディレクトリ構造を簡潔にする
URLはすべて英数字を用いる
URLはすべて小文字にする

避けるべき方法

「baseball-cards-baseball-cards-baseballcards.htm」のように過度にキーワードを使用
不必要なパラメータやセッション ID を含む長い URL を使用する。
「page1.html」のような一般的なページ名を選ぶ。

良い例：https://www.asobou.co.jp/service/web-solution.html
悪い例：https://www.asobou.co.jp/folder1/page1.html

ファイルのパス指定

ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法がある

参考リンク：１　２　

HTMLの基本構造

タグ・要素・属性・属性値

タグとはHTMLでの「<」「>」でくくられた命令のこと。開始タグ、終了タグを総称して要素という
要素に意味を補足するのが属性および属性値
（例）<a href=”sun/aaa.html”>あああ<a>”→属性:href=”sun/aaa.html、属性値:sun/aaa.html、属性名:href

基本構造

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
　　<title>タイトル </title>
</head>
<body>
　　（文書の本体を記述）
<h1>見出し</h1>
<p>文章</p>
</body>
</html>

doctype宣言

HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良い。

DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となり、互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合がある。ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要がある。主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モードとなる。

【仕事時の注意点】楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があり、やむを得ず違う方法を使わなければならない場合がある。
お仕事で担当した時は、 DOCTYPE宣言を必ず確認。