初心者でも出来るプログラミングの基礎を習う！第３回
ここではプログラミング言語を習う前の段階のHTMLの基礎について学習します。
ＨＴＭＬに記述する内容の基本的事項
- DOCTYPE宣言とは
- HTMLの文書構造を学ぶ
について学んでいきたいと思います。
DOCTYPE宣言とは
HTMLの基礎「DOCTYPE宣言」とは
文書の仕様をブラウザに伝えるためのもの
Document Type Definition(DTD)のこと、文書宣言と呼ばれています。
DOCTYPE宣言はその文書がHTMLやXHTMLのどのバージョンで作成されたかを宣言するものです。
<!DOCTYPE html>と記述されている文書はHTML５で作成されたものであることを宣言するものです。
HTML５は２０１４年１０月から導入されたもので、それまではHTML4のバージョンからXHTML１のバージョンがありどちらも宣言文の記述がとても長くなっていましたが、HTML５になってこのように短くなりました、大文字小文字の区分はされません。
HTML５以前の文書宣言
これはHTML4.01の中の厳密型DTDと呼ばれるものの文書宣言です。
<!DOCTYPE html public "-//w3c//DTD html 4.01//en" "http://www.w3.org/TR/html4/strict.dtd">
このように長く、HTMLやXHTMLでは、バージョンごとに使用できる要素や属性とそれらの配置ルールが決められています。
これがＨＴＭＬ５なって記述が<!DOCTYPE html>だけになりました。
DOCTYPE宣言は書いた方がいいのか
HTML５においてDOCTYPE宣言はあまり意味を持たないとされていますが、作成した文章がHTML5によるものとブラウザに明示するために記述した方がいいでしょう。
DOCTYPE宣言がないと一般的なブラウザではレンタリングモード※が互換モードとなり、CSSの解釈が標準と異なるために制作者の意図しないレイアウトになる事があります。
※レンタリングモードはウェブページの表示方法を決めるブラウザの状態の事、宣言の仕方によって標準モードと互換モードに切り替わります。
宣言しないとどうなるのか
ブラウザに標準モードで解釈させるためDOCTYPE宣言を記述する必要があります、IE６も含めて主要なブラウザでは文書の先頭に<!DOCTYPE html>と記述することで標準モードになります。
標準モードはCSSなどの仕様通りに正しく表示するモードで互換モードはまだCSSが普及していなかった時代の過去のブラウザとの互換のため標準仕様とは異なる解釈で表示するモードの事です。
互換モードで表示される場合はCSSの指定が正しく解釈されないため文字サイズやレイアウトなど制作者の意図と異なる場合があります。
DOCTYPE宣言とは
DOCTYPE宣言とは
この文章はHTMLです。
このHTMLのバージョンです
このDTDに従った記述をするよ
※DTD(Document Type Defintion 文書の構成要素バージョン)
ブラウザはこの宣言の内容に従って文書を表示します。
これは大文字でも小文字で書いてもいいですが、慣習的に大文字にしています。
HTMLの文書構造を学ぶ
htmlの文書を構成しているのは
<html>タグ
<head>タグ
<body>タグ
があります、これらを解説していきます。
html文書の範囲を示す
htmlの範囲はどこまでか示すこの文章の中でhtml文章はどこからどこまでの範囲なのかを示してやる必要があります。
これが<html></html>タグです、<>で囲まれたのが開始タグで、</>不等号の中にスラッシュがあるのが終了タグです。
html文書はこの<html>から始まり</html>があるところまでを表します。
lang属性(この文章は何語で書いている)を知る。
この文章はこの言葉で書かれています、というのを表すのが「lang」属性です。
<html lang="ja">と開始タグの中に半角スペースを取りlang="ja"と入力します。
「ja」は日本語という意味です、これでこの記事は日本語で書かれていますと宣言しています。
本文中に英語を含める場合には
<p>本文中に<p lang="en">english</p>が混ざる</p>
これで記事は日本語で中に英語が入っていますとなります。
lang属性をGoogleは見ていない
ただし、このlang属性をGoogleは全く見ていないということが分かりました。
Googleではlang属性から文書型定義DTDまで、コードレベルの言語情報はすべて無視するようになりました。
一部サイト制作ソフトではこれらの属性が自動的に作成されるため、ウェブページの言語を判断する際の情報が信用できないと判断したためです。
代わりに使われるhreflang
hreflangは多言語サイトを運用しているときや、ユーザーに対して適切な言語のバージョンを表示するために必要とする要素で
headタグ内にリンク要素として記載する例を表記すると
<link rel="alternate" hreflang="ja" href="http://行きたいサイト/">
<link rel="alternate" herflang="ko" href="http://行きたいサイト/korean">
<link rel="alternate" herflang="en" href="http://行きたいとこ/english">
jaは日本語、koは韓国語、enは英語になりどの言語のページでも同じコードを記述する必要があります、日本語のページだからと言って日本語の所を省略はで出来ません。
hreflang属性は日本語以外の言葉で発信しているサイトでは必要かもしれませんが、日本語で発信しているサイトでは必要ありません。
lang属性は必要ないもの
現在では使う特別な用途が見当たらないので必要はないものです。
Googleで見ていないものは少なくともＳＥＯ目的では使う意味はありません、何らかの特別な目的で使う場合以外は必要はないと思います。
headタグ html文書の情報を宣言するもの
html文書の中には<head></head>ヘッドタグと<body></body>ボディタグがあります。
ヘッド「head」タグはブラウザには表示されません、パソコンに指示を与えるための領域と考えましょう。
headタグ内に記述するもの
titleタグ：ブラウザ上部のタイトルバーに表示されるもの。
metaタグ、linkタグなど様々な情報が指定されます、またスタイルシート(CSS)やjavascriptを外部ファイルにした場合に記述して読み込ませることができます。
bodyタグ 画面上に表示される記事本文
ボディ「body」タグはブラウザに表示される領域を示します、表示する記事の中身となります。
各部分の色を指定する場合にはスタイルシートを使用するようにしましょう、また背景色や文字色はできるだけ５つのセットで指定するようにします、この５つのセットで指定しない場合には、ユーz-側で設定している表示色の組み合わせでは文字が見えにくくなる可能性があります。
body内に記述する項目
body内にはその記事内容が表示されます画像やイラスト文字など様々なコンテンツが出てきますが、これらを記事の構成として見やすくしていくのが見出しだと思います。
見出しh１からｈ６までの構成
見出しの「ｈ」は「Heading」の略で見出しを意味するタグです、文章の章題や節題を記述しています。
数字は１が記事のタイトルを表し、以下数字が下位になるにしたがって下位の見出しになるという意味です。
ブラウザによって多少異なりますが数字が下位になるにつれて表示文字も小さくなっていきます。
同じ数字が複数ある場合は同じランクとして扱われ、低い数字の見出しが続く場合はサブセクションとして扱われます。
注意することは数字が飛んでいたりｈ２の次にｈ４が来たりするようなことはありませんので注意しましょう。
表示例
<h1>これが記事タイトルになる</h1>
<h2>次に大きい目次になる</h2>
<h3>大きい目次になる</h3>
<h4>目次になる</h4>
<h5>目次になる</h5>
<h6>あまり使うことはない</h6>
段落<p>を使う
段落は記事の内容を記入するところです。
<p>不等号で囲まれた「p」が開始タグでここから記事の内容を書いて</p>スラッシュの付いた終了タグまでがブラウザに表示されます。
初心者でも出来るプログラミングの基礎を習う！第３回
ＡｔｏｍにこれからＨＴＭＬ５で入力していきますよと宣言して色々表示させていきます。
これからもまだまだ更新していきたいと思いますのでよろしくお願いします。
