Search code examples
htmlsemantic-markup

In semantic HTML does the class attribute mean anything in the absence of CSS or Javascript?

For example, does the class film_review mean anything in <article class="film_review"> (example from MDN) if there's no CSS or Javascript interacting with the page, or does it provide semantic information?

Solution

  • It doesn't provide an information that contemporary browsers would interpret or use without CSS or Javascript per se.

    However it can carry semantic information - see e.g. microformats. For example, you could put an hcard

    <div id="hcard-John-Doe" class="vcard">
  <span class="fn">John Doe</span>
  <div class="org">Cool Institute, Inc.</div>
  <div class="adr"><span class="locality">Prague</span></div>
</div>

    on your page and it carries a semantic information. A search engine like Google could infer that "John Doe" is a name of a person located in "Prague". There are other microformats that can represent geo information, calendar events, etc.

    Anyone can write their own processor of HTML documents that would interpret class attribute values, so the answer is yes, it provides semantic information.

    Quoting from hcard microformat example:

    Per the HTML4.01 specification, authors should be using the element to indicate the "contact information for a document or a major part of a document." E.g.

    <address>
    <a href="http://tantek.com/">Tantek Çelik</a></address>

    By adding hCard to such existing semantic XHTML, you can explicitly indicate the name of the person, their URL, etc.:

    <address class="vcard">
    <a class="fn url" href="http://tantek.com/">Tantek Çelik</a>
    </address>