防止容易见到的六种html5错误使用方法
基于上述思想,下面才是正确的用HTML5和一些ARIA roles特质的例子(注意,依据你一个人的设计,你也会需要加入p)
1、不要用section代替p
大家在标签用中最容易见到到的错误之一就是随意将HTML5的<section>等价于<p>——具体地说,就是直接用作替代品(用于样式)。在XHTML或者HTML4中,大家常看到如此的代码:
<!-- HTML 4-style code --><p id="wrapper"> <p id="header"> <h1>My super duper page</h1> <!-- Header content --> </p> <p id="main"> <!-- Page content --> </p> <p id="secondary"> <!-- Secondary content --> </p> <p id="footer"> <!-- Footer content --> </p></p>
而目前在HTML5 中,会是如此:
<!-- 请勿复制这类代码!这是不对的!--><section id="wrapper"> <header> <h1>My super duper page</h1> <!-- Header content --> </header> <section id="main"> <!-- Page content --> </section> <section id="secondary"> <!-- Secondary content --> </section> <footer> <!-- Footer content --> </footer></section>
如此用并不正确:<section>并非样式
容器
[wrapper]。<section>元素表示的是内容中用来帮构建文档概要的语义部分。它应该包括一个头部
[heading]。假如你想找一个用作页面容器的元素(就像HTML或者XHTML的风格),那样考虑如Kroc Camen所说,直接把样式写到body元素上吧。假如你仍然需要额外的样式容器,还是继续用p吧。<body> <header> <h1>My super duper page</h1> <!-- Header content --> </header> <p role="main"> <!-- Page content --> </p> <aside role="complementary"> <!-- Secondary content --> </aside> <footer> <!-- Footer content --> </footer></body>
更多的例子和讲解,请参阅有关文章。 假如你还是没办法确定用哪种元素,那样我建议你参考HTML5 sectioning content element flowchart。 写无需写的标签当然是毫无意义的。不幸的是,我常常看到<header>和<hgroup>被无意义的滥用。你可以阅读一下关于<header>和<hgroup>元素的两篇文章做一个详细的认知,其中内容容易概要如下: 因为header可以在一个文档中用多次,可能使得如此代码风格遭到欢迎: 假如你的<header>元素只包括一个头部元素,那样丢弃<header>元素吧。既然<article> 元素已经保证了头部会出目前文档概要中,而<header>又不可以包括多个元素(如上文所概念的),那样为何要写多余的代码。容易点写成如此就好了: 在headers这个主题上,我也常常看到hgroup的错误用。有时不应该同时用<hgroup>和<header>: 第一个问题通常是如此的: 此例中,直接拿掉hgroup,让heading 裸奔吧。 第二个问题是另一个非必须的例子: 假如<header>唯一的子元素是<hgroup>,那还要<header>干神马?假如<header>中没其他的元素(譬如多个<hgroup>),还是直接拿掉<header>吧。 关于 Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary. 伴随HTML5引入了30个新元素(截止到原文发布时),大家在架构语义化和结构化的标签时的选择也变得有的不慎重。也就是说,大家不应该滥用超语义化的元素。不幸的是,nav就是如此一个被滥用的例子。nav元素的规范描述如下: The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. nav元素表示页面中链接到其他页面或者本页面其他部分的区块;包括导航连接的区块。 User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both). WHATWG HTML spec 注意:不是所有页面上的链接都需要放在nav元素中——这个元素本意是用作主要的导航区块。举个具体的例子,在footer中常常会有海量的链接,譬如服务条约,主页,版权声明页等等。footer元素自己已经足以应对这类状况,虽然nav元素也可以用在这里,但一般大家觉得是非必须的。 规范中将<figure>描述为“一些流动的内容,有时会有包括于自己的标题说明。通常在文档流中会作为独立的单元引用。”这正是figure的美妙之处——它可以从主内容页移动到sidebar中,而不影响文档流。这类问题也包括在之首要条件到的HTML5 element flowchart中。 重要的词汇是“主要的”导航。当然大家可以互相喷上一整天什么叫做“主要的”。而我是如此概念的: 既然并没绝对的对错,所以依据一个非正式投票与我一个人的讲解,以下的状况,不管你放不放,我反正不放在<nav>中: 假如你不确定是不是要将一系列的链接放在<nav>中,问你一个人:“它是主要的导航吗?”为了帮你回答这个问题,考虑以下最重要原则: 假如这类问题的答案是“不”,那就跟<nav>鞠个躬,然后一个人离开吧。 <figure>与<figcaption>的正确用,确实是难以驾驭。让大家来看看一些容易见到的错误。 我曾告诉各位不要写非必须的代码。这个错误也是同样的道理。我看到不少网站把所有些图片都写作figure。看在图片的份上请勿给它加额外的标签了。你只不过叫你自己蛋疼,而并不可以使你的页面内容更明确。 不要把figure局限于图片。web标准的职责是精确的用标签描述内容。 假如纯粹只不过为了呈现的图,也不在文档其他地方引用,那就绝对不是 进一步的说,logo也不适用于figure。下面是我容易见到的一些代码片段: 没什么好说的了。这就是非常一般的错误。大家可以为logo 是不是应该是H1 标签而互相喷到牛都放完回家了,但这里不是大家讨论的焦点。真的的问题在于figure 元素的滥用。figure 只应该被引用在文档中,或者被section 元素围绕。我想你的logo 并不太可能以如此的方法引用吧。非常简单,请不要用figure。你仅需如此做: 另一个容易见到的关于figure的误解是它只被图片用。figure可以是视频,音频,图表,一段引用文字,表格,一段代码,一段散文,与任何它们或者其他的组合。 这是个容易见到的问题,但并非一个错误,我觉得大家应该通过最好实践来防止这种风格。在HTML5中,script和style元素不再需要type属性。然而这类非常或许会被你的CMS自动加上,所以要移除更不是那样的轻松。但假如你是手工编码或者你完全可以控制你的模板的话,那真的没什么理由再去包括type属性。所有些浏览器都觉得脚本是javascript而样式是css样式,你不必再画蛇添足了。 其实仅需如此写: 甚至指定字符集的代码都可以省略掉 。Mark Pilgrim在Dive into HTML5的语义化一章中作出知道释。 HTML5引入了一些form的新属性,以下是一些用上的需要注意的地方: 一些多媒体元素和其他元素也具备布尔属性。这里所说的规则也同样适用。有一些新的form属性是布尔型的,意味着它们只须出目前标签中,就保证了相应的行为已经设置。这类属性包含: 坦白的说,我极少看到如此的。以required为例,容易见到的是下面这种: 严格来讲,这并没大碍。浏览器的HTML 分析器只须看到required 属性出目前标签中,那样它的功能就会被应用。但假如你反过来写equired=”false”呢? 析器仍然会将required属性视为有效并实行相应的行为,尽管你试着告诉它不要去实行了。这显然不是你想要的。有三种有效的方法去用布尔属性。(后两种只在xthml中有效) 上述例子的正确写法应该是:2、只在需要的时候用header和hgroup
<header>
<!-- 请勿复制这段代码!此处并无需header --><article> <header> <h1>My best blog post</h1> </header> <!-- Article content --></article>
<article> <h1>My best blog post</h1> <!-- Article content --></article>
<hgroup>的错误用
<!-- 请勿复制这段代码!此处无需hgroup --><header> <hgroup> <h1>My best blog post</h1> </hgroup> <p>by Rich Clark</p></header>
<header> <h1>My best blog post</h1> <p>by Rich Clark</p></header>
<!-- 请勿复制这段代码!此处无需header --><header> <hgroup> <h1>My company</h1> <h2>Established 1893</h2> </hgroup></header>
<hgroup> <h1>My company</h1> <h2>Established 1893</h2></hgroup>
3、不要把所有列表式的链接放在nav里
4、figure元素的常见问题
不是所有些图片都是<figure>上文中
Logo并非figure
<!-- 请勿复制这段代码!这是错的--><header> <h1> <figure> <img src="/img/mylogo.png" alt="My company" class="hide" /> </figure> My company name </h1></header><!-- 请勿复制这段代码!这也是错的--><header> <figure> <img src="/img/mylogo.png" alt="My company" /> </figure></header>
<header> <h1>My company name</h1> <!-- More stuff in here --></header>
figure也不只只不过图片
5、不要用非必须的type属性
<!-- 请勿复制这段代码!它太沉余了! --><link type="text/css" rel="stylesheet" href="css/styles.css" /><script type="text/javascript" src="js/scripts" /></script>
<link rel="stylesheet" href="css/styles.css" /><script src="js/scripts" /></script>
6、form属性的错误用
布尔属性
<!-- 请勿复制这段代码! 这是错的! --><input type="email" name="email" required="true" /><!-- 另一个错误的例子--><input type="email" name="email" required="1" />
<!-- 请勿复制这段代码! 这是错的! --><input type="email" name="email" required="false" />
requiredrequired=""required="required"
<input type="email" name="email" required />
希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
►本文网址:http://www.nsxcb.cn/HTML/HTML5/20220411/13718.html
►凡本站提供教程均已验证教程的准确性。