Google Ads

Month: August 2018


The Difference Between <article> <section> and <div>

 

There is a confusing (lack of) difference in the HTML5 standard, between <article> <section> and <div>.

In the HTML5 standard, the <section> element is defined as a block of related elements.

The <article> element is defined as a complete, self-contained block of related elements.

The <div> element is defined as a block of children elements.

How to interpret that?

In the example above, we have used <section> as a container for related <articles>.

But, we could have used <article> as a container for articles as well.

Here are some different examples:

 

<article> in <article>:

Code:
 
  1. <article>
  2. <h2>Famous Cities</h2>
  3. <article>
  4. <h2>London</h2>
  5. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  6. with a metropolitan area of over 13 million inhabitants.</p>
  7. </article>
  8. <article>
  9. <h2>Paris</h2>
  10. <p>Paris is the capital and most populous city of France.</p>
  11. </article>
  12. <article>
  13. <h2>Tokyo</h2>
  14. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  15. and the most populous metropolitan area in the world.</p>
  16. </article>
  17. </article>

 

Try Your Self ->

 

<div> in <article>:

Code:
 
  1. <article>
  2. <h2>Famous Cities</h2>
  3. <div class="city">
  4. <h2>London</h2>
  5. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  6. with a metropolitan area of over 13 million inhabitants.</p>
  7. </div>
  8. <div class="city">
  9. <h2>Paris</h2>
  10. <p>Paris is the capital and most populous city of France.</p>
  11. </div>
  12. <div class="city">
  13. <h2>Tokyo</h2>
  14. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  15. and the most populous metropolitan area in the world.</p>
  16. </div>
  17. </article>

 

Try Your Self ->

 

<div> in <section> in <article>:

Code:
 
  1. <article>
  2. <section>
  3. <h2>Famous Cities</h2>
  4. <div class="city">
  5. <h2>London</h2>
  6. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  7. with a metropolitan area of over 13 million inhabitants.</p>
  8. </div>
  9. <div class="city">
  10. <h2>Paris</h2>
  11. <p>Paris is the capital and most populous city of France.</p>
  12. </div>
  13. <div class="city">
  14. <h2>Tokyo</h2>
  15. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  16. and the most populous metropolitan area in the world.</p>
  17. </div>
  18. </section>
  19. <section>
  20. <h2>Famous Countries</h2>
  21. <div class="country">
  22. <h2>England</h2>
  23. <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  24. with a metropolitan area of over 13 million inhabitants.</p>
  25. </div>
  26. <div class="country">
  27. <h2>France</h2>
  28. <p>Paris is the capital and most populous city of France.</p>
  29. </div>
  30. <div class="country">
  31. <h2>Japan</h2>
  32. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  33. and the most populous metropolitan area in the world.</p>
  34. </div>
  35. </section>
  36. </article>

 

Try Your Self ->

 


Learn Change to HTML5 Semantic Elements – HTML5 Migration – HTML Code

 

The existing CSS contains id’s and classes for styling the elements:

Code:
 
  1. body {
  2. font-family: Verdana,sans-serif;
  3. font-size: 0.9em;
  4. }
  5. div#header, div#footer {
  6. padding: 10px;
  7. color: white;
  8. background-color: black;
  9. }
  10. div#content {
  11. margin: 5px;
  12. padding: 10px;
  13. background-color: lightgrey;
  14. }
  15. div.article {
  16. margin: 5px;
  17. padding: 10px;
  18. background-color: white;
  19. }
  20. div#menu ul {
  21. padding: 0;
  22. }
  23. div#menu ul li {
  24. display: inline;
  25. margin: 5px;
  26. }

 

Replace with equal CSS styles for HTML5 semantic elements:

