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:
  • TagsDescription
    headerDefines a header for the document or a section
    navDefines navigation links in the document
    sectionDefines a section in the document
    articleDefines an article in the document
    asideDefines content aside from the page content
    footerDefines a footer for the document or a section
    detailsDefines additional details that the user can view or hide
    summaryDefines a visible heading for a details element
    figureDefines self-contained content, like illustrations, diagrams, photos, code listings, etc.
    figcaptionDefines a caption for a figure element
    markDefines marked or highlighted text
    timeDefines a date/time
    bdiDefines a part of text that might be formatted in a different direction from other text outside it
    wbrDefines a possible line-break
    dialogDefines a dialog box or window
    commandDefines a command button that a user can invoke
    meterDefines a scalar measurement within a known range (a gauge)
    progressDefines the progress of a task
    rubyDefines a ruby annotation (for East Asian typography)
    rtDefines an explanation/pronunciation of characters (for East Asian typography)
    rpDefines what to show in browsers that do not support ruby annotations
  • New Form Elements:
  • TagsDescription
    datalistDefines pre-defined options for input controls
    keygenDefines a key-pair generator field (for forms)
    outputDefines the result of a calculation
  • New Media Elements:
  • TagsDescription
    audioDefines sound or music content
    videoDefines video or movie content
    sourceDefines sources for video and audio
    trackDefines tracks for video and audio
    embedDefines containers for external applications (like plug-ins)
  • The New canvas element:
  • TagsDescription
    canvasDefines 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


    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


    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

  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. 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. Output is shown below:
  36. footer_with_styling_output
    fig 7

    Thus you will get a footer on homepage.

  37. 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.
  38. First let’s see for “about.html”.
  39. Copy the code of “homepage.html” from html tag to the end of the nav tag of “leftmenu”.
  40. Replace


  41. Copy the code of footer from “homepage.html” and paste it in “about.html” where the section tag ends.
    The code of footer is:
  42. Output of “about.html” is shown below:
  43. about_us_page output
    fig 8

  44. Now repeat steps 30,31 and 32 for “browse.html” and “contact.html” also. You will get the desired output with footer.
  45. 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