HTML5语义 HTML5语义|HTML5

本文概述

为什么要使用语义元素？
HTML5中的语义元素
HTML5中的一些重要语义元素
将< article> 标签嵌套在< section> 标签中还是反之？

无论使用哪种语言, 在交流过程中理解单词的含义都是至关重要的。如果这是计算机通信, 那么它将变得更加重要。因此, HTML5提供了更多的语义元素, 可轻松理解代码。
因此, 语义学定义了单词和短语的含义, 即
语义元素=具有含义的元素。语义元素对浏览器和开发人员都具有简单明了的含义。
例如：
在HTML4中, 我们已经看到< div> , < span> 等是非语义元素。他们没有透露任何内容。
另一方面, < form> , < table> 和< article> 等是语义元素, 因为它们清楚地定义了它们的内容。
所有主要浏览器均支持HTML5语义元素。
为什么要使用语义元素？在HTML4中, 开发人员必须使用自己的ID /类名称来设置元素的样式：页眉, 顶部, 底部, 页脚, 菜单, 导航, 主菜单, 容器, 内容, 文章, 边栏, topnav等。
搜索引擎很难识别正确的网页内容。现在在HTML5元素（< header> < footer> < nav> < section> < article> ）中, 这将变得更加容易。现在, 它允许在应用程序, 企业和社区之间共享和重用数据。”
语义元素可以增加网站的可访问性, 还有助于创建更好的网站结构。
HTML5中的语义元素

指数	语义标签	描述
1.	< article>	定义文章
2.	< aside>	定义页面内容以外的内容
3.	< details>	定义用户可以查看或隐藏的其他详细信息
4.	< figcaption>	为< figure> 元素定义标题
5.	< figure>	指定独立的内容, 例如插图, 图表, 照片, 代码清单等。
6.	< footer>	为文档或节定义页脚
7.	< header>	指定文档或节的标题
8.	< main>	指定文档的主要内容
9.	< mark>	定义标记/突出显示的文本
10.	< nav>	定义导航链接
11.	< section>	在文档中定义一个部分
12.	< summary>	为< details> 元素定义可见的标题
13.	< time>	定义日期/时间

HTML5中的一些重要语义元素HTML5 < article> 元素
HTML < article> 元素定义文档, 页面, 应用程序或网站中的文章内容。它可以用来表示论坛帖子, 杂志, 报纸文章或大故事。
例：

< article> < h2> Today's highlights< /h2> < p> First story< /p> < p> Second story< /p> < p> Third story< /p> < /article>

立即测试
HTML5 < aside> 元素
< aside> 元素表示间接向页面主要内容提供信息的内容。它经常表示为侧边栏。
例：

< body> < h2> My last year memories< /h2> < p> I have visited Paris with my friends last month. This was the memorable journey and i wish to go there again.< /p> < aside> < h4> Paris< /h4> < p> Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture< /p> < /aside> < /body>

立即测试
HTML5 < section> 元素
< section> 元素用于表示HTML文档中的独立部分。一个页面可以包含多个部分, 每个部分可以包含任何内容, 但是每个部分的标题不是必需的。
例：

< h2> Web designing Tutorial< /h2> < section> < h3> HTML< /h3> < p> HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications.< /p> < /section> < section> < h3> CSS< /h3> < p> CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML.< /p> < /section>

立即测试
将< article> 标签嵌套在< section> 标签中还是反之？我们知道< article> 元素指定了独立的独立内容, 而< section> 元素定义了文档中的section。
在HTML中, 我们可以在< article> 元素内使用< section> 元素, 在< section> 元素内使用< article> 元素。
我们还可以在< section> 元素内使用< section> 元素, 并在< article> 元素内使用< article> 元素。
例如：在报纸中, “体育”部分中的“体育< 文章> ”可能在每个“ < 文章> ”中都有一个技术部分。
HTML5 < nav> 元素
HTML < nav> 元素用于定义一组导航链接。
例：

< !DOCTYPE html> < html> < body> < nav> < a href="https://www.srcmini.com/html-tutorial"> HTML< /a> |< a href="https://www.srcmini.com/java-tutorial"> Java< /a> |< a href="https://www.srcmini.com/php-tutorial"> PHP< /a> |< a href="https://www.srcmini.com/css-tutorial"> CSS< /a> < /nav> < /body> < /html>

立即测试
HTML5 < header> 元素
【HTML5语义】< header> 元素代表文档的标题, 其中可以包含介绍性内容或导航链接。
例：