- Developing Windows Store Apps with HTML5 and JavaScript
- Rami Sarieddine
- 305字
- 2021-08-06 17:02:09
Understanding semantic elements
HTML5 markup is more semantic than its predecessors due to the new semantic elements for describing the structure of the page content. The list of semantic elements includes the following:
- The
<header>
tag defines a header for the document or section. It wraps the heading or a group of headings in a page or a section, and it can also contain information such as logos, banners, and main navigation links. You can have multiple<header>
tags in a page. - The
<nav>
tag represents the major navigation links. Typically it is bound to the header. - The
<section>
tag wraps related content that can be grouped thematically. A<section>
tag can include a<header>
and<footer>
tag. - The
<footer>
tag represents content about a page or a section, for example, related links, privacy terms, and copyright information. You can have more than one<footer>
in a page, and it is same as the<header>
tag. - The
<article>
tag represents self-contained content that can be used independent of the document as a whole, for example, a blog entry.<article>
and<section>
are much alike because both are standalone tags and hold related content; however, if it's content can be syndicated (via an atom or an RSS feed), then the<article>
element is more appropriate. - The
<aside>
tag represents the part of a page that is tangentially related to the content around it, and also separate from that content, as it can be removed without affecting the main content of the page. Typical usage can be a sidebar. - The
<address>
tag represents the contact information for the nearest<article>
parent element, if present, or the parent<body>
element, which in that case applies to the whole document.
Putting all these new elements together in a page would yield the following markup:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Developing for Windows 8</title> </head> <body> <header> <a href="default.html"> <h1>The Courses</h1> <img src="logo.png" alt="Book Logo"> </a> <nav> <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </header> <section> <article> <h2></h2> <p></p> <address> Written by <a href="mailto:xyz@abc.com">Demo Author</a>.<br> Found at: Demo.com <br> Address, Street<br> UK </address> </article> <article> <h2></h2> <p>content</p> </article> </section> <aside> <h2></h2> <ul> <li></li> <li></li> <li></li> </ul> <p></p> </aside> <footer> <p></p> <p>Copyright © 2013 Packt</p> </footer> </body> </html>
推薦閱讀
- Python程序設計教程(第2版)
- C語言程序設計基礎與實驗指導
- Flask Web開發入門、進階與實戰
- Data Analysis with Stata
- Getting Started with Python Data Analysis
- Salesforce Reporting and Dashboards
- MongoDB,Express,Angular,and Node.js Fundamentals
- 西門子S7-200 SMART PLC編程從入門到實踐
- Unity 2018 Shaders and Effects Cookbook
- C++反匯編與逆向分析技術揭秘(第2版)
- 基于SpringBoot實現:Java分布式中間件開發入門與實戰
- Scratch3.0趣味編程動手玩:比賽訓練營
- Clean Code in C#
- JavaScript機器人編程指南
- Natural Language Processing with Python Quick Start Guide