关于语义化标签的一些思考

现在html越来越提倡语义化,这样不仅方便开发者更好地理解文档,也使得计算机对于文档地理解更加地友好。比如人工智能的语义分析,搜索引擎的搜索分析,辅助视力阅读障碍者的屏幕阅读器之类的软件,在语义化标签的帮助下,能够更好的工作。

文档结构

在学习html5的过程中,知道了一些新的标签,能够更清晰的表达文档的结构(原来都是用div,可能加上id或者class来划分)。举个简单的例子

  • html

    • head

    • header (包含网站的标题,或者logo,SLOGAN之类的)

    • nav (导航栏)

    • main (文档的主要内容,不包含侧边栏、导航栏、版权信息,网站logo等附属信息)

      • article (文档中可以脱离其他部分,独立出来而又完整,甚至可以复用的一部分,通常有自己的标题,当article内嵌article时,里外层的内容应该是相关的,比如一篇微博和它的评论)
      • section (文档中一段主题性内容,通常也有自己的标题,跟article的区别在于他是整体的一部分或者说文章的一节)
    • aside (侧边栏或者嵌入内容,通常认为是独立拆分出来而不受整体影响的一部分,作为主要内容的附属信息,如索引,词条列表,或者页面及站点的附属信息,如广告,作者资料介绍等)

    • footer (页脚,通常包含作者、版权信息或者相关链接等)

html元素的语义化及排版注意

一些常用的html元素,特别是html文本元素的语义化使用中,也有一些可以优化及需要注意的地方

  • <strong><b><em><i> ,其效果差不多是一样的,但是前者的语义化更加友好

  • 白色空间折叠:当浏览器遇到两个或者两个以上的白色空间元素(空格,换行)时,会折叠成一个空格。自己编码时注意换行应该用 <br>

  • 文档中的一些嵌入式内容,比如引用的图片,插图,表格,代码段等,可以作为独立的单元,当这部分转移到附录中或者其他页面时不会影响到主体,这样的元素都可以放在 <figure> 元素内,而且可以搭配其子元素 <figcaption> 作很好的元素说明或者备注信息

  • img元素最好附带alt信息,即对图片进行文本说明,当图像无法查看时会显示这段文本描述

  • table元素现在也有更好的语义化结构元素

    • caption 表格的标题
    • thead 适合放表格的表头行
    • tbody 表格的主体部分
    • tfoot 表格的脚注部分
  • form表单元素,

    • label标签,为input元素定义标注,改进了表单控件的可用性,当你点击到label标签时,会自动聚焦到对应控件上,label标签一般有两种用法

      1. label的for属性与控件的id对应,比如
<label for="username">请输入用户名: </label> <input type="text" id="username" name="username">
    2. label内嵌控件,比如
<label>请输入用户名<input type="text" id="username" name="username"></label>
* placeholder属性,其值会在输入字段为空时显示,并会在字段获得焦点时消失
* 对于表单中的单选radio控件和复选checkbox控件以及下拉框select控件,可以为radio, checkbox添加checked属性以及为option添加selected属性让其默认选中

以上,是这次任务一中可能用到的一些信息,可能有纰漏或者错误的地方,还请大家多多指正!
参考资料: 《HTML&CSS设计与构建网站》

关于语义化标签的一些思考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容

  • 首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要...
    DecadeHeart阅读 3,427评论 0 3
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,028评论 25 707
  • 1. HTML语义化背景介绍 讲到语义化,我们首先来聊聊html语义化的背景,HTML结构语义化,是最近几年才提出...
    阿布_0caf阅读 25,387评论 1 20
  • 你说吧是说明
    皮凯丘阅读 152评论 0 1
  • 偶然的一期《快乐大本营》结识了一款名为探探的APP,广告说有人因为探探上擦肩而过多次之后而喜结连理,不免有...
    climentine阅读 190评论 0 1