FC2ブログ
WebBox norijin note
WebBox norijin
Category: スポンサー広告  

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

TOP > スポンサー広告 > HTML5入門:HTML5とXHTMLの違い!!基礎知識編 vol.1

Category: HTML5   Tags: HTML5  XHTML    

HTML5入門:HTML5とXHTMLの違い!!基礎知識編 vol.1

HTML5をマスターする為にいちから学ぶ!!基礎知識編 vol.1

HTML5をいちからマスターする為に、基本の基本から学んでいこうと思います。まずはHTML5XHTML,HTML4の違いをおもに書いてます。あくまでいちからの勉強ですので、初心者の方にもわかりやすく書いているつもりですが...わかりにくい場合はご迷惑をかける事になるかもしれませんが、ともにHTML5入門から、しっかり勉強していきましょう。興味がございましたら、ともにご覧ください...

HTMLとは? HTMLl4.01とHTMLl1.0


 現在webページの多くはHTML4.01やXHTML1.01で作成されています。

 HTML4.01は、HTML4.0を改定して1999年にW3Cから勧告された、HTMLとしては、一番新しい仕様です。HTML4.0/HTML4.01で最も注目された点は文章構造と視覚的な表現(見栄え)の分離です。本来HTMLは文書の構造をしるし付け(マークアップ)し、文書の持つ情報をコンピューターが読めるようにする言語です。しかし、WEBの発展に伴ってレイアウトや色やフォントなど、ページの見栄えまでも指定するようになってきました。W3Cはそれを取り除き、文書構造はHTMLで見栄えについてはスタイルシートを利用すべきだという方針を打ち出したのです。

 HTML4.01に続いてW3Cから勧告された仕様が、HTMLをXMLで書き直したXHTMLです。XMLの厳しい文法規則を用いてコンピューターが文章構造を理解しやすくし、またXMLの持つ拡張性や柔軟性をHTMLに取り入れることで、WEB上の情報がさらに活用されていくと考えられていました。2000年に勧告されたXHTML1.0は、HTML4.01との互換性が考慮されていた為HTMLからの移行もしやすく、現在でも幅広く利用されています。

 その後W3Cは、XHTML BasicやXHTML1.1などを勧告し、XHTML2.0の策定にも着手しました。しかし普及は進んでません。普及を妨げたおもな理由としては、よりXMLの志向が強くなり、HTMLと互換性がないことや、WEBアプリケーションが注目されるようなWEBの実績に対応していなっかった事などがあげられます。つまり、難解で煩わしい定義や、これまでに得た知識や今あるコンテンツなどを活用できない実用性に問題あるのは、ブラウザーを開発するベンダーやWEB制作の現場に受け入れられなかったのです。

HTML5とは? HTML5の登場


 一方、W3Cの方針を疑問視したApple、Mojzilla、Operaは2004年にWHATWGを発足させ、XHTML2.0に代わる新しいHTMLの策定を開始します。彼らは、シンプルで実用性のあり、WEBの世界を発展させられるような仕様を独自に作り上げてきました。

 W3Cが新たなHTMLの策定を2007年の事です。これを知ったWHAWTSWは、2007年4月、W3Cに対し、彼らが作成している仕様を採用して「HTML5」という名前で策定を始めてはどうかと提案します。同じ年の5月にW3Cはこの環境を受け入れると発表しました。HTML5とはこの時期に始まります。W3C側のXHTML2.0はその後2009年末に策定が打ち切られ、以降W3CはWHATWGとともにHTML5の策定に力を注ぐ事になりました。

HTML5について


これまでのHTMLやXHTMLは文章の構造を示すためのマークアップ言語、またはその仕様を目指すものでした。しかしHTML5という言葉は現在、いくつかの異なる意味を持って使われています。例えば、従来のようにマークアップ言語としての仕様です。ただし、HTML5では扱う範囲が大きく拡大しています。それはマークアップ言語としてだけではなく、WEBアプリケーションのプラットフォームとして、関連するAPIなどをも含む仕様となっています。

HTMLの基本的な構造


HTML文書の基本的な構造は以下のようになります。

kihon.gif

 このようにHTMLでは、「開始タグ」と「終了タグ」があり、この2つで「要素内容」を挟むように記述します。

<h1>○○○シリーズについて</h1>

<p>
株式会社○○が運営するWEBシリーズにはおもに次のものがあります。
</p>

<!--この部分はコメントです-->

<ul>
<li>HTML○○サイト</li>
<li>スタイルシート○○サイト</li>
<li>javascript○○サイト</li>
<li>ホームページ○○サイト</li>
</ul>



 ただし、次の要素は要素内容を持たないために、開始タグのみで終了タグがありません。このような要素を「空要素」といいます。

areabasebrcolcommand
embedhrimginputlink
metaparamsouce


 ・属性と値

