未来网络中的HTML和语义

日期:2011年09月16日

大约4-5年前,我的日常知识积累和社交活动,去喜欢 - 阅读书籍,参加一些会议/培训,访问朋友的地方搞了一个建设性的辩论,散步@公园附近... ...等等。但十年后的情景... ...正在慢慢改变,我几乎找不到任何时间做至少是上面列出的项目数,以及更多的其他项目已在穆斯特教授的名单!

该技术已结束,人类的集体智慧,是慢慢变到最强大的媒体今天驾驭 - 网上!孩子们更关心使他们喜爱的社交比在学校/大学的朋友的网站更多的朋友而言,我们谈的意见和通过在墙壁写(我会一直幸福,如果我们燃烧卡路里写那么多实际的墙壁上... ...不过这是另一回事J)。互联网正在慢慢成为生活的一部分了。

 

点击浏览下一页想像有一天,当你可以收集所有数据,您需要,从数以百万计的服务器在网络上获取,客户定制,以适合您的全球个人资料页,而无需进入搜索网站流量的复杂噚深。没错,就是这里的网络是走向,这一天将被称为- “ 语义网的一天“,而在那个时代最重要的球员 ​​将没有比我们老小子“HTML”等与孩子相对复杂“语义”。

我打算扔在这两者之间的关系光线从Web开发人员的角度来看。

什么是“语义”?

点击浏览下一页维基百科说- “ 语义(从希腊- semantikos)是通常意义的研究在语言,“这对互联网有关的,语义是对的数据,即学习的意义,它是概念,使得研究机,了解什么类型的数据它是与(据网络而言,“机”可以是浏览器,或任何程序/代码,这与数据处理)处理。

例如:一个页面可能包含,一组数据,这是相互关联的,如将要采取的步骤完成任务。有可能是一个表格的数据,其中包含了所有产品的详细信息,其配置和价格的详细信息。它可能对哪些特定文档的创建日期和名单上... ...和范围。为了使这些内容/数据有意义的机器,我们需要遵循一些准则在全球范围,同时创造它们,这有权对数据进行特定类型或其他。像这样的数据精简真的会更容易使数据“机读”,这是实现高效的数据隔离和关系的第一步。

例如,如何将它的感觉一样,如果你能够聚合所有的数据大约一个新的小工具,您正计划购买可用 - 定价,评论,配置,功能在一个单一的页面上显示的一切,从机器取出数百万通过网络提供可读的数据!

这完全是网络搜索和神“谷歌”的未来,已经在这样的搜索功能,这将使他们“超级神的搜索引擎世界”靠!

HTML是如何与“语义”?

点击浏览下一页因为,浏览器是主要的接口使用户可以连接到互联网(计算机屏幕,手机屏幕,电视,投影仪都是不同的媒体,但最终,所有这些都需要一个浏览器下载该页面在本地和查看的内容) ,并且只有一个办法,用哪些内容可以显示在浏览器-这是“HTML”的方式。因此,持有主要股份的HTML,在确定的方式,要在页面上显示的数据,和“ 标签 “中呈现为HTML输出到浏览器确定性地雷的使用所包含的数据有意义。这一点很重要,因为一个特定的数据/内容可以呈现,使用多个HTML标记。

页面/内容被认为是有意义的渲染,或者说是“语义正确的”,如果这些渲染使用了正确的标记代表哪个数据的含义。例如。在一天内呈现一个日期,在提供报价的标记,在呈现一个标签

找到下面几HTML标签的语义“

