Difference between revisions of "HTML 5"
| Line 71: | Line 71: | ||
Note that the <header> is completely different from the <head> tag. | Note that the <header> is completely different from the <head> tag. | ||
| + | |||
| + | ===The <footer> Element=== | ||
| + | The footer element is also widely used. Generally, we refer to a section located at the very bottom of the web page as the footer. | ||
| + | <pre><footer>…</footer></pre> | ||
| + | |||
| + | The following information is usually provided between these tags: | ||
| + | *- Contact Information | ||
| + | *- Privacy Policy | ||
| + | *- Social Media Icons | ||
| + | *- Terms of Service | ||
| + | *- Copyright Information | ||
| + | *- Sitemap and Related Documents | ||
| + | |||
| + | ===The <nav> Element=== | ||
| + | This tag represents a section of a page that links to other pages or to certain sections within the page. This would be a section with '''navigation links.''' | ||
| + | |||
| + | Here is an example of a major block of navigation links: | ||
| + | <pre><nav> | ||
| + | <ul> | ||
| + | <li><a href="#">Home</a></li> | ||
| + | <li><a href="#">Services</a></li> | ||
| + | <li><a href="#">About us</a></li> | ||
| + | </ul> | ||
| + | </nav></pre> | ||
| + | Not all of the links in a document should be inside a '''<nav>''' element. The '''<nav>''' element is intended only for major blocks of navigation links. Typically, the '''<footer>''' element often has a list of links that don't need to be in a '''<nav>''' element. | ||
Revision as of 13:47, 22 March 2020
HTML5 is a markup language used for structuring and presenting content on the World Wide Web.
Contents
New in HTML5
Forms
- - The Web Forms 2.0 specification allows the creation of more powerful forms and more compelling user experiences.
- - Date pickers, color pickers, and numeric stepper controls have been added.
- - Input field types now include email, search, and URL.
- - PUT and DELETE form methods are now supported.
Integrated API (Application Programming Interfaces)
- - Drag and Drop
- - Audio and Video
- - Offline Web Applications
- - History
- - Local Storage
- - Geolocation
- - Web Messaging
Content Models
The List of Content Models
In HTML, elements typically belonged in either the block level or inline content model. HTML5 introduces seven main content models.
- - Metadata
- - Embedded
- - Interactive
- - Heading
- - Phrasing
- - Flow
- - Sectioning
Content Models
Metadata: Content that sets up the presentation or behavior of the rest of the content. These elements are found in the head of the document.
- Elements: <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>
Embedded: Content that imports other resources into the document.
- Elements: <audio>, <video>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>
Interactive: Content specifically intended for user interaction.
- Elements: <a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <label>, <object>, <select>, <textarea>
Heading: Defines a section header.
- Elements: <h1, <h2, <h3, <h4, <h5, <h6, <hgroup>
Phrasing: This model has a number of inline-level elements in common with HTML4.
- Elements: <img>, <span, <strong, <label>, br />, <small, <sub, and more.
Flow content: Contains the majority of HTML5 elements that would be included in the normal flow of the document.
Sectioning content: Defines the scope of headings, content, navigation, and footers.
- Elements: <article>, <aside>, <nav>, <section>
The <header> Element
In HTML4, we would define a header like this:
<div id="header">
In HTML5, a simple <header> tag is used, instead.
The <header> element is appropriate for use inside the body tag.
<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<h1> Most important heading </h1>
<h3> Less important heading </h3>
</header>
</body>
</html>
Note that the <header> is completely different from the <head> tag.
The footer element is also widely used. Generally, we refer to a section located at the very bottom of the web page as the footer.
<footer>…</footer>
The following information is usually provided between these tags:
- - Contact Information
- - Privacy Policy
- - Social Media Icons
- - Terms of Service
- - Copyright Information
- - Sitemap and Related Documents
This tag represents a section of a page that links to other pages or to certain sections within the page. This would be a section with navigation links.
Here is an example of a major block of navigation links:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
</ul>
</nav>
Not all of the links in a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links. Typically, the <footer> element often has a list of links that don't need to be in a <nav> element.
Advertising:
