结构精良的html (或者xhtml)文档能够包罗以下元素:
●html文档结构(<head>、 <body>、 <div>、 <span>)。
●文字内容。
●转达寄义和内容结构的语义标注(题目、段落文字、列表和援用)。
●让内容以一种特定的体式格局来显示的可视化展现(css)。
●与视昕内容相连的链接( gif jpeg或png图形，quicktime或者其余媒介文件)。
●交互举动(javascript、 ajax 元素，或者其余编纂技法)。
1. 文档结构
在结构严厉的html中，一切的web页面代码都要放在以下这两个根蒂根基元素之中:
●head (<head>...</head>)
●body (<body...</body>)
在已往，页面代码结构的这些根本请求是精良结构的根蒂根基:彻底正确可是功用可选，且对付用户是可见的。在今日的更为庞大和更具应战性的万维网中，庞大的页面代码、不少差别的显示能够、庞大的样式表以及交互剧本曾经非经常见，因而正确地构建朋分元素十分首要。
<head>区域是web页向显示设备( web阅读器、手机、ipod touch)声明朝码标准和文档类型的区域，它也是一切首要的页面题目放置的处所。页面题目区域也能够包罗那些与网站不少页同享的外部样式表和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手艺兼容。
●与非html web标注标准兼容，诸如用于科学文档mathml、用于交互视听内容的同步化多媒体整合言语(synchronized multimedia integration language， smil) 以及可伸缩矢量图形(scalable vector graphics， svg)。
●与更新的xml内容手艺、内容管理体系和其余正在发展之中的web手艺的将来兼容性，这些web手艺可以从xhtml标注标准更好的一致性和更大的结构中获益。
2.内容标注
语义标注是常见html运用的一种优质界标:若是你编写了一个题目，可以运用题方针签(<h1>， <h2>) 来标注；若是你编写的是根本的段落文字，可以将该文字放在段落标签之中(<>...</p >)； 若是你但愿强调某个首要短语，可以运用加粗强调(<strong...</strong>) 来标注它:若是你援用了另外一个作者的内容可以运用<blockquote>标签来标识该文本是援用的。永远不要按照web阅读器中的显示体式格局来选择html标签。你可以在稍后运用css来调整内容的可视化成效以制作抱负的题目、援用、强调文字以及其余排版成效的外观。
由于个别能够需求某些视觉成效的起因，比方，用斜体显示某个科学名称，如homo sapiens (智人)，html中还保存了少量诸如<b> (粗体)和<i> (斜体)的专用可视html标签。若是你运用雷同<b>或<i>的语义寄义的标签，无妨思虑一下适量的样式强调(<em>) 或者加粗强调(strong>) 可否暗示出更多的寄义。html也包罗不为阅读者所见的语义元素，可是它对付开发网站团队的幕后事情十分有用。诸如lass id、 division. span和met标签等元素均可让团队成员更便当地理解、运用、可视化样式和从程序上控制页面元素。不少样式表和编程手艺都请求对页面元素进行粗疏的语义定名，以便让内容的访问性和灵话性更为通用。
3.层叠样式表
层叠样式表(css)容许web发布者在给予图形设计师对每一个html元素可视化显，示细节彻底控制权的同时，保存运用语义html通报逻辑文档结构和寄义的伟大劣势。css的作用就像是诸如microsoft word之类的文档处置程序中的样式表。换而言之，就是你可以运用分级的题目和其余样式来机关文档，接着只经由过程更改样式即可全局更改一切的样式。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日记，或者运用诸如google analytics 之类的服务，来理解在读者群中最广泛运用的是甚么阅读器品牌、阅读器版本以及操纵零碎(mac、windows 和移动)。并不是每一个阅读器都支持css的一切的功用，尤为是若是谁人功用很少运用或者近期才增加到css代码的官方标准中。比方，虽然带暗影的文字是有用的css选项，可是一切的阅读器都不支持它。
关于语义标注的小结
基于语义标注手艺和标准的网站制作html文档类型细心配置标注和编纂标准，井且在整个开发过程当中坚持运用这些标准。现今的web环境远不止桌面计较机上的internet explorer或者firefox-成百 上千的移动计较机设备在为人们运用，天天都有不少查看和运用web内容的全新体式格局泛起。根本上，遵守言语web标注的老例做法和审慎运用已教训证的页面代码和样式表的做法，是确保web内容最佳战略，它们能确保你的web内容在将来运用性最广、可见性更强。
