结构良好的HTML(或者XHTML)文档可能包含如下元素:
HTML文档结构(<head>、<body>、<div>、<span>)。
文字内容。
传达含义和内容结构的语义标注(标题、段落文字、列表和引用)。
让内容以一种特定的方式来显示的可视化展示(CSS)。
与视昕内容相连的链接(gifjpeg或png图形，QuickTime或者其他媒介文件)。
交互行为(JavaScript、Ajax元素，或者其他编辑技法)。
1.文档结构
在结构严格的HTML中，所有的Web页面代码都要放在以下这两个基础元素之中:
Head(<head>...</head>)
Body(<body...</body>)
在过去，页面代码结构的这些基本要求是良好结构的基础:完全正确但是功能可选，且对于用户是可见的。在今天的更为复杂和更具挑战性的万维网中，复杂的页面代码、很多不同的显示可能、复杂的样式表以及交互脚本已经非常常见，因此正确地构建分割元素十分重要。
<head>区域是Web页向显示设备(Web浏览器、手机、iPodTouch)声明代码标准和文档类型的区域，它也是所有重要的页面标题放置的地方。页面标题区域也可以包含那些与网站很多页共享的外部样式表和JavaScript代码相连的链接。
<body>区域包含所有页面内容，也是重要的对可视样式、编程和语义内容标注的CSS控制。通常，位于页面body内的区域使用分区(<div>)或范围(<span>)标签来进行功能分割。例如，绝大多数Web页都有页眉、页脚、内容和导航区域，它们全部使用可以被寻址和使用css进行可视样式化处理的已命名的<div>标签来指定。
HTML文档类型声明了HTML文档采用的是哪个版本和标准，文档类型对于估算HTML标注和CSS的品质和技术有效性至关重要。Web开发技术团队应该告诉你将在页面编码中使用什么版本的HTML(例如，HTML4和XHTMLI)，以及会在网站中使用哪种文档类型声明。HTML是Web页面标注的通用基本标准。XhTML与HTML非常相似，但是XHTML是XML的子集，并且有更为严格的要求。尽管HTML是使用最广的Web标注标准，将XHTML用做页面标注有以下更为强大的优势:
与XML技术、XML内容以及诸如Ajax之类的混合JavaScript/XML技术兼容。
与非HTMLWeb标注标准兼容，诸如用于科学文档Mathml、用于交互视听内容的同步化多媒体整合语言(SynchronizedMultimediaIntegrationLanguage，SMIL)以及可伸缩矢量图形(ScalableVectorGraphics，SVG)。
与更新的XML内容技术、内容管理体系和其他正在发展之中的Web技术的未来兼容性，这些Web技术可以从XHTML标注标准更好的一致性和更大的结构中获益。
2.内容标注
语义标注是常见HTML使用的一种优质界标:如果你编写了一个标题，可以使用标题标签(<h1>，<h2>)来标注；如果你编写的是基本的段落文字，可以将该文字放在段落标签之中(<>...</p>)；如果你希望强调某个重要短语，可以使用加粗强调(<strong...</strong>)来标注它:如果你引用了另一个作者的内容可以使用<blockquote>标签来标识该文本是引用的。永远不要根据Web浏览器中的显示方式来选择HTML标签。你可以在稍后使用CSS来调整内容的可视化效果以制作理想的标题、引用、强调文字以及其他排版效果的外观。
因为个别可能需要某些视觉效果的原因，例如，用斜体显示某个科学名称，如Homosapiens(智人)，HTML中还保留了少许诸如<b>(粗体)和<i>(斜体)的专用可视HTML标签。如果你使用类似<b>或<i>的语义含义的标签，不妨思考一下适当的样式强调(<em>)或者加粗强调(strong>)能否表示出更多的含义。HTML也包含不为浏览者所见的语义元素，但是它对于网站开发团队的幕后工作非常有用。诸如lassID、division.span和met标签等元素都可以让团队成员更方便地理解、使用、可视化样式和从程序上控制页面元素。很多样式表和编程技术都要求对页面元素进行细致的语义命名，以便让内容的访问性和灵话性更为通用。
3.层叠样式表
层叠样式表(CsS)允许Web发布者在给予图形设计师对每个HTML元素可视化显，示细节完全控制权的同时，保留使用语义htML传递逻辑文档结构和含义的巨大优势。CSS的作用就像是诸如MicrosoftWord之类的文档处理程序中的样式表。换而言之，就是你可以使用分级的标题和其他样式来构造文档，接着只通过更改样式便可全局更改所有的样式。css的工作方式相同，尤其是当你使用网站所有页面共享的外部样式表时。例如，如果所有页面都链接了同--主CSS文件，那么你只需更改主样式表中的<h1>样式即可更改所有<h1>标题的字体、字号和颜色。
4.视昕内容
Web页面文件不直接包含图形和视听素材，但是使用图像和其他指示链接在浏览器中将图形和媒介合并到最终的Web页面组合中。它们包含的这些链接以及替代文字(“alt”文本)或者长描述性(longdesc)链接对于通用可用性和搜索引擎可视性而言非常重要。Web用户不只会搜索文字。搜索引擎会使用带关键字的标签图像所对应的替代文字描述，存在视障的用户会基于替代文字来描述图像内容。适当的语义标往能确保你的视听媒介为浏览者中的每个人以及搜索引擎最大范围地使用。
5.交互脚本
JavaScript是通常用来创建交互行为的语言。JavaScript也是诸如Ajax之类原Web页面内容交付策略中的关键技术。所有的JavaScript代码都应归于Web页面的“头部”(head)区域，但是如果你的代码很复杂并且非常长，“真实的”页面内容就被挤到了几十行代码的下方，无法被搜索引擎找到。如果你使用页面级别的JavaScript脚本(也被称为客户端脚本)，则应该将所有的代码以最短的字节数放在某个链接文件中。应用此种方式，当使用长而复杂的JavaScript时就不会错失搜索页面排名。
6.其他文档格式
除了HTML外，Web还支持很多文档格式。PDF、Flash和Shockwave是经常用来提供基础HTML无法提供的功能的格式。PDF文件深受那些使用文字处理和页面市同程序制作的文档的喜爱，它能保持源文档的外见，Flash和Shockwave提供了使用标准HTML无法提供的交互性。通常，最好的方式是以无格式的HTML形式提供文档，这是因为标注可以提供更大的灵活性，井且被设计为支持通用可用性，然而有时，在必质果用其他格式提供的附加特色和功能之时，要确保能m到软件的可访问性功能，Adobe花了大力气通过支持语义标注、文本等价和关键宇川访问性，专门将可访问性功能合并到它的Web格式之中。
注意浏览器的不同
用于表格、表单、定位和排列的HTML及CSS有时在针对不同品牌和版本的Web浏览器时，其使用会稍有区别。这些细微的不同通常不会被注意到，但是在更为精准和复杂的Web页面布局中，也有可能会造成意想不到的结果。不要过于相信HTML、CSS、JavaScript、Java或任何插件的效果，除非你使用每个主流Web浏览器并且跨平台查看过你的Web页面的显示。
查看Web日志，或者使用诸如GoogleAnalytics之类的服务，来了解在读者群中最普遍使用的是什么浏览器品牌、浏览器版本以及操作系统(Mac、Windows和移动)。并非每个浏览器都支持CSS的所有的功能，尤其是如果那个功能很少使用或者近期才添加到CSS代码的官方标准中。例如，尽管带阴影的文字是有效的CSS选项，但是所有的浏览器都不支持它。
关于语义标注的小结
基于语义标注技术和标准的网站制作HTML文档类型仔细设置标注和编辑标准，井且在整个开发过程中坚持使用这些标准。当今的Web环境远不止桌面计算机上的InternetExplorer或者Firefox-成百上千的移动计算机设备在为人们使用，每天都有很多查看和使用Web内容的全新方式出现。基本上，遵循语言Web标注的惯例做法和审慎使用已经验证的页面代码和样式表的做法，是确保Web内容最好策略，它们能确保你的Web内容在未来使用性最广、可见性更强。