Code:
 
  1. body {
  2. font-family: Verdana,sans-serif;
  3. font-size: 0.9em;
  4. }
  5. header, footer {
  6. padding: 10px;
  7. color: white;
  8. background-color: black;
  9. }
  10. section {
  11. margin: 5px;
  12. padding: 10px;
  13. background-color: lightgrey;
  14. }
  15. article {
  16. margin: 5px;
  17. padding: 10px;
  18. background-color: white;
  19. }
  20. nav ul {
  21. padding: 0;
  22. }
  23. nav ul li {
  24. display: inline;
  25. margin: 5px;
  26. }

 

Finally, change the elements to HTML5 semantic elements:

Code:
 
  1. <body>
  2. <header>
  3. <h1>Monday Times</h1>
  4. </header>
  5. <nav>
  6. <ul>
  7. <li>News</li>
  8. <li>Sports</li>
  9. <li>Weather</li>
  10. </ul>
  11. </nav>
  12. <section>
  13. <h2>News Section</h2>
  14. <article>
  15. <h2>News Article</h2>
  16. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  17. </article>
  18. <article>
  19. <h2>News Article</h2>
  20. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  21. </article>
  22. </section>
  23. <footer>
  24. <p>© 2014 Monday Times. All rights reserved.</p>
  25. </footer>
  26. </body>

 

Try Your Self ->

 


Learn Add The HTML5Shiv – HTML5 Migration – HTML Code

 

The new HTML5 semantic elements are supported in all modern browsers. In addition, you can “teach” older browsers how to handle “unknown elements”.However, IE8 and earlier, does not allow styling of unknown elements. So, the HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.Add the HTML5Shiv:

 

Code:
 
  1. <!--[if lt IE 9]>
  2. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  3. <![endif]-->

 

Try Your Self ->

 


Learn Change to HTML5 Encoding – HTML5 Migration – HTML Code

 

Change the encoding information:

Code:
 
  1. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

 

to HTML5 encoding:

 

Code:
 
  1. <meta charset="utf-8">

 

Try Your Self ->

 


Learn Change to HTML5 Doctype – HTML5 Migration – HTML Code

Change to HTML5 Doctype

 

Change the doctype:

Code:
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

to the HTML5 doctype:

Code:
 
  1. <!DOCTYPE html>

 

Try Your Self ->

 


Migration from HTML4 to HTML5

This chapter is entirely about how to migrate from HTML4 to HTML5.

This chapter demonstrates how to convert an HTML4 page into an HTML5 page, without destroying anything of the original content or structure.

You can migrate from XHTML to HTML5, using the same recipe.

 

Typical HTML4 Typical HTML5
<div id=”header”> <header>
<div id=”menu”> <nav>
<div id=”content”> <section>
<div class=”article”> <article>
<div id=”footer”> <footer>

A Typical HTML4 Page

Code:
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5. <title>HTML4</title>
  6. <style>
  7. body {
  8. font-family: Verdana,sans-serif;
  9. font-size: 0.9em;
  10. }
  11. div#header, div#footer {
  12. padding: 10px;
  13. color: white;
  14. background-color: black;
  15. }
  16. div#content {
  17. margin: 5px;
  18. padding: 10px;
  19. background-color: lightgrey;
  20. }
  21. div.article {
  22. margin: 5px;
  23. padding: 10px;
  24. background-color: white;
  25. }
  26. div#menu ul {
  27. padding: 0;
  28. }
  29. div#menu ul li {
  30. display: inline;
  31. margin: 5px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="header">
  37. <h1>Monday Times</h1>
  38. </div>
  39. <div id="menu">
  40. <ul>
  41. <li>News</li>
  42. <li>Sports</li>
  43. <li>Weather</li>
  44. </ul>
  45. </div>
  46. <div id="content">
  47. <h2>News Section</h2>
  48. <div class="article">
  49. <h2>News Article</h2>
  50. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  51. </div>
  52. <div class="article">
  53. <h2>News Article</h2>
  54. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  55. </div>
  56. </div>
  57. <div id="footer">
  58. <p>&copy; 2016 Monday Times. All rights reserved.</p>
  59. </div>
  60. </body>
  61. </html>

 

Try Your Self ->

 


Learn HTML5 Semantic Elements – HTML Code


 

Semantics is the study of the meanings of words and phrases in a language.

Semantic elements = elements with a meaning.

 


What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content.

 


 

HTML5 semantic elements are supported in all modern browsers.

In addition, you can “teach” older browsers how to handle “unknown elements”.

Read about it in HTML5 Browser Support.


New Semantic Elements in HTML5

Many web sites contain HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”>
to indicate navigation, header, and footer.

HTML5 offers new semantic elements to define different parts of a web page:

 

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

 


 

HTML5 <section> Element

The <section> element defines a section in a document.

According to horjeC’s HTML5 documentation: “A section is a thematic grouping of content, typically with a heading.”

A home page could normally be split into sections for introduction, content, and contact information.

 

Code
 
  1. <section>
  2. <h1>WWF</h1>
  3. <p>The World Wide Fund for Nature (WWF) is....</p>
  4. </section>

 

Try Your Self ->

 


 

HTML5 <article> Element

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

Examples of where an <article> element can be used:

  • Forum post
  • Blog post
  • Newspaper article

 

Code:
 
  1. <article>
  2. <h1>What Does WWF Do?</h1>
  3. <p>WWF's mission is to stop the degradation of our planet's natural environment,
  4. and build a future in which humans live in harmony with nature.</p>
  5. </article>

 

Try Your Self ->

 

Nesting <article> in <section> or Vice Versa?

The<article> element specifies independent, self-contained content.

The <section> element defines section in a document.

Can we use the definitions to decide how to nest those elements? No, we cannot!

So, on the Internet, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.

You will also find pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.

Example for a newspaper: The sport <article> in the sport section, may have a technical section in each <article>.

 


HTML5 <header> Element

The <header> element specifies a header for a document or section.

The <header> element should be used as a container for introductory content.

You can have several <header> elements in one document.

The following example defines a header for an article:

 

Code:
 
  1. <article>
  2. <header>
  3. <h1>What Does WWF Do?</h1>
  4. <p>WWF's mission:</p>
  5. </header>
  6. <p>WWF's mission is to stop the degradation of our planet's natural environment,
  7. and build a future in which humans live in harmony with nature.</p>
  8. </article>

 

Try Your Self ->

 


 

HTML5 <footer> Element

The <footer> element specifies a footer for a document or section.

A <footer> element should contain information about its containing element.

A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.

You may have several <footer> elements in one document.

 

Code:
 
  1. <footer>
  2. <p>Posted by: Hege Refsnes</p>
  3. <p>Contact information: <a href="mailto:[email protected]">
  4. [email protected]</a>.</p>
  5. </footer>

 

Try Your Self ->

 


 

HTML5 <nav> Element

The <nav> element defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

 

Code:
 
  1. <nav>
  2. <a href="/html/">HTML</a> |
  3. <a href="/css/">CSS</a> |
  4. <a href="/js/">JavaScript</a> |
  5. <a href="/jquery/">jQuery</a>
  6. </nav>

 

Try Your Self ->

 


 

HTML5 <aside> Element

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be related to the surrounding content.

 

Code:
 
  1. <p>My family and I visited The Epcot center this summer.</p>
  2. <aside>
  3. <h4>Epcot Center</h4>
  4. <p>The Epcot Center is a theme park in Disney World, Florida.</p>
  5. </aside>

 

Try Your Self ->

 


 

HTML5 <figure> and <figcaption> Elements

The purpose of a figure caption is to add a visual explanation to an image.

In HTML5, an image and a caption can be grouped together in a <figure> element:

 

Code:
 
  1. <figure>
  2. <img src="pic_trulli.jpg" alt="Trulli">
  3. <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
  4. </figure>

 

Try Your Self ->

 

The <img> element defines the image, the <figcaption> element defines the caption.

 


Why Semantic Elements?

With HTML4, developers used their own id/class names to style elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.

This made it impossible for search engines to identify the correct web page content.

