Home Web Front-end H5 Tutorial Structure and semantics of HTML5 (1): Preface_html5 tutorial skills

Structure and semantics of HTML5 (1): Preface_html5 tutorial skills

May 16, 2016 pm 03:51 PM
html web but element Browser structure Semantics language


Hypertext Markup Language (HTML) 5 introduces new elements to HTML for the first time. New structural elements include aside, figure, and section. New inline elements include time, meter, and progress. New inline elements are video and audio. New interactive elements are details, datagrid and command.
Development of Hypertext Markup Language (HTML) stopped with HTML 4 in 1999. The World Wide Web Consortium (W3C) has turned its focus to changing the underlying syntax of HTML from Standard Generalized Markup Language (SGML) to Extensible Markup Language (XML), as well as new markup languages ​​such as Scalable Vector Graphics (SVG), XForms and MathML. Browser manufacturers are focusing on browser features such as tabs and rich site summary (RSS) readers. Web designers are beginning to learn to use asynchronous JavaScript XML (Ajax) to build their applications within existing frameworks using Cascading Style Sheets (CSS) and the JavaScript™ language. But for the next eight years, nothing changed in HTML itself.
Recently, it has been revived. Three major browser vendors—Apple, Opera, and the Mozilla Foundation—formed the Web Hypertext Application Technology Working Group (WhatWG) to develop a new version of traditional HTML. Recently, the W3C has also noticed these activities and launched its own new generation HTML project. Many of the members of both parties are the same. The two projects are likely to eventually merge. While many details are still being debated, the broad outlines of the next version of HTML are already clear.
Web developers have been waiting for a new version of HTML (often called HTML 5, but also called Web Applications 1.0) since 1999, and now it's finally released. It maintains the original features of HTML: no namespaces or patterns. The element does not have to end. Browsers treat errors leniently. p is still p and table is still table.
If a web developer were frozen in 1999 and thawed now, he would encounter some new and confusing elements. Yes, familiar elements like divs are still there; however, HTML now also includes new elements like section, header, footer, and nav. em, code, and strong are still there, but meter, time, and m have been added. img and embed are still available, but video and audio have been added. However, upon closer inspection, he discovered that these elements were actually indistinguishable. Many of these elements were probably what developers needed in 1999 but didn't get. These new elements are easy to understand through simple analogies to elements he already mastered. In fact, they are very easy to master compared to Ajax or CSS.
Finally, when he turns on his 300MHz laptop (running Windows 98, which was also frozen in 1999), he may be surprised by how new pages appear in Netscape 4 and Windows® Internet Explorer® 5. Of course, these older browsers don't recognize the new elements and will ignore them completely, but the page will still display and the content will still be intact.
This is not a fictional story. HTML 5 is designed to degrade gracefully in browsers that don't support it. The reason is simple: we are all such "primitives." Browsers now have tabs, CSS, and XmlHttpRequest, but their HTML display engines are still stuck in 1999. Apart from a huge increase in the number of users, the Web has essentially made little progress. HTML 5 takes this into account. It currently offers some real benefits to web developers, and as browsers slowly upgrade, page viewers will gradually enjoy these benefits.
Let’s take a look at what HTML 5 has to offer.
(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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

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)

How to achieve gap effect on the card and coupon layout with gradient background? How to achieve gap effect on the card and coupon layout with gradient background? Apr 05, 2025 am 07:48 AM

Realize the gap effect of card coupon layout. When designing card coupon layout, you often encounter the need to add gaps on card coupons, especially when the background is gradient...

How to correctly display the locally installed 'Jingnan Mai Round Body' on the web page? How to correctly display the locally installed 'Jingnan Mai Round Body' on the web page? Apr 05, 2025 pm 10:33 PM

Using locally installed font files in web pages Recently, I downloaded a free font from the internet and successfully installed it into my system. Now...

Why does negative margins not take effect in some cases? How to solve this problem? Why does negative margins not take effect in some cases? How to solve this problem? Apr 05, 2025 pm 10:18 PM

Why do negative margins not take effect in some cases? During programming, negative margins in CSS (negative...

How to customize the resize symbol through CSS and make it uniform with the background color? How to customize the resize symbol through CSS and make it uniform with the background color? Apr 05, 2025 pm 02:30 PM

The method of customizing resize symbols in CSS is unified with background colors. In daily development, we often encounter situations where we need to customize user interface details, such as adjusting...

How to obtain real-time application and viewer data on the 58.com work page? How to obtain real-time application and viewer data on the 58.com work page? Apr 05, 2025 am 08:06 AM

How to obtain dynamic data of 58.com work page while crawling? When crawling a work page of 58.com using crawler tools, you may encounter this...

How to use CSS and Flexbox to implement responsive layout of images and text at different screen sizes? How to use CSS and Flexbox to implement responsive layout of images and text at different screen sizes? Apr 05, 2025 pm 06:06 PM

Implementing responsive layouts using CSS When we want to implement layout changes under different screen sizes in web design, CSS...

The text under Flex layout is omitted but the container is opened? How to solve it? The text under Flex layout is omitted but the container is opened? How to solve it? Apr 05, 2025 pm 11:00 PM

The problem of container opening due to excessive omission of text under Flex layout and solutions are used...

See all articles