当我在 HTML5中创建一个图像库时,它应该有任何semntic标签,如部分或文章,还是只是一个div?

解决方法

这取决于图库的上下文.

如果图库与主要内容相关,则将其作为主要内容中的一个部分是有意义的.

当文章内部的内容本身有意义时,应该使用文章标签,例如:个人博客文章.使用文章标签标记的内容也是一个
当内容需要联合时(例如RSS提要)很有意义.为了解释这最后一点,W3C explains:

When used specifically with content to be redistributed in syndication,the article element is similar in purpose to the entry element in Atom.

div标签用于通用的元素分组.如果任何其他标记不适合此目的,则应使用它,并且为样式或脚本目的需要分组.根据W3C’s recommendation:

Authors are strongly encouraged to view the div element as an element of last resort,for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

要回到您的问题,如果图片库与您的内容相关(例如博客文章中的图片库),我会为整个博客文章撰写文章,并为图片库添加一个部分.有些人可能会争辩说,如果画廊没有标题,它不应该是一个部分,所以应该标记为div.但是,W3C提供了一个非常好的方式来思考其网站上的部分(抱歉,不能发布超过2个链接,少于10个重复点!):

A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

如果你仔细想想,在文章的大纲中列出画廊是很有意义的(例如,博客文章).如果文章有特定的介绍文本,甚至可以在文章的大纲中列出.将概念概念视为文章的一种内容表,列出其各个部分.

就像我之前说的那样,它实际上取决于上下文.

编辑:

关于画廊本身的图像,按照Romin的建议将它们放在图中是有意义的.回答你的评论:

thanx but I don’t think is right here because they say that it “can be moved away from the main flow of the document without affecting the document’s meaning.” So it is meant for images inside text,and if I remove images from gallery that will affect it’s meaning

W3C真正推荐的是:

The element (figure) can thus be used to annotate illustrations,diagrams,photos,code listings,etc,that are referred to from the main content of the document,but that Could,without affecting the flow of the document,be moved away from that primary content,e.g. to the side of the page,to dedicated pages,or to an appendix.

换句话说,要问的问题是图像库是否可以从主要内容(即博客文章内容或文本)移动,而不影响文档的流程.图像库本身实际上可以远离文档的主要内容,例如侧边栏,并且其位置/顺序的更改不会影响内容的解释方式.如果它的位置确实产生了影响,那么这个特定情况下的数字是不合适的.

总而言之,如果内容(图片库)对于文档很重要,但是它在内容流中的位置不是(即它可以在没有太大影响的情况下移动),请使用数字.如果其位置很重要,请使用其他标签.如果它不重要,请改用它.

HTML5中的图库应该是什么元素?的更多相关文章

  1. 基于EJB技术的商务预订系统的开发

    用EJB结构开发的应用程序是可伸缩的、事务型的、多用户安全的。总的来说,EJB是一个组件事务监控的标准服务器端的组件模型。基于EJB技术的系统结构模型EJB结构是一个服务端组件结构,是一个层次性结构,其结构模型如图1所示。图2:商务预订系统的构架EntityBean是为了现实世界的对象建造的模型,这些对象通常是数据库的一些持久记录。

  2. js中‘!.’是什么意思

  3. InnoDB 和 MyISAM 引擎恢复数据库,使用 .frm、.ibd文件恢复数据库

  4. Error: Cannot find module ‘node:util‘问题解决

    控制台 安装 Vue-Cli 最后一步出现 Error: Cannot find module 'node:util' 问题解决方案1.问题C:\Windows\System32>cnpm install -g @vue/cli@4.0.3internal/modules/cjs/loader.js:638 throw err; &nbs

  5. yarn的安装和使用(全网最详细)

    一、yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点:速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。三、y

  6. 前端环境 本机可切换node多版本 问题源头是node使用的高版本

    前言投降投降 重头再来 重装环境 也就分分钟的事 偏要折腾 这下好了1天了 还没折腾出来问题的源头是node 使用的高版本 方案那就用 本机可切换多版本最终问题是因为nodejs的版本太高,导致的node-sass不兼容问题,我的node是v16.14.0的版本,项目中用了"node-sass": "^4.7.2"版本,无法匹配当前的node版本根据文章的提

  7. 宝塔Linux的FTP连接不上的解决方法

    宝塔Linux的FTP连接不上的解决方法常见的几个可能,建议先排查。1.注意内网IP和外网IP2.检查ftp服务是否启动 (面板首页即可看到)3.检查防火墙20端口 ftp 21端口及被动端口39000 - 40000是否放行 (如是腾讯云/阿里云等还需检查安全组)4.是否主动/被动模式都不能连接5.新建一个用户看是否能连接6.修改ftp配置文件 将ForcePassiveIP前面的#去掉 将19

  8. 扩展element-ui el-upload组件,实现复制粘贴上传图片文件,带图片预览功能

  9. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部