HTML5 tag elements

0
1106

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

    to

    and save.
  7. Output is shown below:

  8. 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. 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

    to

    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. 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

    to
  23. Output will be seen like this:

  24. 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. 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. 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. 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

    to

    .
  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. 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here