Each website is like a book, and each individual HTML page can be considered a chapter of this book. This common analogy can help you to visualize how to break down a website into it’s smaller, semantic components. The ‘chapter’ may contain common, re-usable elements such as paragraphs, block-quotes, headings or even bold and italicized text.
Other example of semantic elements are:
• Lists of Items
• Headings
• Navigational Elements
• Tabular Data
• Address or Contact Info
• Event Details
In order to implement semantic HTML, some decisions should be made before one line of code has been written on the website.
Who reads only the HTML of a website?
Screen Readers
Visually impaired or blind users on the internet may access your website using screen-reading software. This software goes through the code of the website to communicate verbally what the contents of the website are to the screen-reader users. Visual design has no meaning to this software.
Search Engines
Search engines are often dubbed “your most common blind visitor,” as they navigate a website just as a blind person would with screen reader software. Search engines are not interested in visual design, they tend to prefer lean, meaningful HTML markup. The more accurate the code is at explaining the website’s meaning, the better your website will do in search engines such as Google. Unnecessary implementation of HTML code will just slow search engine spiders down.
Developers
Other developers often have to update code that you may write, so it’s good to think if we all start coding in a common, standardized language that it may become easier for us to maintain and develop on other peoples websites.
Mobile Phones
Mobile phones are getting better at rendering HTML documents, but some phones can attempt to do things with your website that can make it unreadable. If you provide a consistent, semantic HTML foundation to the mobile phones browser, chances are your website will work In a more logical manner on the users end.
Standard Users
Visual users will benefit from the visually designed website, but may sometimes have problems seeing these designs the way you may have intended for them originally. The internet is unpredictable when it comes to how users may view your website, and on what device, so when things fall apart you should have developed robust HTML code that can handle this.
Examples of this could be viewing the internet on older browsers, text-only browsers, mobile devices or even gaming consoles. Backwards compatibility ensures that more people see your site now, and also for the future when people view your website in browsers or devices that do not even exist yet.
What tools do I have to convey semantic meaning in my code?
Semantic HTML exists today, it’s just that a lot of people are not using it correctly at the moment. There have been abuses of the intended uses of HTML elements to achieve visual effects in the past that could not be achieved without implementing hacks or incorrect code. Now, with the modern landscape of browser development and CSS support, hacks are no longer necessary to achieve these visual effects, and we can concentrate on the semantic meaning of our code once again.
Simple steps such as avoiding use of tables for layout, separating your content layer (HTML) from your presentational layer (CSS), using external CSS files, and validating your HTML markup will get you started in the right direction.
POSH (Plain Old Semantic HTML) is a concept of recognizing the patterns of semantic HTML development and applying these to your everyday projects. It is not necessarily a technology, but rather a new way to consider the uses of older, ubiquitous technologies such as HTML and CSS, and how we use them.
Microformats also extend your toolset by creating HTML compounds (existing HTML grouped in a specific structure) that also convey extra semantic meaning. Microformats have been around for a couple of years, and help users identify solutions for elements that are not defined properly. Examples of content being identified as Microformats content would be events, reviews, contact details and resumes.
How do I get started?
If you are about to code a website, the best thing you can do is print out the Photoshop mockup and step away from the computer. Have a look at what you are about to code, and start to break it down into smaller components that seem logical to you.
Think about the hierarchy of headers and how all the information relates to each other and start penning in what you think the primary header is, what the sub-headings are or possibly what might be an unordered list, and this will give you a great start before you have even opened up your favorite text editor.
Once you have thought through this process you are ready to start coding and exploring the world of semantics.
–
From the NoD Sponsor:
Sessions Online Schools of Art and Design is an accredited online graphic and web design school offering:
- Web design classes and web design Certificate Programs taught by renowned design instructors.
I like your point about stepping away from the computer and break down the psd file. I find when I do this I work faster.
I also find validating the website half way through also helps because towards the end of the construction your a bit over the site.
Yeah, some good points made, however there are always two sides to a story so I’m not sure I completely agree.
Just seeing how easy it is to spam .edu blogs. When my results are complete I will inform you of them.
Website organization is a critical component to consider adding to your html design as making your site easily “navigatable” to viewers is important. The whole reason for the website is to make it available to visitors who share your interest so be sure to incorporate a design that will be user friendly.
When I originally commented I clicked the �Notify me when new comments are added� checkbox and now each time a comment is added I get four emails with the same comment.
Nice read, thanks!
Nothing to complain about, I totally agree.Thanks for the hard work!
Thank you for posting this! Just what I’ve been searching for. Great info!
*Aw, this was a really nice post. In idea I would like to put in writing like this additionally ñ taking time and actual effort to make a very good articleÖ but what can I sayÖ I procrastinate alot and by no means seem to get something done.
Nice post!straight to the pointi have emailed a link to my friend Thanks for all your help
Fantastic writeup post on the site man, I truly like the appearance and also the feel of this kind of webpage. You write positively well, you have got to be a knowledgable guy. Will most certainly come back
grand site, I’m adding a bookmark now! Thanks!