Semantic HTML Practice 01 – VS Blog

As mentioned in my earlier post about the Crafting Meaningful HTML course, my first semantic HTML practice was to ‘take markup from existing pages and make it more semantically accurate – ditch the divs!’

For my first effort here I remembered seeing a page on VisitScotland.com which would be a candidate for using a definition list.

The post, 18 BRAW SCOTTISH WORDS & THEIR MEANINGS, is literally a definition list – it contains 18 definitions of Scottish words as well as some nice written and audio examples of them in use.

Existing markup

To start with, I saved a copy of the page from Chrome – this also meant that I had a copy of the images used, and an actual ton of other files/things! There is DEFINITELY a lot of optimisation that VisitScotland could be doing there!

When I eventually scrolled to the content, there was a lot of room for semantic improvement:

  • The heading for each word was an h2, the same as the heading for the post itself
  • A number of <strong> and <em> tags were being incorrectly used to style content
  • A series of <p> tags made up the bulk of the description – with no relationship shown between them

Each word is defined and demonstrated within the following format:

<h2>The Word</h2>
    <div>
        <img />
        <p>Caption - the main definition</p>
</div>
<p>Statement about the word</p>
<p>
    <strong>
        <em>In a sentence:</em>
    </strong> "Example of word in a sentence"
</p>
<p>
    <strong>
        <em>In English:</em>
    </strong> "The same example, in English"
</p>
<p>
    <iframe>Embedded item from Soundcloud to demonstrate 
            how the word is pronounced.
    </iframe>
</p>

 

Updated markup

I switched off the styles in Chrome, to get a better view of what the markup looked like when rendered without them – a better indicator of the relationship within the markup.

I set about reworking the markup using a definition list (<dl>) as the framework and making use of a span to add the styling previously created with the <strong> and <em> tags:

 

<dl>
    <dt>The Word</dt>
    <dd>
        <img/>
    </dd>
    <dd>
        The main definition
    </dd>
    <dd>
        Statement about the word
    </dd>
    <dd>
        <span>In a sentence:</span> 
        "Example of word in a sentence"
    </dd>
    <dd>
        <span>In English:</span> 
        "The same example, in English"
    </dd>
    <dd>
        <iframe>
            Embedded item from Soundcloud to demonstrate 
            how the word is pronounced.
        </iframe>
    </dd>
</dl>

The definition list renders the content of the <dt> and <dd> tags indented from the main body content which adds a bit more visual distinction between it and the rest of the copy.

I think that the markup itself also looks much neater, more organised than before.

Summary

I didn’t focus on trying to match the existing styling, that’s not what I’m working on just now and I’m staying clear of trying to make any practice piece like this ‘too complete’.

I’m confident that the existing visual output would be easy to replicate with this new approach to the markup, but the content will be that much more accessible to a wider audience because it’s been marked up in a much more descriptive way.

This task has proven to me that there is a clear benefit to applying semantic markup like this and I expect the same to be shown in my next couple of practice tasks that will take the same approach as this one.

 

Tags: