XHTMLクリーンアップ基礎理論

22416 ワード
xhtml Web規格 html5 テキストリンク
※本ポスターは、本『実戦プロジェクト反応型ページ配信』の内容をもとに制作されています

XHTML


誤った構造で表記すると、CSSやJavascript(アクション)を適用する際に困難になるだけでなく、うまく適用されていても、自分の機能や役割を実行できないという不良なページが出てきます.<p>, <span>, <a>等命令形式が「<」(括弧)のものを表記と呼ぶ.<p> ~ </p>と同様に、タグの(<>)と終了(<>)を1つの要素と呼ぶ.
これらの要素を用いてWebドキュメントを作成する基本構造をマーク(markup)と呼ぶ.

XHTMLの構文規則


1.要素が正しく重なる必要があります。

<p>중첩된 요소가 있을 때는 <strong>바르게</strong> 표현해야 한다.</p> (O)
<p>중첩된 요소가 있을 때는 <strong>바르게</p> 표현해야 한다.</strong> (X)
最後に定義したタグを最初に閉じる必要があります

2.要素および属性名は小文字でなければなりません。

<p><a href="index.html">첫페이지</a></p> (O)
<P><A href="index.html">첫페이지</A></P> (X)
<a>要素の「href」などを属性(attribute)、「=」の後を値(value)と呼ぶ.

3.要素は常に閉じる必要があります。

<p>요소는 <strong>항상 닫아야</strong> 합니다.</p> (O)
<p>요소는 <strong>항상 닫아야 합니다. (X)
しかし、1つの要素は、1対のラベル(<>~)ではなく、1つのラベルからなるものもある.
これらの要素は空の要素と呼ばれます.
空の要素についても、以下のように「/」で終わる必要があります.
요소는 항상<br /> 닫아야 합니다. (O)
요소는 항상<br> 닫아야 합니다. (x)
<img src="image/today.gif" alt="오늘" /> (O)
<img src="image/today.gif" alt="오늘"> (X)
よく使われる空の要素は<br />, <ht />, <img />, <input />, <area />, <meta />, <link />などです.

4.属性値には引用符を付ける。

<img src="image/today.gif" alt="오늘" /> (O)
<img src="image/today.gif" alt="오늘"> (X)
通常、"="の後に現れる値(value)と呼ばれ、値には引用符("")が付けられます.

5.属性は属性値とともに記入する必要があります。

<input disabled="disabled" /> (O)
<input disabled /> (X)
<option selected="selecterd"></option> (O)
<option selected></option> (X)
属性は属性値のように宣言し、省略することはできません.

6.img要素とarea要素にはalt属性が必要です。

<img src="imges/today.gif" alt="오늘" /> (O)
<img src="imges/today.gif" /> (X)
<area shape="rect" coords="0,0,0,72" alt="오늘" href="today.html" /> (O)
<area shape="rect" coords="0,0,0,72" href="today.html" /> (X)
<img>要素にaltが必要なのは、文法的にも必要だからだが、画像が見えない環境でも画像に関する情報を十分に提供すること.

7.特殊文字を使用する場合は、Entity名またはEntityコードを使用します。

<p>you &amp; me</p> (O) -> &amp;는 특수문자'&'의 Entity Name
<p>you &#38; me</p> (O) -> &#38;는 특수문자'&'의 Entity code
<p>you & me</p> (X)
特殊文字「&」を出力するために直接「&」と書くと、Entity NameまたはEntity codeの先頭にある&と誤認され、構文エラーが発生します.したがって、これらの問題が発生したくない場合は、特殊文字をEntityに変換して説明する必要があります.
※行くhttp://emtity.comEntity codeについての詳細情報が得られます.

8.コメント処理方法


注釈は、通常、コラボレーション(コラボレーション)時に次のスタッフが現在の作業の説明を簡単に理解できるようにするのに役立つと考えられます.
コメントの内容はブラウザ画面に出力されません.処理方法は次のとおりです.
<!--주석내용-->
<!--여기서부터 공지사항입니다.-->
※作成したページの「文法検証」はhttp://validator.w3.orgで行えます.

デフォルトのドキュメント構造

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
  <head>
    <meta name="description" content="Responsible Web Project" />
    <meta name="keywords" content="xhtml, css, html5, css3, javascript, jquery" />
    <meta name="author" content="icons" />
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>반응형 웹</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <script type="text/javascript" src="main.js"></script>
    <style type="text/css">
      body{font-size:12px;}
    </style>
  </head>
  <body>
    반응형 웹이란...
  </body>
</html>
  • <!DOCTYPE>ブラウザの現在のドキュメントタイプを教えてください.
  • <html>要素内は<head>要素と<body>要素からなる.
  • <head>要素内に出現する可能性がある<meta>, <title>, <link>, <script>, <style>などの要素は、以下のように整理されている.
  • <meta>:文書の説明、キーワード、著者等を指定
  • <title>:文書のタイトル
  • ・<link>:通常外部CSSファイル接続用
  • <script>:主にJavaScript宣言用
  • <style>:ダイレクトスタイル(CSS)を文書に定義する
  • XHTMLでは「ネーミングスペース」を指定する必要がありますが<html>ラベルのxmlns=「http://www.w3.org/1999/xhtml」属性が「ネーミングスペース」部分です.隣のlang=「ko」xml:lang=「ko」は「言語は韓国語」という意味です.
  • <meta>ラベルに「charset=UTF-8」と指定されている部分があります.charsetは文字セットの略で、「文字の組み合わせ」を表します.UTF-8"はすべての言語の文字と特殊な文字を表現することができ、多言語環境に適している.ここで重要なのは、charsetをUTF-8に設定した場合、ドキュメントの保存時にもエンコードオプションを「UTF-8」に指定して保存する必要があることです.文字切れが発生します.
    • Terraformでサッと使える検証用EKS環境を作った
    ディレクトリ構造を保ったままwebp生成するNode.js/webp対応について