セマンティックウェブページ XHTMLセマンティックマークアップ

2022-02-07 06:54:01

構造と表現を分離するもう一つの重要な点は、セマンティックマークアップを使って文書の内容を構築することである。XHTML要素があるということは、タグ付けされているコンテンツの部分がそれに対応する構造的な意味を持つということであり、他のタグを使う理由はありません。言い換えれば、CSSによってあるHTML要素が別のHTML要素のように見えてはいけません。例えば、見出しをマークアップするのに <p> の代わりに <div> を使ってはいけません。
まず、セマンティクス（Semantics）とデフォルトスタイルの違いについてですが、デフォルトスタイルとは、ブラウザが設定するいくつかの共通タグの表現で、個人的には、タグ（マークアップ）や属性（アトリビュート）の使い方や役割をみんなに直感的に理解してもらうことが彼の主目的だと思っています。明らかにHxシリーズは太くて大きなフォントサイズを持っているのでタイトルとよく似ています。 <strong>,<em> は他のテキストと区別するために使われ強調の役割を担っています。リストや表については、何をするものかは一目瞭然です。
<Hx>
h1>, h2>, h3>, h4>, h5>, h6>は見出しとして使われ、重要度が下がっていく。
例えば

内容をクリップボードにコピーする

コード

class Person():
    """a person""";
    def _init_(self,name,age):
        """initialize the attributes name and age""""
        self.name = name;
        self.age = age;

    def eat(self):
        """One eats"""
        print(self.name + "Eating");
	
    def zb(self):
        """a person pretending to be more than """
        print(self.name + "is pretending to compare");

person = Person('haha',21);
print("The Person name is: " + person.name);
print("The Person age is:" + str(person.age));

を使う代わりに
<div class="title">document title</div> または <span class="title">document title</span> のいずれかになります。明らかに検索エンジンは後者のタイトルとは見なさないでしょう。
<p>
段落のマークアップは、<p>が段落として使われることを知っていれば、改行に<br/>を使う必要がなく、段落と段落を区別するための<br/>も不要になるのです。<p></p> のテキストは自動的に改行され、改行も <br> よりも優れています。また、段落と段落の間隔もCSSで制御できるので、段落と段落の区別が容易で明確になります。ラインハイト（line-height）の使用では、行間を定義するのは簡単ですし、最初の単語のシンクと他の効果を定義し、それはかなり完璧です。
例えば

内容をクリップボードにコピーする

コード

<p>Blue Ideal www.blueidea.com was born in October of 1999. Since its inception, Blue Ideal has aimed to build a home for web designers and developers, with the introduction of web development technology and website creation and design exchange as its main content. Its website content is well-produced, with members' elaborate tutorials released every day to selflessly help netizens, and it has also held many design competitions and developed many related programs that are still applied by many websites. The published works and reviews have received a lot of media attention and praise from connoisseurs, and also established their social status, so a group of network colleagues joined Blue Ideal, becoming one of the largest design sites in China.

<ul>, <ol>, <li>
<ul> 誰もが広く使っているほど一般的な順序なしリスト、<ol> 順序ありリストもかなり一般的なリストです。Webの標準化では、<ul>は、リストであることが前提のナビゲーションバーにも多く使われており、これはまさにその通りで、ブラウザがCSSをサポートしていない場合でも、ナビゲーションリンクは、美観が少し悪くなる程度でうまく機能します。
例えば

内容をクリップボードにコピーする

コード

<ul>

<li> Item I</li>

<li>Item II</li>

<li>Project III</li>

</ul>

内容をクリップボードにコピーする

コード

<ol>

<li> Chapter 1</li>

<li>Chapter 2</li>

<li>Chapter 3</li>

</ol>

<dl>, <dt>, <dd>
dlは、quot;definition list"です。このリストは、例えば、辞書に載っている単語の説明や定義に使用することができます。
例えば

内容をクリップボードにコピーする

コード

<dl>

<dt>Dog</dt>

<dd>A carnivorous mammal of the family Canidae.</dd>

</dl>

内容をクリップボードにコピーする

コード

<dl>

<dt> Shanghai Tang</dt>

<dd>This "Shanghai Tang", filmed in 1980, is arguably the most successful and classic drama in the history of Hong Kong television.

After its broadcast in Hong Kong back then, it created a huge sensation. It was a huge hit in Hong Kong;

<dt> Chow Yun Fat</dt>

