While designing webpages every web designer will encounter the ‘div‘ and ‘span‘ tags. These two tags are examples of html5 non-semantic tags because they do not give a description. Furthermore they do not add structure to the document. Even though the ‘div’ and ‘span’ tags are considered non-semantic they are very commonly used due to their convenience. The ‘div’ and ‘span’ are used when a web designer requires a generic tag for some purpose. Many web designers use the ‘div’ tag incorrectly as they neglect the HTML5 semantic tags in favour of using a ‘div’ tag with an ID. The ‘id’ and ‘class’ attributes are an important aspect of CSS and javascript.

Study the code snippets below to gain an understanding on how to first of all use ‘div‘ tags and then ‘span‘ tags.

In the example above on line 8 a hashtag ‘#’ precedes the word ‘container’. The hashtag ‘#’ is an id selector in the CSS language. So the code on line 8 is selecting the element in the html5 document with an id of ‘container’ and on line 9 it applies a background color of lightBlue to the element with an id of ‘container’. In this example the element with an id of ‘container’ is a div element.

HTML5 Non-semantic tags - a div with a lightBlue background-color.
The ‘div’ element with an id of ‘container’ has a lightBlue background-color.

Now for the span element. Below is another code snippet.

HTML5 non-semantic tags. Span element with red text.
Span element text turns red!

HTML5 Non-semantic Tags

While ‘div’ and ‘span’ are non-semantic this does not mean you should ignore them. Some of the most talented and creative web designers use the ‘div’ and ‘span’ as it allows for flexibility.


Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *