这里列出了12个常见的忘记纠正,以优化您的HTML 5源代码。这可能是细节,但放在端到端,他们造成了不同。通过改进语义,Web SEO将受益。选择最合适的标签是必要的。
不久前,我们编制了一份正确编码HTML 5页面的20个技巧现在让我们来看看常见HTML 5遗忘从MIME类型开始。
1.声明MIME类型
声明MIME类型将是非常有用的,如果你不想被奇怪的字符卡在你的页面中,而不是重音或符号。作为一般规则,最常用的语句如下所示,它发生在<head>和</head>HTML 5文件:
1 | <!- Statement by the mime-type -> |
2 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
2.链接的标题属性
有链接,好链接和非常好的链接。做一个非常好的事情并不是那么简单,但是仅仅适用以下两条规则就足够了:
- 尝试在可能的范围内放置与它所指向的文档相关的最大关键字。
- 添加一个标题-它将出现在鼠标上方-将它作为链接本身,与它所指向的文档相关的关键字。
2 | To read our Magazine, click <a href="http://www.instantshift.com">here</a>. |
5 | Visit <a href="http://www.instantshift.com" title="Consult the instantShift magazine, web development">instantShift<a>, a Magazine dedicated to the designers, and developers. |
3.图像的ALT属性
属性通常忘记与<img />标签。如果不能加载图像,除了显示替代文本的基本实用工具之外,它还提高了Google中图像的排名。别忘了更多,一举拍了两枪:尽可能提高索引的可访问性.
1 | <img src="http://www.instantshift.com/images/logo.png" alt="instantShift Logo" /> |
小心不要混淆,当一切顺利时,ALT属性没有给出你的照片的解释。要显示简短的信息文本(或工具提示),必须使用title属性。作为链接…当在图像上盘旋时,标题属性的文本将出现:
1 | <img src="http://www.instantshift.com/images/logo.png" alt="instantShift Logo"title="instantShift, magazine for web design and development" /> |
不像ALT属性,对于图像来说,title属性不是强制性的。.
4.引号
通常,报价不受任何特殊待遇。它通常是段落的一部分(<p>)没有突出显示。这很遗憾,因为在语义层面上,有多个标记专门用于它们:
- 为了
长引号
,使用<blockquote>
标签。 - 为了
短报价
,使用<q>
标签。 - 为了
一段或一句很短的引文
,使用<cite>
标签。
5.电邮地址及个人资料
大多数情况下,电子邮件地址和个人详细信息是这样纳入您的HTML 5文档。<address>标记定义文档的作者或所有者的联系信息。
标签<address>可以高亮显示地址、联系人详细信息和URL。它们通常以特定段落和斜体显示(CSS中修改的布局)。表示形式可能因浏览器而异。
2 | <a href="mailto:adress@instantshift.com">Contact Us</a> |
6.缩略语和定义
这个标签<abbr>定义缩写或缩写。用<abbr>元素,它们可以为浏览器和搜索引擎提供有用的信息。
1 | the <abbr title="without win">PSG</abbr> still... lost! |
7.表格的标题或标题
有些使用标题标签(h1,h2…)用于分隔表以显示信息的。这是一种糟糕的技术!如果要向表中添加标题或标题,则不需要将其放在前面或后面。将标题或标题混合到相应的表中。
对于表的一般标题或标题,请使用标记<caption>.
3 | <caption>Our Review</caption> |
8.定义和需要界定的词语或短语
要显示要定义的单词或短语,取决于您的情况,您有两种解决方案可以帮助您优化代码,同时突出显示(用于搜索引擎)关键字或短语。
如果单词或短语及其定义包含在同一个句子中,则应使用以下标记<dfn>.
1 | Use the <dfn>HTML5</dfn>, structuring language web page, to optimize your site. |
但是,如果您正在寻找一个更经典的模型:定义一个单词:定义:定义,则应该使用标记。<dl>, <dt>和<dd>。这将构成您的定义列表。没有什么能阻止你把一个词放在一个列表中!
<dl>
标记定义定义列表
- 标签
<dt>
定义待定义的词或短语
在定义列表中 - 和
<dd>
标记指示一个词的定义
在定义列表中定义
3 | <dd>Structuring Language</dd> |
5 | <dd>language layout design</dd> |
9.传奇照片
为了显示照片的标题,我们将在HTML 5中使用两个新元素:<figure>和<figcaption>。使用以下程序:
- 一开始
包括你的照片<figure>
突出显示(用于浏览器和搜索引擎) - 添加带有标记的图例
<figcaption>
对元素<figure>.
2 | <img src="logo.jpg" alt="instantShift magazine, Web Designers and Developers Daily Resource" width="300" height="250" /> |
3 | <figcaption>Here logo instantShift</figcaption> |
10.突出或演示一个词或短语
放一个词,一个短语,甚至一个句子有各种各样的理由。最简单的例子是一个或多个单词的粗体。因此,与产生的对比,这些词更容易跳在你的读者眼中。
突出显示的主要原因是视觉顺序。.
要突出显示一个单词或一组单词,您有几个标签:粗体,意大利语…HTML 5中出现了一个新的信标:<mark>. <mark>标签对应于一张纸上的打击荧光笔。它在您的编程中具有相同的效果,通常,浏览器将以背景颜色荧光黄色显示被这些标记包围的元素。
1 | <strong>text in bold</strong> |
2 | <em>text in italics or emphasis</em> |
3 | <mark>past the marker text</mark> |
4 | <dfn>term to define</dfn> |
5 | <code>code Portion</code> |
警告:有些标签在HTML 5中已经过时或被废弃。例如,标记<b>不再使用,强烈建议使用标记。<strong>.
然而,您总是被告知HTML 5是一种结构化语言,对内容进行优先排序,并且有用于布局和设计的CSS。这是真的,为什么这些HTML 5标签?
使用这些标记将给您两个好处:为读者突出显示,但同时也是更好的排名。抓住这个机会,用这些标签将你的页面的关键词框架起来。并且使突出显示的内容多样化:对于相同的关键字,使用一些粗体的斜体(有时是…)。
谷歌的机器人将索引你的网站没有眼睛。这些标签的使用会告诉他们它是一个或多个关键词。.
2 | <p>the <span class="gras">HTML5</span> is a great language!</p> |
5 | <p><strong>HTML5</strong> is a great language!</p> |
11.纯文本
<pre>定义预先格式化的文本。它显示你的文字如此恶心。
中的文本<pre>以固定宽度的字体显示(通常为“信使”),并保留原点的空格和行段。
12.如果浏览器不支持JavaScript
标签<noscript>为在浏览器中禁用javascript的用户提供替代内容. <noscript>元素可以包含在普通HTML 5页面的主体元素中可以找到的所有元素。<noscript>只有在用户浏览器中不支持或禁用javascript时,才会显示。这也是一个很好的习惯。