各要素には、その要素の性質や役割など詳細情報を示す「属性」を指定することもできます。開始タグの要素名に半角スペースをいれ、基本的には「属性名="値"」の形で記述します。
値には、rect,circle,polyのように既定のものと、数値や文字列などのように文書の作成者が任意で指定するものとがあります。下の例のように、引用符(" "や' ')で囲って記述するのが一般的です。

<textarea name="comment">ご意見をどうぞ</textarea>

HTMLの場合、属性名と値が同じ属性の時は次のような指定方法も認められています。

disabled="disabled"
disabled=""
disabled

複数の属性を指定する場合は、それぞれを半角スペースで区切って記述します。順序は関係ありません。

<textarea name="comment" rows="5" cols="50">ご意見をどうぞ</textarea>

・グローバル属性
 属性の中には、すべての要素で共通して利用できる「グローバル属性」があります。

・コメント
 「<!--」と「-->」に挟まれた部分がコメントになります。ブラウザには表示されないので、編集時にメモを入れたり、一時的に文書の一部をかくしたりするときなど利用できます。


HTML構文とXHTML構文


 HTML5では、「HTML構文」とXHTML構文」という2通りの文書形式が既定されています。

・HTML構文
 HTML5のHTML構文は、これまで使われてきたHTML4.01と、HTML4.01をXMLの文法で定義し直したXHTML1.0の両方に互換性があります。基本的にはHTML4.01の文法規則に従って記述しますが、XHTML1.0の文法規則で記述することも認められています。


<!DOCTYPE html>
<html>
  <head>
    <mta charset="UTF-8">
    <title>ここにタイトルを書きます</title>
  </head>
  <body>
    <p>段落を書きます</p>
  </body>
</html>

・HTML構文
 HTML5のXTHML(XML)構文はこれまで使われてきたXXHTML1.0と互換性があり、XHTML1.0の文法規則に従って記述します。

<?xml version="1.0" encoding="UTF-8">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>ここにタイトルを書きます</title>
    </head>
    <body>
      <p>段落を書きます</p>
    </body>
  </html>

 なお、通常、HTML文書のMIMEタイプには「text/html」を指定しますが、XHTML(XML)構文で文章を作成した場合には、MIMEタイプを「application/xhtml+xml」として配信しなくてはなりません。XHTML構文のページとして正しくブラウザーに解釈させるには、サーバー側での設定が必要になることもありますし、また、ブラウザーによっては対応していないこともあります。

DOCTYPE宣言


 HTML4.01やXHTML1.0では、HTMLやXHTMLのバージョンやDTD(Document Type Definition/文書型定義)の所在を表す長いDOCTYPE宣言を、文書の冒頭に記述していました。

HTML4.01の宣言
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 これに対しHTML5のDOCTYPE宣言は、次のように非常にシンプルです。
<!DOCTYPE html>
 HTML5にはDTDが存在しないため、DOCTYPE宣言でHTMLのバージョンやDTDを示す必要はなくなりました。HTML5のDOCTYPE宣言は、ブラウザの表示モードを標準モードにするという目的でのみ利用されるものです。

 HTML構文で文書を作成する場合、DOCTYPE宣言は必須です。大文字と小文字は区別されません。


文字エンコーディングの指定方法

 HTML5では、文書の文字エンコーディングに「UTF-8」が強く推進されています。
 文字エンコーディングの指定方法としては、meta要素にcharset属性が追加されました。
次の一文を、文書の先頭から512バイト以内に記述します。

 ・HTML5の文字エンコーディングの指定方法(UTF-8の場合)
<meta charset="UTF-8">
 これは従来の文字エンコーディングの指定方法に置き換わるものですが、HTML5では従来 の指定方法を利用することもできます。

 ・従来の文字エンコーディングの指定方法

<meta http-epuiv="Content-Type"
content="text/html; charset=UTF-8">
 ただし、両方の指定方法を混在させることはできません。また、meta要素で指定する文字エンコーディング名と、文書の実際の文字エンコーディングが同じになるように注意してください。


 読んでいただいてありがとうございます。今日はここまでです!!何か分かりにくい事はないですか?今回の記事については、あくまで自分自身の勉強を兼ねているので、果たして読んでくれた人がわかりやすく感じてもらってるのか正直わかりませんが、ここまでお付き合いありがとうございます。
次は「要素の変更点」「グローバル属性」について勉強していきます。でわでわ!!



関連記事

テーマ : インターネットサービス    ジャンル : コンピュータ

TOP > HTML5 > HTML5入門:HTML5とXHTMLの違い!!基礎知識編 vol.1

LEAVE
'A'
COMMENT






09-2018
SUN MON TUE WED THU FRI SAT
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

08   10

月別アーカイブ
タグクラウド
全記事表示リンク

 About
WebBox norijin note

はじめまして!!
1983年4月生まれのAB型。広島出身の元美容師で、その後、大阪にてIT企業に勤め、現在三人で会社を立ち上げる為、日々精進しています。
 ブログでは、WEBについて勉強した内容や、自分が使ってて便利な情報を気ままに発信しています。

 Contact
メールフォーム

名前:
メール:
件名:
本文:

 link
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。