Introduction to Web Semantics

December 27, 2012

Topics: Semantics, Web Development, Web standards.

Style is important. There is no debate around the proposition that people want a website that looks good. This is for a very good reason – an attractive website will draw in your customers, build their confidence in what you can provide for them, and keep them engaged with your website. But a great website can’t just look pretty. You can create a gorgeous website with nothing but a single large image. This can be beautiful graphic design – but nothing but design.

adjective: of or relating to the study of meaning and changes of meaning

Of course, that’s an extreme example. Very rarely do you run across a website designed that badly. (I’d love to say never, but I have seen it.) Such a design is completely lacking in web semantics – the design conveys beauty, but no meaning. Conveying meaning is the essence of web semantics.

HTML is called a structural markup language. This means that the HTML (or XHTML) tags are used to define the structure of a document. Any document has structure – look at your Microsoft Word document, and the structure of your report is very clear – it contains images, paragraphs, bulleted lists, numbered lists, and headings. When an HTML tag is used to mark-up text it is intended to show what that text is being used for – to define it’s semantic function.

This is the intention of HTML. HTML should clearly describe the purpose a block of text serves within the page. The reality is frequently less than perfect, however. The creation of the HTML language stream, in reality, became polluted. It began to include code which did not serve any structural purpose – tags like <font>, <bold>, or <blink>. A lot of this is due to extensions created by the leading browsers, Internet Explorer and Netscape, which accrued such extensive use that they were (unfortunately) added to the HTML specifications.

In addition to this, many structures began to be used for purposes outside of their definition. The most common example is the use of <table> tags to create the beautiful layouts designers imagined. Other examples include <blockquote> to create indented text or <p> to add extra white space into a design.

Why do I care if my document has "semantic" meaning?

First of all, for the life of your website, semantic meaning has tremendous value. If you quote text and use <font> tags and tables to set them apart, you have no way to specifically identify quoted texts in your site. If, instead, you make use of the semantically correct <blockquote> tag, you can identify all block quoted material and alter their appearance using CSS or perform other web interactions on just those texts. If you intend to alter your website in the future, design using S and semantically valid HTML will be an enormous aid.

Secondly, search engines are better able to process semantic HTML than code without meaningful markup. A search engine can give higher priority to text in your site that is defined as a heading, as emphasized text, or as a navigation block. The robot indexing your site knows that headings are more definitive about the subject of a document. They may not analyze all of your <font> elements to attempt to figure out which one is acting as a heading.

Lastly, semantics provide "hooks" for assistive technology to use when a visitor with an impairment browses your website. Proper heading tags provide an internal navigation structure for screen readers, table headers tell listeners where in a table they are currently navigating, and help explain the meaning of the data being accessed. Best practice accessibility depends on an understanding of the way data is being used — the structure of the information. The visual presentation is irrelevant to many assistive technologies.


The core of a website is the content it presents. However beautiful your design, it’s the content alone which will really win your visitors. The best possible presentation of your content is only possible with semantic web design, where search engines and humans have an equal ability to discern the meaning of your content.

Related Reading

Have something to contribute?

« Read my Comment Policy

2 Comments to “Introduction to Web Semantics”

  1. Part of the way languages develop is to adapt the usage of terms from one environment to another; I don’t see any reason that you couldn’t use the term ‘visual semantics’ to describe manuscript illustration.

  2. I deal primarily with medieval manuscript illustration. I am considering using the term “visual semantics” to describe what I do. A few years ago, when I was on a flight to Callifornia to give a conference paper, I described what I was doing to my fellow passenger. I referred to the layout of a typical page in a medieval manuscript where I intended to show how the main text, the border on one side and the annotation on the other, as well as the marginal illustration all related to each other to create meaning. My fellow passenger, who worked in the Silicon Valley, exclaimed, “Oh, the visual semantics!”

    Such features of the layout were common in late medieval manuscripts, helping to organize the text and serving as finding aids. My intention is to go beyond description of the artistic and textual elements to show how they all contribute to meaning for the audience of the book. In some ways, this sort of layout is a precursor to modern web design. Since new and more restrictive definitions seem to have developed for the term, “visual semantics” in the computer world, would I be correct in adapting it for the ways in which the features of the layout of the pages in medieval manuscripts help to create meaning for the reader?