The basic features and syntax of html5.

The basic features and syntax of html5.

HTML5 Overview
HTML5 is the next important version of the HTML standard. It is used to replace HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is also a standard for building and presenting content on the World Wide Web.

HTML5 is a product of collaboration between the World Wide Web Consortium (W3C) and the webpage Hypertext Technology Team (WHATWG.

This new standard includes features such as video playback and drag-and-drop. In the past, it relied on third-party browser plug-ins, such as Adobe Flash, Microsoft Silverlight, and Google Gears.

Browser support
The latest version of Apple Safari, Mozilla FireFox and Opera support most HTML5 features, and IE9 also supports some HTML5 features.

Mobile browsers pre-installed on iPhone es, iPads, and Android phones all provide excellent support for HTML5.

New Features
HTML5 introduces many new elements and attributes to help us build a modern website. The following are the main features introduced by HTML5:

New semantic elements, such as

Form 2.0: improved HTML Web forms and introduced some new attributes for the <input> tag.

Persistent local storage: to avoid using third-party plug-ins.

WebSocket: Next-generation bidirectional communication technology for Web applications.

Server push events: HTML5 introduces events from Web servers to Web browsers, also known as server push events (SSE ).

Canvas: supports two-dimensional drawing with JavaScript programming.

Audio and Video: embed audio or video on a webpage without using third-party plug-ins.

Location: users can share their location with our webpage.

Micro-data: allows us to create custom vocabulary outside HTML5, and use custom semantics to expand web pages.

Drag and Drop: Drag and Drop entries on the same web page from one location to another.

Backward compatibility
HTML5 is designed to be as backward compatible with existing browsers as much as possible. New features are built on existing features and allow us to provide backup content for old browsers.

We recommend that you use a small amount of JavaScript code to check the support of a single HTML5 feature.

HTML5 syntax

HTML5 has its own HTML syntax, which is compatible with HTML 4 and XHTML1 documents published on the network, but is not a more complex SGML feature in HTML 4.

HTML5 does not require lowercase tag names in XHTML. Attributes must be enclosed by quotation marks. Attributes must have a value and the syntax rules that must close all empty elements.

But HTML5 is more flexible and supports the following forms:

Label name writing.
Double quotation marks of the attribute are optional.
Optional attribute values.
Optional.
DOCTYPE
In earlier versions of HTML, DOCTYPE is very long, because the HTML language is based on SGML and a DTD needs to be referenced.

HTML5 authors can use simple syntax to specify DOCTYPE in the following format:

Copy XML/HTML Code to clipboard

1. <! DOCTYPE html>

The preceding syntax is case insensitive.

Character encoding
HTML5 authors can use simple syntax to specify character encoding, as shown below:

Copy XML/HTML Code to clipboard

1. <Meta charset = "UTF-8">

The preceding syntax is case insensitive.

<Script> tag
A common practice is to add a type attribute with the value of "text/javascript" to the script element, as shown below:

Copy XML/HTML Code to clipboard

1. <Script type = "text/javascript" src = "scriptfile. js"> </script>

HTML5 removes the required additional information. We can use the following simple Syntax:

Copy XML/HTML Code to clipboard

1. <Script src = "scriptfile. js"> </script>

<Link> tag
So far, we have written <link>:

Copy XML/HTML Code to clipboard

1. <Link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML5 removes the required additional information. We can use the following simple Syntax:

Copy XML/HTML Code to clipboard

1. <Link rel = "stylesheet" href = "stylefile.css">

HTML5 Elements
HTML5 elements use start and end tags. Tags are defined by the label names between angle brackets.

The difference between a start tag and an end tag is that the latter tag name contains a forward slash.

The following is an HTML5 element example:

Copy XML/HTML Code to clipboard

1. <P>... </p>

HTML5 tag names are case-insensitive and can be used in uppercase or in combination, although the most common convention is to always use lowercase letters.

Most elements contain some content. For example, <p>... </p> contains a paragraph. However, some elements cannot contain any content. They are called blank elements. For example, br, hr, link, and meta.

HTML5 document
To get a better structure, the following labels are introduced:

Section: this label indicates a common document or Application section. It can be used with the h1-h6 to represent the document structure.

Article: this label indicates an independent part of the document content, such as a blog entry or an article in a newspaper.

Aside: this label indicates content blocks that are slightly related to other parts of the page.

Header: this label indicates the header of a section.

Footer: this label indicates the footer of a section, which can contain the author, copyright, and other information.

Nav: this label indicates the section used to navigate the document.

Dialog: this label can be used to mark sessions.

Figure: this label can be used to associate titles with some embedded content, such as tables and videos.
The markup of an HTML5 document looks like the following:

Copy XML/HTML Code to clipboard

1. <! DOCTYPE html>
2. <Html>
3. <Head>
4. <Meta charset = "UTF-8">
5. <Title>... </title>
6. </Head>
7. <Body>
8. <Header>...
9. <Nav>... </nav>
10. <Article>
11. <Section>
12. ...
13. </Section>
14. </Article>
15. <Aside>... </aside>
16. <Footer>... </footer>
17. </Body>