How to use the HTML5 Periodic Table: Click on any element for its definition and/or links to more information about it.

Give it a try! Interact with the Periodic Table of HTML5 Elements.

Earlier this week, I came across a blog article that was a tutorial for how to create a web page. Within this article, there was a note. The note directed that the many people who say “<a HREF…>” as “Eh, Aitch Ref” are completely wrong, and “Eh, Harref” was correct.

As superfluous as which the correct pronunciation may really be, I completely will go to debate on that blog article’s note. The HTML attribute “HREF” is a mash up of “hyperlink” or “html” & “reference”. So yes, I say it should be pronounced “Eh, Aitch Ref”, not what could be someone’s name.

I invite you to take the poll: How do you pronounce “<a HREF..>”?
Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

3 of the XHTML rules
1. all tags/elements must be in lowercase, not UPPERCASE nor Titlecase.
2. all tags/elements must have a closing tag
3. all values must have quotes (” “) around them

Here’s the play by play analysis of how I had to swallow my pride for the morning and which rule I did not follow.

At my day job (Web Producer, Enercon Industries), I was upgrading the web site’s CMS system to the latest version. During inspection of the site post-upgrade, one of the webpages was not laid out like it was pre-upgrade. The top and left navigation bars were fine, but the page content and right navigation bar was all over the place.

Believe me, like many other developers when something goes awry after it working prior, a bit of adrenaline kicks in. I launched my arsenal of software programs (Dreamweaver, Notepad, Firefox & Internet Explorer), grabbed a cup of coffee (I knew I was going to be glued to my computer for a while), tuned into my Pandora Rob Dougan Channel and started to dissect the problem:

1. Navigated to the webpage in Firefox.
2. View(ed) Source of webpage [uses pretty colors to discern between tags, values & content].
3. The markup is massively long – cannot keep track of open and closing tags; no (apparent) errors.
4. Grr!
5. Logged into the CMS system.
6. Reviewed the .NET code generating the webpage [no pretty colors to discern between tags, values & content].
7. No (apparent) errors.
8. Grr!
9. Opened Dreamweaver – code view only.
10. Navigated to the webpage in Firefox.
11. View(ed) Source of webpage.
12. Copy & pasted the source into a new Dreamweaver HTML document [with pretty colors, too].
13. Began matching all of the open tags with their closing tags [this took some time to sift through].
14. Found one error. Yea! [Okay, the error should not have existed in the first place. But it's getting fixed-NOW!]
15. Logged back into the CMS system.
16. Navigated through all of the GUIs to get to the .NET code that was responsible for display that section of code.
17. Insert fix.
18. View webpage in Internet Explorer and Firefox.
19. Content is still all over the place [in both browsers].
20. Grr!
21. Refresh webpage in Firefox
22. Repeat steps 11-13.
23. Found another error. [This better be the last error! ]
24. Repeat steps 15-18.
25. Yea! The content is aligned like it should be!

The errors: two nested div elements were not closed where they should have been when I first created the page in Sept. ’08. Like previous versions of the software, some element tags are auto-closed for the developer. However, the new software version is stricter, all tags are auto-close, which led to highly undesirable results: overlapping/improper nesting of tags making the browser to get confused and render a messed up webpage layout.

So lesson learned (again). Follow the three simple rules of XHTML and there won’t potential hours of frustration or a need to call for help (if you are a newbie).