XHTML 구조화 1: XHTML을 사용하여 웹사이트를 재구성하기

이 장의 제목은 “XHTML : 간단한 규칙, 쉬운 지침”으로, 이유는 이 장에서 논의하는 규칙과 지침이 간단하고 쉬운 것들이기 때문입니다. 또한, 간단하고 쉬운 WEB 디자인 책은 슈퍼마켓의 새로운 무료 상품처럼, 흔하지만 눈에 띄고 사람들의 관심을 끌 수 있습니다. 이러한 것들은 사람들의 관심을 자극하고, 시도하도록 장려할 수 있습니다.

저는 이 장의 내용이 당신의 관심을 끌고, 당신을 시도하도록 장려할 것이라고 확신합니다. 왜 그렇게 말할까요? 이 장에 포함된 간단하고 쉬운 이념을 이해하게 되면, 웹의 작동 방식을 다시 생각하게 되고, 그것을 만드는 방법을 바꿀 것입니다. 하지만 저는 단순히 코드를 다시 작성하는 것만을 원하지 않습니다. 당신이 다른 방식으로 생각하고 일하는 것을 바랍니다.

그러나 재구성이 실제로 XHTML의 의미입니다.

이 장에서는 구조화된 태그의 메커니즘과 의미를 연구할 것입니다.如果你的网站标准正在融入你的开发项目，你可能会觉得本章的内容有些熟悉。即使是这方面的老手，也会从本章发现意外的收获。

XHTML 규칙 요약

전통적인 HTML을 XHTML 1.0으로 변환하는 것은 간단하고 통증 없습니다. 단지 몇 가지 간단한 규칙과 쉬운 지침을 따르면 됩니다. HTML을 사용했든 아니든, XHTML을 사용하는 데는 방해가 되지 않습니다.

  • 적절한 문서 유형 선언과 이름 공간을 사용합니다.
  • 내용 유형을 선언하기 위해 meta 요소를 사용합니다.
  • 모든 요소와 속성을 소문자로 씁니다.
  • 모든 속성 값에 따옴표를 추가합니다.
  • 모든 속성에 값을 할당합니다.
  • 모든 태그를 닫습니다.
  • 빈 태그를 공백과 슬래시로 닫습니다.
  • 주석 내에서 양성선 아래줄을 쓰지 마세요.
  • 보다 작은 것과 합성 식별자는 <와 &로 표시해야 합니다.

Unicode 和其他字符集

XML、XHTML、和HTML 4.0 文档的默认字符集是 Unicode，一个由 Unicode 联盟定义的标准。Unicode 是一套全面的字符集，它为每个字符提供了一个特定的唯一的数字，不论平台、程序和语言。Unicode 也是我们拥有的最接近通用字母表的事物，尽管它并不是一个字母表，而是一套数字映射方案。

尽管 Unicode 是 web 文档默认的字符集，开发人员依然可以自由地选择更适合他们的其他字符集。比方说，美国和西欧的网站常常使用 ISO-8859-1 (Latin-1) 编码，而中华人民共和国的国家标准是 gb2312。

为表达语义而标记文档，而不是为了样式

记住：请最大限度地使用 CSS 来进行布局。在 web 标准的世界里，XHTML 标记与表现无关，它只与文档结构有关。

结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义，即使是在老的浏览器，或是在被用户关闭了 CSS 的现代浏览器中。

不是每个站点都能立即抛弃 HTML 表格布局。CSS 的发明者，W3C，直到 2002 年 11 月才将官方网站转换为 CSS 布局。然而，即使是顽固的唯标准主义者也不总是将表现从结构中完全分离处理，至少在 XHTML 1 中是做不到的。但是现在，我们可以向这个理想迈出重大的一步，通过将表现从结构中分离（或者说将数据从设计中），即使是混合的传统的布局也可从中受益。

下面有一些提示，可以帮助你通过更结构化的方式进行思维：

提纲内的色彩

在语法学校，我们中的大部分人都被迫使用标准的提纲格式来写文章。现在，我们成为了设计师，可以多么自由地摆脱提纲的限制，然后大胆地投身于独特的个人表达的自由领域（也许我们的宣传册和商业站点还不是那么独特和个人化）。但是至少我们不会再受到提纲的困扰了。

实际上，依照 HTML，我们应该将内容结构化为有组织的层级。在浏览器不支持 CSS 的时期，我们无法在交付可供销售的布局的同时做到这一点。但是今天，在将我们的设计不折不扣地实现的同时，我们有能力交付内在结构良好的文档。

当你将供网络使用的文本进行标记，或者当你将已有的文本文档转换为网页时，请使用传统提纲的这些条目进行思考。

<h1>제 주제</h1>
<p>소개적인 글</p>
<h2>보완적인 의견</h2>
<p>관련 글</p>

또한, 폐기된 HTML 요소들(예: <font>)이나 의미 없는 요소들(예: <br/>)을 사용하여 실제로 존재하지 않는 논리 구조를 모의하는 것을 피하십시오.

예를 들어, 이렇게 하지 마세요:

제 주제<br />
소개적인 글<br /><br />
보완적인 의견<br />
관련 글

의미에 따라 요소를 사용하면, 외관에 따라 사용하지 않습니다.

우리 중 일부는 잘못된 습관에 빠져들었습니다. 우리가 단순히 큰 글자 텍스트를 필요로 할 때 h1을 사용하거나, 앞에 점 기호를 추가해야 할 때 li를 사용합니다. 전장에서 논의한 것처럼, 브라우저는 항상 디자인 속성을 HTML 요소에 강요합니다. 우리는 모두 h1이 큰 글자를 의미하며, li는 점을 의미하거나 blockquote가 텍스트 인쇄를 줄일 의미로 생각합니다. 우리 대부분은 구조화된 요소를 표현 효과를 모의하는 방식으로 HTML을 혼란스럽게 작성합니다.

또한, 디자이너가 모든 제목이 같은 크기를 사용하고 싶다면, 모든 제목을 h1으로 설정하겠지만, 이렇게 하면 구조화된 의미가 없습니다.

이것은 제목입니다. 제목을 요약 형식으로 조직한 경우.
이것은 메인 제목이 아닙니다. 하지만 나는 그것이 위의 제목과 같은 글자체를 사용하고 싶지만, CSS를 사용하는 방법을 모르겠습니다.
이것이 결코 제목이 아닙니다. 하지만 페이지의 글자가 같은 글자체를 사용하여, 나의 희망대로 만들고 싶습니다.
CSS를 이해한다면, 문서 구조를 망가뜨리지 않고 이 디자인을 달성할 수 있습니다.

우리는 우리의 작은 수수께끼를 책정하고, 요소의 의미에 따라 사용하기 시작해야 합니다. 그들의 모습에 따라 대신에. 실제로, h1은 원하는 모든 모습이 될 수 있습니다. CSS를 통해 h1은 비끈한 소문자 로마체가 될 수 있으며, p 텍스트는 두꺼운 큰 글자가 될 수 있으며, li는 점이 없을 수도 있습니다. (소문자 고양이나 소녀, PNG, GIF 또는 JPEG 이미지를 사용할 수도 있습니다.)

從今天開始, 우리는 요소의 외관을 결정하기 위해 CSS를 사용하게 될 것입니다. 요소가 페이지 중에서나 사이트 중에서 위치에 따라 외관을 변경할 수도 있습니다. CSS는 구조에서 표현을 완전히 분리시키고, 원하는 스타일로 어떤 요소든지 포맷할 수 있게 합니다.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

이렇게 한 이유는 그래픽 브라우저에서 브랜드화된 외관과 느낌을 얻으면서, 텍스트 브라우저, 무선 장치, HTML 형식의 이메일에서 문서 구조를 유지하려는 것입니다.

XHTML에 대한 장에서 더 많은 CSS 기술에 대해 설명하지 않겠습니다. 우리는 문서 구조와 시각적 표현이 완전히 다른 것임을 보여주고 싶으며, 구조화된 요소는 텍스트를 변환하는 데 사용되어야 하며, 시각적 효과를 강요하는 데 사용되지 않아야 합니다.

구조화된 요소를 사용하여 무의미한 쓰레기 대신

HTML과 XHTML의 용도는 구조화된 의미를 전달하는 것이지만, 많은 HTML 논쟁자들이 다음과 같이 목록을 삽입합니다:

항목 1<br />
항목 2<br />
항목 3<br />

정렬 목록이나 불정렬 목록을 대신 사용해 보세요:

<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>

"하지만 li는 원점을 주는데, 원점이 필요하지 않습니다!" 이렇게 말할 수도 있습니다. 위의 장에서 설명한 것처럼, CSS는 요소가 기대하는 외관에 대해 어떤 가정도 하지 않습니다. 그것은 당신이 기대하는 요소 외관을 알려야 합니다. 원점을 닫는 것은 CSS의 가장 기본적인 기능입니다. 목록이 일반 텍스트와 구분없이 보이도록 만들거나, 전환 효과를 가진 그래픽 네비게이션 바로 같이 보일 수 있습니다.

따라서 목록 요소를 사용하여 목록을 표시하십시오. 비슷하게 strong을 b 대신, em을 i 대신 사용하십시오. 대부분의 데스크톱 브라우저의 기본 설정에서 strong은 b와 같이 표시되고, em과 i는 같이 표시되며, 문서 구조를 깨지지 않고 원하는 시각적 효과를 생성할 수 있습니다.

CSS는 어떤 요소의 표시에 대해 가정을 하지 않지만, 브라우저는 많은 가정을 합니다. 그리고 강조 효과를 다른 효과로 표시하지 않는 브라우저는 없었습니다. (디자이너가 다른 방식으로 표시하는 CSS 지시를 제외합니다.). 강조 효과를 굴곡 효과로 표시하지 않을 것이라고 우려하는 경우, 다음과 같은 CSS 규칙을 작성할 수 있습니다.:

strong {
	font-weight: bold;
	font-style: normal;
	{}

시각 요소와 구조

웹 표준은 우리가 사용할 어떤 기술을 사용할지뿐만 아니라, 이러한 기술을 사용하는 방식을 준수하도록 요구합니다. XHTML을 사용하여 태그를 작성하고, CSS를 사용하여 일부 또는 모든 레이아웃을 처리하더라도, 웹사이트가 더 쉽게 사용되고 가벼워지거나, 얼마나 많은 밴드위드를 절약할지는 보장되지 않습니다. 초기에 사용한 기술처럼, XHTML과 CSS도 잘못된 방식으로 사용되고 남용될 수 있습니다. 긴 XHTML과 긴 HTML과 마찬가지로, 사용자의 밴드위드와 시간을 낭비할 수 있습니다. 긴 과도한 CSS는 HTML 코드의 표현을 완전히 대체할 수 없으며; 이는 단순히 하나의 나쁜 것을 다른 하나로 대체한 것에 불과합니다.