Home / Articles / Programming languages / Markup languages / HTML & CSS / HTML5: adding new elements

HTML5: adding new elements

HTML5: adding new elements
 
Authors: Daisy Smith
HTML5: adding new elements
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (1 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


HTML5 contains new elements like header, footer, nav, aside, section and article.

To find out which ones you will need let’s have a look at their functions:

  • header - contains headers of the document and section headers. It may also contain logos and other additional information;
  • footer - includes information about the document and section. For example, information about the author and the copyright;
  • nav - here the main navigation links to other pages are placed. Usually the header contains this element, but it can be also used in a document;
  • aside - includes information in addition to other content, but it's also an independent element (for example sidebar). Often it is given a nickname sidebar;
  • section - is a new element. Its structure may be combined thematically;
  • article - may include the content of a separate site.

Let's have a look at the example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CSS</title>
  </head>
  <body>
    <header>
      <h1>CSS</h1>
      <nav>
        <ul>
          <li><a href="/Syntax/">Syntax</a></li>
          <li><a href="/Use/">Use</a></li>
          <li><a href="/Sources/">Sources</a></li>
        </ul>
      </nav>
    </header>
    <article>
      <h2>What is CSS</h2>
      <p>CSS (Cascading Style Sheets) - a language which describes the outer appearance of a document, created with the help of markup language..</p>
    </article>
    <article>
      <h2>CSS и HTML</h2>
      <p>Your document must have valid HTML-code to achieve better results when using CSS</p>
    </article>
    <aside>
      <h2>A few things about CSS</h2>
      <p>Creating style sheets</p>
      <ul>
        <li><a href="http://example.com">Examples CSS</a></li>
        <li><a href="http://example.com">Applying CSS</a></li>
      </ul>
    </aside>
    <footer>
      <p>Copyright 2012</p>
    </footer>
  </body>
</html>

Links are always used inside the nav tag, but it doesn't mean that you should put all the existing links into it. The tag contains only essential site navigation links.

If to the document you add to a correct stylesheet you will get the structure of the document that will look something like this:

structure example

Fig.1 An example of a simple structure

Analysis of a very large number of sites showed that CSS - attributes class and id can be replaced by elements header, footer, and nav.

The correct use of the structural elements

header - usually used in the headers. Headers may include logos, names etc.;

section & aside - also can be placed in the header. May have their own header and navigation links;

footer - here the copyright and author information is usually placed;

Note: Elements section, articles and asides may include footer and of course all its information.

Using element div

While creating the document try to comprehend the content. Avoid unnecessary use of div. For example, while working with the text in the paragraph use element p, instead of div. In this case it make more sense to use p.

Proper design of the structural elements

New elements of HTML5 are displayed by all the modern browsers. But there are still some that don't display them. This leads to unnecessary problems and time consumption. This situation has a simple solution. Use CSS to tell the browser that the following elements are block elements.

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

Note: All versions of Internet Explorer up to IE9 need to include a simple JavaScript code so that the new elements could be recognized.

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('nav');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('section');
</script>

 

Read also

HTML5: elements article and section

HTML5: elements article and section

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation