What is the point of span, ul, li, h1 etc elements (and others) when styled divs can mimic their functionalities?

Question

I'm creating user customizable HTML templates and deciding on what elements types to use. On the one hand I could use the most appropriate HTML element type for each type of content - ul's/li's for lists, h1's, h2's (etc) for headings and so on. On the other hand, I could just use div's with class attributes. In fact, I'd have to use class attributes with either approach and I'd have to additionally zero some of the nasty default properties on some HTML element types if I used the former approach.

Given the flexibility of CSS it is quite easy to use div elements for virtually every element containing text, and probably possible to do so using less CSS. Should I try to use h1 to h6's, spans, ul's, li's, hr's, p's etc for their intended purposes, or just go with divs?

Answer 1

You should the appropriate tags because they convey the semantics of your data. There is a difference between saying "this is a header" and "this is large, bold text". This information is valuable to screen readers, search engines and other kinds of user agents that aren't your "normal" browsers. Furthermore, people who don't use your stylesheets (for whatever reason) will still be able to read it, but they won't if all your tags are divs and spans (at least not as easily).

Answer 2

In a word, yes. You should use the appropriate element, and for more than a few reasons:

Screen Readers use the tags to determine how much importance to place on the information, or where a new paragraph starts, etc. Divs mean nothing to them.

Search Bots use your H# tags to determine importance.

Answer 3

One word, Semantics.

For me at least the tags have meaning beyond what they output on the screen for a user. The semantics of the page in HTML are (off the top of my head) the context of the elements and the way that they fit together in the page.

For example, in SEO terms, most pages should have a nice clear <h1> tag to show the title of the pages content. Other elements like this have additional meaning based on what tag it is and how it appears within the page.

Properly formed code will always (!) have correctly nested titles, sticking with heading tags,

<h1>The Title of my page</h1>
<h2>The subtitle of my page</h2>
<h3>Perhaps the title of a section</h3>

So by using the tags for the purposes they are intended you can also give the brower and thus the user a greater insight into how your code is formed.

Another reason might be that the user hasn't loaded your stylesheet, at which point all your divs will go all over the place. Such as using a mobile browser on limited data plan.

Another reason I think would be that your code will be unreadable later down the line. A huge morass of divs with classes will not only boost the size of your pages, take longer to code, it will hellishly confusing when you approach it again further down the line.

To return to the point of semantics, under UK law, you are obliged to cater for users with Disabilities. By using divs, you are not. A screen reader will have trouble decyphering your code due to it's inherant crazyness.

:)

Answer 4

There are agents other than purely visual ones. For those, the underlying elements can be important. We're not just talking about the accessibility and non-mainstream browsers that sadly many visual designers like to ignore; the case even they are concerned about is the search engine.

A search engine knows that text in an <h1> is more significant than text in a <p>. A search engine knows that text in a <span> flows together to form contiguous phrases with its surrounding inline text, whereas text in a <div> is a separate line (even if you've used CSS display: inline to change how it appears).

You don't really get anything by using <div class="h1"> instead of the semantically-most-appropriate element. You might want a few more reset-CSS rules if you're using <ul>, <table> or <form>, but that's about it.

Answer 5

These tags all describe meaning or with a nice word, semantics. Visually impaired people who uses screen readers depend on that the web page is built with tags that tells them what the different chunks of text on the page is. E.g. H1, H2, Hn all tell them that it's a header. P tells them that it's a paragraph. UL/LI tells them that it's a bulleted list. etc. A person with a screen reader uses these tags to scan through the page. They can "see" how many header tags (H1, H2, Hn) tags that are on the page and then just browse through them to find the section they want to read.