(礼貌:HTML操场

H1 一般情况下,页面的主标题。理想的页面应该有一个单一的H1标记它。一些有建设性的辩论在这里LINK1,LINK2。从H1到标题应使用分层来H6表示了在上下文标题的重要性。
abbr 表示缩写形式,如“公司”,“等”。通过标记了缩写可以提供有用的信息,浏览器,拼写检查,翻译系统和搜索引擎索引。
address
标签定义一个地址开始。您应该使用它来定义地址,签名,或船舶文件的作者。该地址通常呈现为斜体。大多数浏览器将添加前后的地址元素换行,但里面的文字换行你要插入自己。
SUP 定义上标文本。
div 定义在一个文件处/科。浏览器通常发生之前和之后的div元素换行。使用<DIV>标签组块元素,它们的格式与样式。
kbd 定义键盘文本。短语元素。它有可能实现更丰富的效果使用样式表。
legend 定义为一个字段集标题。
big 呈现为文本更大。未过时,但它是更好地实现更丰富的效果使用样式表。
P 定义一个段落。
button 定义一个按钮。里面一个按钮元素就可以把内容,如文字或图像。这是在该元素,并与输入元素创建的按钮的区别。
OL 定义有序列表的开始。
cite 定义一个引用。短语element.It有可能实现更丰富的效果使用样式表。
EM 呈现为强调文本。短语element.It有可能实现更丰富的效果使用样式表。
pre 预元素定义预格式化的文本。在预元素中的文本通常会保留空格和换行符。文本呈现在固定间距字体。值得注意的是,虽然<XMP>已过时,标签不执行<PRE>的所有功能<XMP> <PRE> <B>您好</ B> </ PRE>显示Hello <XMP> < B>你好</ B> </ XMP>显示<B>您好</ B>

为什么语义?

点击浏览下一页坚持正确的语义HTML的实际好处是多方面的。下面是其中的几个...

搜索引擎优化

随着网络的出现,信息就是金钱,在合适的时间获得正确的信息,你去找,更重要的,因为没有机构愿意浪费时间就太长搜索信息。这里谈到的搜索引擎时代,这里的关键是要在你的一块地在网络上的数据/内容,出现在SERP体面的位置(搜索引擎结果页)。使用语义正确的代码意味着你的页面很容易阅读的机器,和“搜索引擎机器人”是没有别的,但机/搜索引擎J.孙方案,语义编码的页面正确立场有更好的机会出现在顶部的SERP中。

可扩展性/灵活性

更新网页,这是很好的编码语义,是一种享受!由于每个章节编码使用有关日期,在风格元素的变化可以做在CSS选择器的特定标记标签和水平的变化可以这样做无缝updation。

无障碍

有视觉障碍的用户使用互联网,他们可以使用屏幕阅读器读出的内容朗读。这是屏幕阅读程序(在我们的J术语机),其内容为,试图了解数据的意义代表的页面的内容。

有没有更好的方法,使这些程序更容易理解的东西比使用语义和编码页页的内容?

清洁和更短的代码

语义正确的页面手段,廉洁和更清晰的代码,这意味着是对浏览器加载轻量级的东西!

“追求健康语义” - 一些实际的见解

点击浏览下一页在追求实现“语义健康”,永远不会结束!每次你的代码的网页,并承担它是语义标记不断完善,有另一种更好的方式来表示一个比较正确的做法是相同的。它是实践经验和对HTML规范的深入了解,这将使一个解码器符合语义。下面是一些我有一段时间作为UX传播者和前端工程师期间所得的见解,这将帮助你在你的“语义健康”的追求成功的:)

避免“DIV综合症”

分离内容和表现用DIV与CSS的布局,DIV并不意味着这是唯一的一天,你应该使用。避免“divitis通过仔细选择适合您的网页编码的标签“。这是“语义健康”的第一步。一个很好的资源,开始是“ HTML操场 “

这真的是一种痛苦,但学会接受它

快速跟踪你的HTML编码可以节省您的时间,你也许可以赚取更多的计费客户端了。但是,“更好的东西付出了代价”!如果你想成为一个语义正确的解码器,随时准备承担多余的时间和令人沮丧的跨浏览器的问题和解决首当其冲。但要记住,所有这些困难都是值得的,而且越是你要学会接受它,更有价值的你会作为一个标准的网络传播者。

了解的内容/信息结构

哪些标记使用知道在哪里,这是非常重要的,了解的内容类型,层次的信息体系结构。

对于例如。

  • 该网页的主要导航,是一个项目,有共同的东西的清单。也就是说,它们都属于所谓的逻辑设置,主要导航。这里的理想人选是标签的HTML无序列表(UL)。
  • 一个步骤的向导,其中有很多需要完成的任务步骤,需要有一个很重要的因素是时间顺序的步骤。这里的理想人选是HTML标记的有序列表(OL)
  • 在一个页面上显示职位名单都不过是无序列表(UL)
  • 带有字母隔离词汇是,一个术语和定义对联。这里的理想人选是HTML标签定义列表(DL)

 

小心你的类名和id名称

语义健康不属于主要是在写得很好的HTML标签。但溢出的CSS等。我会很容易地找到了一个语义兼容的解码器,通过类和CSS文件的ID的命名约定扫描!

始终避免类名或ID表象,它会喊出关于你对语义的态度走向世界。阅读本关于结构的命名约定的见解。

HTML5 - 迈向语义健康大飞跃“

点击浏览下一页正如我在这篇文章介绍说,该网络将是未来时代的语义网络和网络的巨头已经开始拥抱是在一个非常大的方式来。这一最新版的家庭将是最大的对HTML的语义正确的地方网络的飞跃。有了一个打破专有标签实施,以及各种第三方工具被丢弃的依赖地面很多,这是真正的HTML版本将会导致对语义网的行列。

下面是对那些在实施新的HTML 5标签简介

的<Header> </Header>
的头一个“节”,通常是标题或标题分组,但也可能包含有关部分的补充信息。

<footer> </footer>
这个标签逻辑上表示页脚部分,与版权和其他页脚信息,包括所有的链接和页脚

<nav> </nav>
代表页面导航,在这里通常会有哪些环节导致respetive内容/页的清单。这个标签应该在为标题,页脚和页面的主要部分用在一个特定的标记相同水平

<article> </article>
在文章的内容,可以代表逻辑上相当于一个博客条目从外部来源的文章或其他内容

<aside> </aside>
旁白说明内容,切相关,围绕它的内容。

<audio> </audio>
定义声音,如音乐或音频流

<video> </video>
定义视频,如视频片段或流式视频

下面是一个HTML的标签架构在一个典型的网页视觉表现。

点击浏览下一页

Tags:体验设计 企业网站建设
上一篇文章:Web 3.0的一个简短的介绍
下一篇文章:Tumblr:微博入门指南 - 第1部分