HTML 5 TutorialsHTML5 tag elements

HTML5 tag elements

We had a introduction to HTML5 in the last section, so today, let’s know more about the new elements in HTML5.
We will go for some of the symantic structural elements of HTML5.
HTML5 has added a lot of new tags. These tags are more descriptive and more helpful in general.
We will see description of some tags.

  • New Semantic/Structural Elements:
  • Tags Description
    header Defines a header for the document or a section
    nav Defines navigation links in the document
    section Defines a section in the document
    article Defines an article in the document
    aside Defines content aside from the page content
    footer Defines a footer for the document or a section
    details Defines additional details that the user can view or hide
    summary Defines a visible heading for a details element
    figure Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
    figcaption Defines a caption for a figure element
    mark Defines marked or highlighted text
    time Defines a date/time
    bdi Defines a part of text that might be formatted in a different direction from other text outside it
    wbr Defines a possible line-break
    dialog Defines a dialog box or window
    command Defines a command button that a user can invoke
    meter Defines a scalar measurement within a known range (a gauge)
    progress Defines the progress of a task
    ruby Defines a ruby annotation (for East Asian typography)
    rt Defines an explanation/pronunciation of characters (for East Asian typography)
    rp Defines what to show in browsers that do not support ruby annotations
  • New Form Elements:
  • Tags Description
    datalist Defines pre-defined options for input controls
    keygen Defines a key-pair generator field (for forms)
    output Defines the result of a calculation
  • New Media Elements:
  • Tags Description
    audio Defines sound or music content
    video Defines video or movie content
    source Defines sources for video and audio
    track Defines tracks for video and audio
    embed Defines containers for external applications (like plug-ins)
  • The New canvas element:
  • Tags Description
    canvas Defines graphic drawing using JavaScript

Now we will use some of the tags shown above in our “Blue Developer Directory” website.
We will make our “Blue Developer Directory” more HTML5 friendly directory. Let’s start.

  1. Make a new folder on desktop and name it as “blue_developer”.
  2. Copy all contents of “Making Webpages” folder, created previously in this “blue_developer” folder.
  3. Now forget “Making Webpages” folder and just concentrate on “blue_developer” folder.
  4. In semantic/structural tags above, we have a header tag which defines a header for document or a section. Let’s use it.
  5. Open “homepage.html” page in notepad++.
  6. Replace
    <div id=”header”>--------</div>



    and save.

  7. Output is shown below:
  8. header_tag_output
    fig 1

  9. The heading “Blue Developer Directory” has changed, i.e. it was bold and white in colour before, now it has become small and black. This is because the styling done to header in css file is still searching for
    for styling. But header is no more an “id”.
  10. So open the “style.css” file.
  11. See the styling done to the header section. You will see a “#” before “header”. Wherever you see “#” before “header”, erase it and save since “header” is no more an “id”.
  12. Now see the output:
  13. header_tag_remove_hash_output.jpg
    fig 2

    The output is now same as it was with the “id”.

  14. Next, we have nav tag, in semantic/structural tags above that defines navigation links in the document.
  15. In our homepage.html we have 2 link sets, “menu” and “leftmenu”. Instead of separating it using div tag, we can use nav tag for it.
  16. We can use “id” and “class” attributes for any HTML5 tags.
    So first replace

    <div id=”menu”>------</div>


    <nav id=”menu”>------</nav>

    and save. We gave “id” to nav tag because, we will have to use it for leftmenu also, so to differentiate between both “id” is necessary.

  17. Here there is no need to erase “#” before “menu” in style.css, since we are using “menu” as “id”, and every id starts with a “#” in .css file.
  18. Repeat steps 13 and 14 for leftmenu with “id” as “leftmenu”.
  19. Output is shown below, it will remain as it is.
  20. using_nav_tag
    fig 3

  21. Now we have another two div blocks having “id” as “content”. We have a “section” tag in the semantic/structural tags above which defines a section in the document.
  22. Replace both the
    <div id=”content”>-----</div>


  23. Output will be seen like this:
  24. section_tag_output
    fig 4

  25. This is because, the css file has styled the id “content” and now we don’t have “content” any more in our homepage.html. Instead of “content” we have “section”.
  26. So now, go to “style.css” file and replace “#content” with “section”.
  27. You will see the following output:
  28. replacing_content_with_section_output
    fig 5

  29. You can have a footer for your page using the footer tag which defines a footer for a document or a section.
  30. Go to “homepage.html” and write the following code where the second “section” tag ends.
  31. <div style="clear:both"></div>
    	Copyright 2014 Blue Developer Directory

    Here style=”clear:both” means clear the value of “float” i.e. left or right, if used earlier.

  32. It’s output will look like this:
  33. footer_without_styling
    fig 6

    Here, in the output you can see the footer having small text.
    Let’s style it.

  34. Now go to “style.css” file and write the following code in it.
  35. footer
    	padding:10px 0 10px 0;
  36. Output is shown below:
  37. footer_with_styling_output
    fig 7

    Thus you will get a footer on homepage.

  38. Now our homepage is ready, now we will have to make changes in rest of out pages viz. about.html, browse.html and contact.html.
  39. First let’s see for “about.html”.
  40. Copy the code of “homepage.html” from html tag to the end of the nav tag of “leftmenu”.
  41. Replace
    <div id=”content”>------</div>




  42. Copy the code of footer from “homepage.html” and paste it in “about.html” where the section tag ends.
    The code of footer is:
  43. <div style="clear:both"></div>
    	Copyright 2014 Blue Developer Directory
  44. Output of “about.html” is shown below:
  45. about_us_page output
    fig 8

  46. Now repeat steps 30,31 and 32 for “browse.html” and “contact.html” also. You will get the desired output with footer.
  47. Here we finished using some of the new tags from HTML5.
    In the next section we will have a glance at some more new input elements and form elements.


Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -Newspaper WordPress Theme

Latest article


More article

- Advertisement -Newspaper WordPress Theme