Table of Contents
Mokka mit Schlag" >Mokka mit Schlag
Info
Archives
Home Web Front-end H5 Tutorial Structure and semantics of HTML5 (2): Structure_html5 tutorial skills

Structure and semantics of HTML5 (2): Structure_html5 tutorial skills

May 16, 2016 pm 03:51 PM
div href structure Semantics


Even well-formed HTML pages can be difficult to process due to a lack of structure. The level of the heading must be analyzed to see how the sections are divided. Sidebars, footers, headers, navigation bars, main content areas, and individual articles are all represented by common div elements. HTML 5 adds some new elements specifically to identify these common structures:
· section: This can be a chapter or section in a book, in fact anything that has its own title in HTML 4
· header: the header that appears on the page; separate from the head element Same
· footer: footer; can display signature in email
· nav: a set of links to other pages
· article: an article in a blog, magazine, article compilation, etc.
Let’s consider a typical blog homepage, which has a header at the top, a footer at the bottom, several articles, a navigation area and a sidebar. See Code 1 for a typical blog page.


Mokka mit Schlag







"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County



Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived
at the site at 7:30 A.M., progressed to Spring around
10:00 A.M., and reached early summer by 10:15.





"/blog/birding/2007/04/23/but-does-it-count-for-your-life -list/">
But does it count for your life list?



Seems you can now go href="http: //www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.












Even with the correct indentation, these nested divs still feel very confusing. In HTML 5, these elements can be replaced with semantic elements, see Code 2 for a typical blog page written in HTML5


Mokka mit Schlag



Mokka mit Schlag





"/blog/birding/2007/04 /23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County


Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived at
the site at 7:30 A.M., progressed to Spring around 10:00
A.M., and reached early summer by 10:15.




"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?


Seems you can now go href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.







Copyright 2007 Elliotte Rusty Harold





Now the div is no longer needed. You no longer need to set the class attribute yourself, the meaning of each part can be inferred from the standard element name. This is especially important for audio browsers, mobile browsers, and other non-standard browsers.
 
 (To be continued)
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What do src and href mean? What do src and href mean? Aug 16, 2023 pm 05:00 PM

src and href are respectively, 1. src is the abbreviation of source, which is used to specify the path of external resources. It is usually used to embed external files, such as pictures, audios, videos, etc. The src attribute is generally used on img, script, iframe and other tags. ; 2. href is the abbreviation of hypertext reference, which is used to specify the path of the target resource of the hyperlink. It is usually used to link to external documents or other pages. The href attribute is generally used on tags such as a and link.

How to use css to realize that a div is missing a corner How to use css to realize that a div is missing a corner Jan 30, 2023 am 09:23 AM

CSS method to realize that a div is missing a corner: 1. Create an HTML sample file and define a div; 2. Set the width and height background color for the div; 3. Add a pseudo class to the div that needs to delete a corner, and set the pseudo class to Use the same color as the background color, then rotate it 45 degrees, and then position it to the corner that needs to be removed.

What are the syntax and structure characteristics of lambda expressions? What are the syntax and structure characteristics of lambda expressions? Apr 25, 2024 pm 01:12 PM

Lambda expression is an anonymous function without a name, and its syntax is: (parameter_list)->expression. They feature anonymity, diversity, currying, and closure. In practical applications, Lambda expressions can be used to define functions concisely, such as the summation function sum_lambda=lambdax,y:x+y, and apply the map() function to the list to perform the summation operation.

What is the origin of the basic structure and technology of the internet? What is the origin of the basic structure and technology of the internet? Dec 15, 2020 pm 04:48 PM

The basic structure and technology of the internet originated from ARPANET. ARPANET is a milestone in the development of computer network technology. Its research results have played an important role in promoting the development of network technology and laid the foundation for the formation of the Internet. Arpanet (Arpanet) was the world's first operational packet switching network developed by the U.S. Defense Advanced Research Projects Agency. It is the ancestor of the global Internet.

How to implement a layout with a fixed navigation menu using HTML and CSS How to implement a layout with a fixed navigation menu using HTML and CSS Oct 26, 2023 am 11:02 AM

How to use HTML and CSS to implement a layout with a fixed navigation menu. In modern web design, fixed navigation menus are one of the common layouts. It can keep the navigation menu always at the top or side of the page, allowing users to browse web content conveniently. This article will introduce how to use HTML and CSS to implement a layout with a fixed navigation menu, and provide specific code examples. First, you need to create an HTML structure to present the content of the web page and the navigation menu. Here is a simple example

Implementation of word-marking translation browser script based on ChatGPT API Implementation of word-marking translation browser script based on ChatGPT API May 01, 2023 pm 03:28 PM

Preface Recently, there is a browser script based on ChatGPTAPI on GitHub, openai-translator. In a short period of time, the star has reached 12k. In addition to supporting translation, it also supports polishing and summarizing functions. In addition to browser plug-ins, it also uses tauri packaging. If you have a desktop client, aside from the fact that tauri uses the rust part, the browser part is still relatively simple to implement. Today we will implement it manually. The interface provided by openAI, for example, we can copy the following code and initiate a request in the browser console to complete the translation //Example constOPENAI_API_KEY="s

In-depth analysis of the structure and purpose of the MySQL.proc table In-depth analysis of the structure and purpose of the MySQL.proc table Mar 15, 2024 pm 02:36 PM

The MySQL.proc table is a system table that stores stored procedure and function information in the MySQL database. By in-depth understanding of its structure and purpose, you can better understand the operating mechanism of stored procedures and functions in MySQL, and perform related management and optimization. The structure and purpose of the MySQL.proc table will be analyzed in detail below, and specific code examples will be provided. 1. The structure of the MySQL.proc table. The MySQL.proc table is a system table that stores the definitions and related information of all stored procedures and functions.

What is the div box model What is the div box model Oct 09, 2023 pm 05:15 PM

The div box model is a model used for web page layout. It treats elements in a web page as rectangular boxes. This model contains four parts: content area, padding, border and margin. The advantage of the div box model is that it can easily control the layout of the web page and the spacing between elements. By adjusting the size of the content area, inner margin, border and outer margin, various layout effects can be achieved. The box model also provides some Properties and methods can dynamically change the style and behavior of the box through CSS and JavaScript.

See all articles