Semantic Markup: Yup, Still Important
The talk of semantic markup has been discussed and written about for many years now. It has been preached by all of the greats in our industry and by many others who aren’t as well-known. The importance of writing semantic markup is to make sure the content is described properly. Sure, we can use spans, divs, and ps for everything, but at the end of the day they may not be doing justice for the content.
My thoughts
When I first started learning more about the web and HTML, I thought it was simply a “best practice” to code semantically. I soon discovered, and still am discovering, the importance of it.
I believe we were given the elements in the current specifications for a reason. Each element has a purpose. Unordered lists are for lists of related content, heading elements are for showing content hierarchy and importance, and blockquotes are for quoting content. These are just a few examples of elements that were created to serve a purpose and describe the content it is serving. I found an appropriate quote that describes my feelings in an older article on this very subject:
After all, if you open a can labeled ‘Beans,’ you expect to see beans, not peaches.
“Semantics — Why Bother?” by Mel Pedley
The facts
Although it is possible, and a lot of people still do it, it is not the best idea to use just any element for certain content. Let’s look at one example:
1 2 3 4 5 | <div class="main-heading">Jake Przespo's blog</div> <!-- or --> <h1>Jake Przespo's blog</h1> |
Both of these options are valid XHTML and both can be styled with CSS exactly the same. However, using the h1 element over a div will provide many more advantages. First it will allow search engine spiders to crawl your site and provide better relevance in search results for those keywords. Spiders pick up on content hierarchy by looking at heading elements (h1–h6). It also provides structure that screen readers use to aid users with disabilities. Some screen readers allow users to navigate through a website using headings and other elements. Using semantic markup is key to increasing a website’s accessibility.
What the future holds
As many of us know, the HTML5 specification will introduce many new elements to the language. For example, there will be new structural elements such as header, footer, and nav. There will also be new elements to better describe smaller pieces of content like time and meter. The list continues on, but the point is: HTML is moving towards being more semantically correct when describing content. While this continues to happen, spiders will continue to look for these elements when they scan websites, screen readers will begin to search for new elements while increasing the functionality to read current elements, and other developers will continue to code more semantically correct as well.
There is no better time than now to start coding with better semantics. After all, “Content is king” right?
Other resources on semantic markup:
posted on Mar 23rd 5:14 pm
Just playing devil’s advocate here, but how do you feel about HTML semantic markup when the HTML code (and possibly CSS) is being compiled, such as when using Adobe AIR or their competition’s product Titanium. Should developers still strive for 100% conformance to semantics, or is it forgivable if they purposefully skip a particular markup (such as using a span tag in place of an h1 or h2 to avoid default internal application browser markup)?
There are still certain times when I’m uncertain on the proper markup. Should I use an “EM” (emphasis) in place of “I” (italics) all of the time as was originally suggested? Sometimes italics is meant to show something other than actual emphasis, such as when referencing titles of magazines or bibliographic information. Using emphasis on such things seems awkward, but the italic tag is deprecated – so which is right?
posted on Mar 24th 9:52 am
I agree about using the “h” tags over div’s where appropriate, for SEO reasons; but I still prefer a plain old div for my header instead of a header tag/etc. (repeat that example for other elements…footer/nav/etc..)
I look at the div tag as a blank canvas that I can do whatever I want with. I like knowing there are no styles properties already assigned to it that I need to work with or overwrite.
I like that you are so into the new HTML5 tags, if everyone agreed about the best way to do something then life would be boring. I am excited to see the pros/cons as more sites use them. I am definitely open to the idea of using them in the future, if it makes sense for the way I build sites…but for now, give me my div and I will be happy :)
Keep up the great work on the articles!
posted on Mar 24th 5:20 pm
@Brendon
My article was mainly focused for semantics on the web (guess I should have clarified), but I see your point. I cannot really speak for Adobe Air because I haven’t really worked with it. However, I would say that semantics may not matter as much, especially for SEO reasons obviously. I guess for Adobe Air, it would be good practice, but not as necessary.
Actually, I would probably use an
ielement for things like that because, like you said, it does not have emphasis, only styling. Theielement is not deprecated, according to W3C anyway.@Seth
I’m with you for using
divs, but I just try to keep them to a minimum. I will try to use a more appropriate element for the content. To me,divs are for structuring the page more than they are for specific content.I haven’t actually played too much with HTML5, but am excited to see where it ends up. We’ll have to see…maybe in the next 20 years hehe.
posted on Mar 25th 5:28 pm
I was just playing devil’s advocate as I knew you meant this for web design. I was simply curious on your take to how far you believed in it. It could be beneficial for documentation-by-code reasons, though obviously (in this case) SEO is not important unless the exact same UI code will be used in a web-project. Also to clarify, I use HTML/JS/CSS in my AIR projects, most use Flex. Either way, that’s a bit off-topic.
I should have clarified a bit further on the use of the italics tag – it’s deprecated in XHTML Strict, which I’ve been using for awhile now. To mimic it, you need to use a styled span (or just ignore deprecated warnings from validators on the very few pages it’s used).
I thought header/footer tags in HTML5 would have the same default styling applied as a standard DIV tag. Guess I’ll have to try it out. I want to make my blog system with a few new technologies, and HTML5 was one of them (for the template anyway).
posted on Mar 27th 11:02 am
Great topic, guys. Semantic markup has always (and will always) be important. HTML5 is doing a good thing in providing us even more semantic elements to work with. Essentially those
headersandfootersare thedivswe know and love, but have another layer of semantic meaning.In regards to alternative runtimes, I feel you’re still better off working with semantic markup if for nothing more than upping the quality of your work. Those applications will eventually conform and hopefully support assistive technologies, and using semantic markup now already has you prepped.
In regards to the
ielement to reference something, I’d suggest checking out theciteelement which was specifically designed to “contain a citation or a reference to other sources” which in this case makes perfect sense. Not that the style matters, but the browser default forciteis italicized.There are lots of explicitly valid elements that we can still hunt around to find, chances are if you feel like something is missing, it’s been there for years.
Personally, I’m glad this topic hasn’t died. I’m thankful for things like CSS Naked Day that annually remind us that yes, semantics are still relevant.
posted on Mar 31st 9:53 am
@Jonathan
I really am looking forward to the day where nearly every tag we use has a purpose. It just makes so much more sense, styling aside.
Good point about using the
citeelement. I forget to use that one sometimes.Thanks for commenting!