With the new HTML5 elements (<header> <footer> <nav> <section> <article>), this will become easier.

According to the horjeC, a Semantic Web: “Allows data to be shared and reused across applications, enterprises, and communities.”

 


Semantic Elements in HTML5

Below is an alphabetical list of the new semantic elements in HTML5.

The links go to our complete HTML5 Reference.

Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

 

 

or

You can watch following video

 


Learn HTML5 section Element – HTML Code

The <section> element defines a section in a document.

According to W3C’s HTML5 documentation: “A section is a thematic grouping of content, typically with a heading.”

A home page could normally be split into sections for introduction, content, and contact information.

 

Example:
 
  1. <section>
  2. <h1>WWF</h1>
  3. <p>The World Wide Fund for Nature (WWF) is....</p>
  4. </section>

 

Try Your Self ->

 


New Elements in HTML5

Below is a list of the new HTML5 elements, and a description of what they are used for.

 


New Semantic/Structural Elements

HTML5 offers new elements for better document structure:

Tag Description
<article> Defines an article in a document
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

Read more about HTML5 Semantics.

 


New Form Elements

Tag Description
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation

Read all about old and new form elements in HTML Form Elements.


New Input Types

New Input Types New Input Attributes
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Learn all about old and new input types in HTML Input Types.

Learn all about input attributes in HTML Input Attributes.

 


HTML5 – New Attribute Syntax

HTML5 allows four different syntaxes for attributes.

This example demonstrates the different syntaxes used in an <input> tag:

Type Example
Empty <input type=”text” value=”John” disabled>
Unquoted <input type=”text” value=John>
Double-quoted <input type=”text” value=”John Doe”>
Single-quoted <input type=”text” value=’John Doe’>

In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.

 


HTML5 Graphics

Tag Description
<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)
<svg> Draw scalable vector graphics

Read more about HTML5 Canvas.

Read more about HTML5 SVG.

 


New Media Elements

Tag Description
<audio> Defines sound content
<embed> Defines a container for an external (non-HTML) application
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines video or movie

Read more about HTML5 Video.

Read more about HTML5 Audio.

 


 

or

Watch Video to Learn this Topic

 

 


You can teach older browsers to handle HTML5 correctly.

 


HTML5 Browser Support

HTML5 is supported in all modern browsers.

In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.

Because of this, you can “teach” older browsers to handle “unknown” HTML elements.

You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements.

 


Define Semantic Elements as Block Elements

HTML5 defines eight new semantic elements. All these are block-level elements.

To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block:

 

Code:

header, section, footer, aside, nav, main, article, figure {
display: block;
}

 


 

Add New Elements to HTML

You can also add new elements to an HTML page with a browser trick.

This example adds a new element called <myHero> to an HTML page, and defines a style for it:

 

Code:

<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>A Heading</h1>
<myHero>My Hero Element</myHero>

</body>
</html>

 

Try Your Self ->

 

The JavaScript statement document.createElement("myHero") is needed to create a new element in IE 9, and earlier.

 


 

Problem With Internet Explorer 8

You could use the solution described above for all new HTML5 elements.

However, IE8 (and earlier) does not allow styling of unknown elements!

Thankfully, Sjoerd Visscher created the HTML5Shiv! The HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.

You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9.

 


Syntax For HTML5Shiv

The HTML5Shiv is placed within the <head> tag.

The HTML5Shiv is a javascript file that is referenced in a <script> tag.

You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>, <section>, <aside>, <nav>, <footer>.

You can download the latest version of HTML5shiv from github or reference the CDN version at https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

Syntax

Code:

<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>

HTML5Shiv Example

If you do not want to download and store the HTML5Shiv on your site, you could reference the version found on the CDN site.

The HTML5Shiv script must be placed in the <head> element, after any stylesheets:

 

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>

<section>

<h1>Famous Cities</h1>

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>

</section>

</body>
</html>

 

Try Your Self ->

 


 

or

Watch Video to Learn the Tutorial

 

 

"