<dd>Like all great movie stars, Chow Yun-Fat has stamped an era, a golden age of Hong Kong cinema.

 

</dl>

<cite>, cite , <q>, <blockquote>
ウェブブラウザは、<q>間のコンテンツを自動的に認識します。残念ながら、IEはそうではないので、場合によっては、<q>がアクセシビリティの問題を引き起こす可能性があります。そのため、なるべく <q> を使用せず、手動で参照タグを挿入することを推奨する人もいます。適切なクラスを含む <span> に1行の参照コンテンツを追加すると、CSS が参照にスタイルを付けることができますが、これには意味的な意味はありません。Mark PilgrimによるThe Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag ) を読むと、<q>関連の問題に対処することができます。
CSSを使用して、引用のスタイルを定義することができます。段落を直接 <blockquote> に入れることはできないので、引用文は通常 <p> という要素に含まれなければならないことに注意してください。cite属性は、<q>または<blockquote>と共に使用することができ、参照したコンテンツの出所アドレスを提供します。引用された内容をマークアップするために、<q> の代わりに <span> を使用する場合、cite属性は使用できないことに注意してください。
例えば

内容をクリップボードにコピーする

コード

<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.

内容をクリップボードにコピーする

コード

<p> <cite> Confucius</cite> said: <q> To learn without thinking is reckless, to think without learning is dangerous</q>. </p>

内容をクリップボードにコピーする

コード

<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/

struct/text.html#h-9.2.1">The presentation of phrase elements

depends on the user agent.</q>. </p>

内容をクリップボードにコピーする

コード

<blockquote cite="http://www.w3cn.org/">

<p> "Most of us have had the profound experience that the site we've just built can become obsolete with every major browser version upgrade that comes along.

     We then need to upgrade or rebuild the site all over again. For example, the typical 1996-1999 "browser wars" that

     In order to be compatible with Netscape and IE, the site had to write different code for the two browsers. Likewise, the

     whenever new web technologies and interactive devices emerge, we also need to make a new version to support that new technology or device.

     For example, WAP technology that supports mobile Internet access. The list of similar problems goes on and on: bloated, cumbersome website code that wastes a lot of our bandwidth.

     

     It's a vicious circle and a huge waste." </p>

</blockquote>

<em>, <strong>
<em> は強調表示、 <strong> は強調表示に使用されます。多くのブラウザは、強調を斜体で、強調を太字で表示しますが、その必要はなく、強調の表示方法を決めるのであれば、CSSでその挙動を定義するのが一番よい方法です。視覚的な効果だけが欲しいときには、強調を使わないようにしましょう。また、強調したいけれども、太字や斜体では視覚的に見栄えが悪いと感じる場合、特に中国語の斜体は、他のもっと目を引くスタイルをいくつか定義して、強調効果を完全に達成することができます。
例えば

内容をクリップボードにコピーする

コード

The text of <p><em> emphasis</em> is usually displayed in italics.

However, <strong>special emphasis</strong> text is usually displayed in bold. </p>

<table>, <td>, <th>, < caption >, summary
XHTMLにおけるテーブルは、レイアウトのために使用すべきではありません。しかし、リスト用のデータをマークアップする目的であれば、テーブルを使うべきでしょう。<th> は表のタイトル、attribute summar は要約、<caption> タグはヘッダの説明、<thead> タグは表の見出し、 <tbody> タグは表の本文、 <tfoot> タグは表の末尾になります。
ここで、headers 属性の代わりに scope を使用すると、テーブルのヘッダー情報を含むセルをマークすることもでき、各値の内容は次のようになります。
　行は現在のセルを示し、現在のセルを含む行の関連するヘッダー情報を提供する。
　col 現在のセルを示し、現在のセルで指定された列の対応する表ヘッダ情報を提供する。
　rowgroup 現在のセルを含み、残りの行グループの関連するテーブルヘッダー情報を提供する。
　colgroup 現在のセルを示し、現在のセルによって指定される残りの列グループの対応する表ヘッダ情報を提供する。
abbr テーブルヘッダーセルの省略名を定義するために使用します。この属性が定義されていない場合、セルの内容はデフォルトで省略された形になります。
例

内容をクリップボードにコピーする

コード

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"& gt;

<caption>Table 1: Power Mac G5 tech specs </caption>

   <tr>

<th scope="col" abbr="Configurations" class="nobg">Configurations</th>

<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>

<th scope="col" abbr="Dual 2">Dual 2GHz</th>

     <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>

   </tr>

   <tr>

<th scope="row" abbr="Model" class="spec">Model</th>

<td>M9454LL/A</td>

<td>M9455LL/A</td>

<td>M9457LL/A</td>

   </tr>

   <tr>

<th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>

<td class="alt">Dual 1.8GHz PowerPC G5</td>

<td class="alt">Dual 2GHz PowerPC G5</td>

<td class="alt">Dual 2.5GHz PowerPC G5</td>

   </tr>

   <tr>

<th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>

<td>900MHz per processor</td>

<td>1GHz per processor</td>

<td>1.25GHz per processor</td>

   </tr>

   <tr>

<th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>

<td class="alt">512K per processor</td>

<td class="alt">512K per processor</td>

<td class="alt">512K per processor</td>

   </tr>

</table>
<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p& gt;

エフェクト表示： http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm
<dfn>

内容をクリップボードにコピーする

コード

<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>

<ins>, <del>
del を知っていれば、取り消し線に <s> を使う必要はなく、del を使う方が明らかにセマンティックです。また、delには削除理由と削除時刻を示すciteとdatetimeがあります。insは挿入のためのもので、このような属性もあります。
例

コンテンツをクリップボードにコピーする

コード

<code>p{margin:2px 0;}</code>

<code>
コンピュータコードであることを示す。また、フォントを入力するのがデフォルトのスタイルである。技術フォーラムやブログでしばしば遭遇する。
例

コンテンツをクリップボードにコピーする

コード

<abbr title="Cascading Style Sheets">CSS</abbr>

<abbr>, <acronym>
Webページ上の略語は<abbr>タグ、頭字語は<acronym>タグを使用します。(注)ここでは、略語と頭字語は別々に扱い、略語は頭字語よりも範囲が広く、頭字語は頭字語として扱います。
(<acronym> タグで記述) IE6.0以下のWindowsブラウザは、現時点では<abbr>タグに対応していません。IEでは、<acronym>にCSSを適用することはできますが、<abbr>タグにCSSを適用することはできません。
IEでは、<acronym>タグのtitle属性はヒントを表示しますが、<abbr>タグは無視されます。
回避策は、http://www.w3cn.org/article/translate/2005/115.html で公開されています。
例

内容をクリップボードにコピーする

コード

<acronym title="Cascading Style Sheets">CSS</acronym >

内容をクリップボードにコピーする

コード

<img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com">

alt属性とtitle属性
title属性は、要素に関する追加情報を提供するために使用されます。title属性は、base, basefont, head, html, meta, param, script, titleを除く全てのタグで使用することができます。しかし、それは必須ではありません。
alt属性は、画像、フォーム、アプレットを表示できないユーザーエージェント（UA）のための代替テキストを指定します。置換テキストの言語は、lang 属性で指定します。

内容をクリップボードにコピーする

コード

<a href="http://www.jluvip.com/blog/article.asp?id=260" title="js Get data for radio button">js Get data for radio button</a>

内容をクリップボードにコピーする

コード



<a href="http://www.jluvip.com/blog/article.asp?id=260" title="js ラジオボタンのデータを取得する">js ラジオボタンのデータを取得する</a>

参照
デフォルトのスタイルです。
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/TR/CSS21/sample.html
意味づけ:
http://www.456bereastreet.com/lab/developing_with_web_standards/zh
http://www.456bereastreet.com/lab/developing_with_web_standards
http://www.w3cn.org/article/translate/2005/114.html
http://www.w3cn.org/article/translate/2005/114.html
http://www.junchenwu.com/2005/11/html_tags.html
http://brainstormsandraves.com/articles/semantics/structure/
http://www.w3.org/TR/html401/struct/text.htm
http://www.simplebits.com/bits/simplequiz/
リソースリンクです。
悪いタグ
http://www.htmldog.com/guides/htmlintermediate/badtags/
Qタグ
http://diveintomark.org/archives/2002/05/04/the_q_tag
HTML、XHTML、セマンティクスとウェブの未来
http://www.westciv.com/style_master/house/good_oil/xhtml/index.html

セマンティックウェブページ XHTMLセマンティックマークアップ

コード

コード

コード

コード

コード

コード

コード

コード

コード

コード

コード

コード

コード

コード

コード

コード

コード

コード

コード

関連

最新

おすすめ