HTML のひな型

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイトル</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>見出し</h1>
    </header>
    <main>
        <p>ここにコンテンツを追加します。</p>
    </main>
    <footer>
        <p>&copy; 2024 あなたの名前</p>
    </footer>
</body>
</html>

!DOCTYPE html について解説

<!DOCTYPE html> は、HTML ドキュメントの DOCTYPE (ドキュメント型宣言) です。
この宣言は、ブラウザに対して 「この文書は HTML5 で書かれています」 ということを伝える役割を持ちます。

詳しい解説

ブラウザのレンダリングモードを決定
- <!DOCTYPE html> があると、ブラウザは 標準モード (Standards Mode) でレンダリングします。
- もし書かないと、一部のブラウザでは 互換モード (Quirks Mode) になることがあり、古いバージョンの CSS や JavaScript の動作になる可能性があります。
HTML のバージョン
- <!DOCTYPE html> は HTML5 の宣言方式で、非常にシンプルです。
- HTML4 以前では <!DOCTYPE> の書き方が複雑でした。例えば： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> などの記述が必要でしたが、HTML5 では <!DOCTYPE html> だけで済みます。
<!DOCTYPE> は HTML の一部ではない
- <!DOCTYPE html> は HTML のタグではなく、メタ情報 です。
- そのため、<html> よりも前に書く必要があります。

まとめ

<!DOCTYPE html> は HTML5 であることを示す宣言。
標準モードでのレンダリングを保証 するために必須。
HTML4 に比べて シンプルな記述 になった。

基本的には どの HTML ページでも必ず先頭に書くべき ものです！

html lang=”ja”ついて解説

<html lang="ja"> は、HTML ドキュメントの <html> タグに指定する属性で、このページの言語が日本語であることをブラウザや検索エンジンに伝える 役割を持ちます。

`lang="ja"` の意味と役割

ブラウザやスクリーンリーダーの動作に影響
- lang="ja" を指定すると、日本語の読み上げ設定が適用されます。
- 例えば、視覚障害者向けのスクリーンリーダーが 日本語の発音 で読み上げます。
- lang="en" (英語) などにすると、日本語のページでも英語の発音で読まれてしまうことがあります。
検索エンジン (SEO) に対する影響
- Google などの検索エンジンは lang 属性を見て、そのページの 主な言語 を判断します。
- lang="ja" が指定されていると、日本語の検索結果に適切に表示されやすくなります。
翻訳機能の精度向上
- ブラウザの自動翻訳機能 (Google Chrome の翻訳など) は、lang 属性を参考にします。
- lang="ja" を適切に設定しておくと、他の言語に翻訳される際の精度が向上します。

`lang` の書き方

1. ページ全体の言語を指定

ページ全体が日本語なら、<html> タグに lang="ja" を指定します。

<html lang="ja">

これにより、ブラウザや検索エンジンは「このページの主な言語は日本語」と認識します。

2. 一部のテキストに異なる言語を指定

ページ内で異なる言語の部分がある場合、個別に lang を指定できます。

<p lang="en">Hello, world!</p>
<p lang="fr">Bonjour le monde!</p>

これにより、スクリーンリーダーや翻訳機能が適切に動作します。

`lang="ja"` の推奨設定

基本的には、日本語のウェブサイトなら <html lang="ja"> を必ず設定 しましょう。
特に SEO やアクセシビリティの向上 に役立つので、書いておくのがベストです！

よかったらシェアしてね！

はじめてのHTML講座

HTML のひな型