怎样理解HTML5和CSS3的语义化标签？

【小测验：你对HTML5了解有多少？】

如果你是个程序员，在进入这新的一年之际，对你的职业生涯最重要的事情是什么？如果你一时想不出来，我来告诉你，是检查一下自己的技术方向是否符合当今最新技术潮流，检查一下自己的技术水平是否能达到将来软件趋势的要求。如果你对自己心里没谱，不确定自己的技术方向是否正确，技术水平是否合格，那唯一你要做的事情就是：做一个测试。

在下面的这张图标里，我们列举了10道基础的HTML5/CSS3考题，它们将帮助你判断你是否为最新的开发趋势做好了准备。

这些题都很简单。这幅图的前半部分是问题，下半部分是答案，请先做题，做完题再看你回答的是否正确。

• 答对8道或更多 – 你对这些知识了解的相当不错。
• 6-7道正确 – 对于答错的那几道题，你需要做进一步学习，包括这几道题涉及的相关知识领域。
• 少于5道 – 你需要努力了。但不要担心，现在学习还不晚，赶紧去找几本这方面的书或参加个培训班吧。

更多好文章：

比如这样是尊重html（不一定html5）语义的写法

<blockquote>  ---- 1  
道可道，非常道
<cite>《道德经》，老子</cite>
</blockquote>

但这样不是

<blockquote> --- 2
<!-- 这不是对外部资料的引用，我只想用blockquote的缩进效果 -->
<form>
<input ...>
</form>
</blockquote>

很容易因为某个元素有某种特别样式去用这个元素，但这种时候很多是不尊重语义的。也有一路div到底的，这样是语义不明的，用好html标签是一种自制的艺术。

为什么这很重要，因为多数人能看见，能根据样式来区分语义，但想象你看不见，只用用screen reader，这时候例子1就是可用的，例子2就会让用户费解，因为语义不准确。

语义是尊重标记本来的意思，用在该用的地方。