Skip to content
This repository was archived by the owner on Jan 13, 2023. It is now read-only.

ChangeLog.md

Latest commit

 

History

History
441 lines (441 loc) · 14 KB

ChangeLog.md

File metadata and controls

441 lines (441 loc) · 14 KB

< Previous     Next >

Some Changes

Most of the individual changes are a result of larger objectives in the design of the language. These objectives primarily include:
  1. Encouraging semantic (meaningful) markup
  2. Separating design from content
  3. Promoting accessibility and design responsiveness
  4. Reducing the overlap between HTML, CSS, and JavaScript
  5. Supporting rich media experiences while eliminating the need for plugins such as Flash or Java

New Tags

In previous versions of the language, common structural elements like page headers, navigation menus, and main content sections were all indicated with the same HTML element, the <div> tag. In HTML, there are a host of new semantic elements intended to indicate the basic structure of a page:
  1. <article>
  2. <aside>
  3. <footer>
  4. <header>
  5. <main>
  6. <nav>
  7. <section>
New text-level (inline) elements have also been introduced, such as <address> and <time>. These help search engines and other services to easily find information on a page, for display in other contexts. At the same time, existing inline elements which produce various effects like bold, italic, and underline have been refined or redefined to imply specific semantic meaning.

<article>

The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
Potential sources for the <article> element:
  • Forum post.
  • Blog post.
  • News story.
Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element (see example below). 
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>


<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>


<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

Browser Support

<article> Chrome Edge Firefox Safari Opera
Version 6.0 9.0 4.0 5.0 11.1

Default CSS:

article { 
  display: block;
}

<aside>

The <aside> tag defines some content aside from the content it is placed in.
The aside content should be indirectly related to the surrounding content.
Tip: The <aside> content is often placed as a sidebar in a document.
Note: The <aside> element does not render as anything special in a browser. However, you can use CSS to style the <aside> element (see example below). 
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>


<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

Browser Support

<article> Chrome Edge Firefox Safari Opera
Version 6.0 9.0 4.0 5.0 11.1

Default CSS:

aside { 
  display: block;
}

<footer>

The <footer> tag defines a footer for a document or section.
A <footer> element typically contains:
  • Authorship Information
  • Copyright Information
  • Contact Information
  • Sitemap
  • Back to top Links
  • Related Documents
You can have several <footer> elements in one document. 
<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:name@example.com">name@example.com</a></p>
</footer>

Browser Support

<article> Chrome Edge Firefox Safari Opera
Version 6.0 9.0 4.0 5.0 11.1

Default CSS:

footer { 
  display: block;
}

<header>

The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
  • One or more heading elements (<h1> ••• <h6>)
  • Logo or icon
  • Authorship information
Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element. 
<article>
  <header>
    <h1>A heading here</h1>
    <p>Posted by John Doe</p>
    <p>Some additional information here</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

Browser Support

<article> Chrome Edge Firefox Safari Opera
Version 6.0 9.0 4.0 5.0 11.1

Default CSS:

header { 
  display: block;
}

<main>

The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element. 
<main>
  <h1>Most Popular Browsers</h1>
  <p>Chrome, Firefox, and Edge are the most used browsers today.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</main>

Browser Support

<article> Chrome Edge Firefox Safari Opera
Version 26.0 12.0 21.0 7.0 16.0

Default CSS:

main { 
  margin: 0;
  padding: auto;
  background-color: white;
}

<nav>

The <nav> tag 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.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content. 
<nav>
  <a href="/html/">HTML</a>
  <span>|</span>
  <a href="/css/">CSS</a>
  <span>|</span>
  <a href="/js/">JavaScript</a>
  <span>|</span>
  <a href="/python/">Python</a>
</nav>

Browser Support

The <nav> tag 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.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content. 
<nav>
  <a href="/html/">HTML</a>
  <span>|</span>
  <a href="/css/">CSS</a>
  <span>|</span>
  <a href="/js/">JavaScript</a>
  <span>|</span>
  <a href="/python/">Python</a>
</nav>
<article> Chrome Edge Firefox Safari Opera
Version 5.0 9.0 4.0 5.0 11.1

Default CSS:

nav { 
  display: block;
}

<section>

The <section> tag defines a section of a document. 
<section>
<h2>WWF History</h2>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h2>WWF's Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

Browser Support

<article> Chrome Edge Firefox Safari Opera
Version 5.0 9.0 4.0 5.0 11.5

Default CSS:

section { 
  display: block;
}

Removed Tags

All the tags on this list are removed in HTML5 (but can be replaced with css):
  1. <acronym>
  2. <applet>
  3. <basefont>
  4. <big>
  5. <center>
  6. <dir>
  7. <font>
  8. <frame>
  9. <frameset>
  10. <noframes>
  11. <strike>
  12. <tt>

<acronym>

Instead, use <abbr>

<applet>

Instead, use <embed> or <object>

<basefont>

Instead, use CSS: 
basefont {
  color: red;
}

<big>

Instead, use CSS: 
big {
  font-size: 30px;
}

<center>

Instead, use CSS: 
center {
  text-align: center;
}

<dir>

Instead, use <ul>

<font>

Instead, use CSS: 
font.verdana {
  font-family: verdana;
}
font.courier-new {
  font-family: "Courier New";
}
font.sans-serif {
  font-family: "Source Sans Pro", sans-serif;
}

<frame>

Not Supported anymore.

<frameset>

Not Supported anymore.

<noframes>

Not Supported anymore.

<strike>

Instead, use <del> or <s>

<tt>

Tip: tt means "teletype text", like monospace.
Instead, use CSS: 
tt.lucida-console {
  font-family: "Lucida Console", monospace;
}

Other Stuff

Along with strongly encouraging semantic (meaningful) markup, the HTML5 specification strongly discourages non-meaningful markup — markup intended only to tell the browser how to display things. This includes things like:
  • declaring fonts and text colors.
  • setting text alignment or justification.
  • placing borders on tables.
  • defining how text wraps around images.
Most of the HTML features that allowed for these sorts of things have been completely deprecated. The few that are still officially supported come with warnings that they are usually not recommended practices.
There are primarily two reasons to prefer this separation:
  • It is easier to maintain and redesign a site if the style declarations are confined to CSS.
  • Users view web content in a lot of different contexts — desktops, laptops, tablets, mobile phones, RSS readers, and many others. Styles and design decisions that make sense in one environment don’t always make sense in another. So it is much better to provide semantic information and let the content be adapted to the context.