这里列出了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时,才会显示。这也是一个很好的习惯。