What is Semantic Markup

The world wide web is  growing at a rapid pace, and is expected to hit some 25 zettabytes in 2020. So the need for website owners to gain increased visibility in a web filled with noise due to massive amounts of information has never been more important. Top sites including Google, Yahoo! and Facebook realize this challenge and are promoting semantic markup to improve search results and more easily index key data. All that is left for you to do is ensure your website is coded in semantic markup including all the latest HTML protocols to give your website its best chance to rank highly in major search engines and Facebook!

So Just What is Semantic Markup?

So now you know the importance, let’s talk about the code change and explain it in a way that makes sense. Semantic markup is all about the code, and not about how the website “looks.” It’s about meaning and structure, not about formatting, colors, and fonts.

To best illustrate semantic markup, let’s take a look at these two code examples:

Example of non-semantic markup:

<strong>The Top 100 SEO Tips are the greatest thing since sliced bread!</strong>

Here are <b>three</b> great reasons why you should use Top 100 SEO Tips.

- real SEO techniques, not SEO theory from some dude

- they are totally free, not freeware or some other hype

- did we mention they are free? Come on, man!

Same Example using semantic markup:

<h1>The Top 100 SEO Tips are the greatest thing since sliced bread!</h1>

Here are <strong>three</strong> great reasons why you should use Top 100 SEO Tips.
<ul>
<li>real SEO techniques, not SEO theory from some dude</li>
<li>they are totally free, not freeware or some other hype</li>
<li>did we mention they are free? Come on, man!</li>
</ul>

Both code examples would validate perfectly as XHTML 1.0 Strict. The text in both is the same. The difference is in how the text is “marked up.”

In the first example, a bold tag (<strong>) is used to mark up the title and the word “four.” This adds visual emphasis in a browser, but recall that semantic markup is not about visual information, but about what information is in the code. Right now, there is no meaningful difference between the text “The Top 100 SEO Tips are the greatest thing since sliced bread” and the text “three” because both use the bold tag.(</strong>)

Contrast that with the second example. In this semantic markup, the title is marked up with the (<h1>) Heading 1 tag compared to the word “three” which uses the (</strong>) tag. The use of the Heading 1 tag lets search engine spiders immediately know that this is a top-level heading while the the word “three” is being strongly emphasized but as important.

Similarly, the first example lists all three reasons in one paragraph, separated by line breaks. The line breaks certainly help you to understand that there are four points when you view it in a browser, but as far as the code goes, it is just one big paragraph. The second example uses a bullet list (<ul>) to mark up each point as individual list items (<li>), so there is a lot more structure in the second example than in the first. Semantic markup describes (X)HTML code that is meaningful and has a logical structure. It doesn’t really have anything to do with how a particular piece of text should be displayed as a web page; it more has to do with what that piece of text is—that is, is it a heading, or a subheading, or a list, or a quotation?

Why Should I Use Semantic Markup?

Search engines process the HTML code of your website, and those HTML tags actually mean something to them! In particular, some search engine spiders will look at the keywords in your heading tags and give them a slightly higher “weight” than the other words on your page. It is similar to how you might scan the headings of an article before deciding if you really want to read the whole thing. So, the more logically you mark up your code, the better the search engine is able to do its job of determining how relevant your page is to a certain topic.

How Should I Switch to Semantic Markup?

Unless you’re writing your page content in Notepad, there is a good chance you are going to get some messy code if you copy / paste from MS-Word, FrontPage, or most other webpage creation software. The best way to clean up your code and utilize semantic markup is to copy your existing code, then paste it into Notepad. This will take out all the additional MS-Normal and font description labels. Once you have your text in Notepad, go through and make a hard return between headings, paragraphs, and lists. Then insert semantic markup tags for each of these as follows:

Headlines – use <H1, H2, H3, H4, H5, or H6> to denote the structure of your headlines with <H1> being the top.

Paragraphs – use <p> to start your paragraph and </p> to end it.

Bold Items – use <strong> directly in front of the words you want to bold and </b> directly at the end of the last word or letter you wish to bold.

Bullet Lists – use <ul> before the start of your list followed immediately by <li>at the beginning each line item and </li> at the end of each. Be sure to close your bullet list with </ul>.

Numbered Lists – use <ol> before the start of your list followed immediately by <li>at the beginning each line item and </li> at the end of each. Be sure to close your bullet list with </ol>.

Don’t Forget to Download Your Free Copy of the Top 100 SEO Tips