Difference between revisions of "HTML 5"

From wikieduonline
Jump to navigation Jump to search
Line 96: Line 96:
 
</nav></pre>
 
</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.
 
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.
 +
 +
==article, section & aside==
 +
===The <article> Element===
 +
The '''article''' is a self-contained, independent piece of content that can be used and distributed separately from the rest of the page or site. This could be a forum post, a magazine or newspaper article, a blog entry, a comment, an interactive widget or gadget, or any other independent piece of content.
 +
 +
The '''<article>''' element replaces the '''<div''' element that was widely used in HTML4, along with an id or class.
 +
<pre><article>
 +
  <h1>The article title</h1>
 +
  <p>Contents of the article element </p>
 +
</article></pre>
 +
 +
When an <article> element is nested, the inner element represents an article related to the outer element. For example, blog post comments can be <article> elements nested in the <article> representing the blog post.
 +
 +
===The <section> Element===
 +
'''<section>''' is a logical container of the page or article.
 +
Sections can be used to divide up content within an article.
 +
For example, a homepage could have a section for introducing the company, another for news items, and still another for contact information.
 +
 +
Each '''<section>'''should be identified, typically by including a heading (h1-h6 element) as a child of the <section> element.
 +
<pre><article>
 +
  <h1>Welcome</h1>
 +
  <section>
 +
      <h1>Heading</h1>
 +
      <p>content or image</p>
 +
  </section>
 +
</article></pre>
 +
 +
If it makes sense to separately syndicate the content of a <section> element, use an <article> element instead.
 +
 +
===The <aside> Element===
 +
'''<aside>''' is secondary or tangential content which could be considered separate from but indirectly related to the main content.
 +
This type of content is often represented in sidebars.
 +
When an '''<aside>''' tag is used within an '''<article>''' tag, the content of the '''<aside>''' should be specifically related to that article.
 +
<pre><article>
 +
  <h1> Gifts for everyone </h1>
 +
  <p> This website will be the best place for choosing gifts </p>
 +
  <aside>
 +
      <p> Gifts will be delivered to you within 24 hours </p>
 +
  </aside>
 +
</article></pre>
 +
 +
When an <aside> tag is used outside of an <article> tag, its content should be related to the surrounding content.

Revision as of 14:05, 22 March 2020

HTML5 is a markup language used for structuring and presenting content on the World Wide Web.

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>

Header, nav & footer

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

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

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: 

<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.

article, section & aside

The <article> Element

The article is a self-contained, independent piece of content that can be used and distributed separately from the rest of the page or site. This could be a forum post, a magazine or newspaper article, a blog entry, a comment, an interactive widget or gadget, or any other independent piece of content.

The <article> element replaces the <div element that was widely used in HTML4, along with an id or class. 

<article> 
   <h1>The article title</h1> 
   <p>Contents of the article element </p>
</article>

When an <article> element is nested, the inner element represents an article related to the outer element. For example, blog post comments can be <article> elements nested in the <article> representing the blog post.

The <section> Element

<section> is a logical container of the page or article. Sections can be used to divide up content within an article. For example, a homepage could have a section for introducing the company, another for news items, and still another for contact information.

Each <section>should be identified, typically by including a heading (h1-h6 element) as a child of the <section> element. 

<article>
   <h1>Welcome</h1>
   <section>
      <h1>Heading</h1>
      <p>content or image</p>
   </section>
</article>

If it makes sense to separately syndicate the content of a <section> element, use an <article> element instead.

The <aside> Element

<aside> is secondary or tangential content which could be considered separate from but indirectly related to the main content. This type of content is often represented in sidebars. When an <aside> tag is used within an <article> tag, the content of the <aside> should be specifically related to that article. 

<article>
   <h1> Gifts for everyone </h1>
   <p> This website will be the best place for choosing gifts </p>
   <aside>
      <p> Gifts will be delivered to you within 24 hours </p>
   </aside>
</article>

When an <aside> tag is used outside of an <article> tag, its content should be related to the surrounding content.

Retrieved from "https://www.wikieduonline.com/index.php?title=HTML_5&oldid=15912"

Advertising: