Specialize your HTML for accessibility and better SEO

In this article I'm going to write about difference between semantic-logical(also referred to as logical) and physical-visual(also referred to as physical) HTML tags.
If you are not familiar with these terms don't worry soon you will learn what they mean and how you can use your knowledge to improve your projects.

What are semantic-logical and physical-visual tags?

In HTML there are ways to style a text and there are ways to set the meaning of the text for both browsers, search engines ,and some third-party software.
The difference between styling in HTML and setting the meaning defines semantic-logical and physical-visual tags.
As you may have guessed by the words semantic-logical tags are used to set a meaning for text and physical-visual tags are used to style the text.
Well you may ask what's the difference between styling a text and setting a meaning for a text.
In a very short description setting the meaning will help search engines and software understand what's the text and how important it is and styling the text will define how software should render the text.

Look at the example above.
What you are seeing might fool you in to thinking of there is no difference in using this two tags and the answer is in the look of them in the browsers yes but the <strong> tag will help search engines and third-party software like Jaws for blind people to use lower tone voice for this part.
I hope you understand difference of styling and setting a meaning for text now.

SEO: Should I care?

Well as far as I'm concerned this is not relevant any more and does not have a huge effect of indexing on any of the major search engine like Google, Bing, Yandex ,and Baidu and if you are worried about search engines like DuckDuckGo and Startpage don't worry they all use indexing data of bing and google as far as I'm concerned.

Also Matt Cutts of Google have made a video on Google Search Central that confirms the fact that google makes no difference between semantic-logical and physical-visual tags in indexing of websites.

Does this mean you shouldn't care? well no lots of screen readers still use semantic-logical tags and do not apply the physical-visual styles to the reading process so this is a very good practice for user-experience and like lots of other outdated technologies still many people believe that it have some positive points for your SEO like server-side-rendering.

Some physical-visual tags

• <b> tag:

  <b> tag is used to style the text as bold.

• <big> tag:

  <big> tag is used to increase the font size.

• <blink> tag:

  <blink> tag is used to make the text blink.
  I know it's weird and probably the most of new generation of developers haven't heard anything about this tag.
  This tag isn't a HTML standard.
  It was first introduced by Netscape(very old browser but very popular at it's time) and then other browsers implemented the tag too.
  At the first it was very fun;
  It made background and foreground switch and users loved it but soon developers abused the tag too much and users become frustrated so Netscape dropped the tag at version 6 and soon other browsers stop using the tag too.

• <i> tag:

  <i> tag is used to style text as italic.

• <s> tag:

  <s> tag is used to put strike over text.
  It become deprecated in HTML 4.

• <small> tag:

  <small> tag is used to decrease the font size.

• <strike> tag:

  <strike> tag is used to put strike over text.
  It become deprecated in HTML 4.

• <sub> tag:

  <sub> tag is used to make text subscript.

• <sup> tag:

  <sup> tag is used to make text superscript.

• <tt> tag:

  <tt> tag is used to show text in monospaced typeface.
  It become deprecated in HTML 5.

• <u> tag:

  <u> tag is used to put underline under text.
  It become deprecated in HTML 4.

Some semantic-logical tags

Well there are lot's of tags introduced in HTML 5 that are used to set meaning for text but they are not subject of this article as we are talking about old concept of semantic-logic and physical-visual tags.
You can find new HTML 5 tags that can help you a lot with meaning in lots of articles but one article that have a good list of this new tags is HTML 5 Document Structure: Elements & Examples.
I hope it will help you.

• <em> tag:

  <em> tag is used to indicate that characters should be emphasized in some form(usually displayed in italics).

• <strong> tag:

  <strong> tag is used to emphasize characters(usually displayed in bold).

• <code> tag:

  <code> tag is used to indicate a sample of code(usually displayed in monospaced typeface).

• <kbd> tag:

  <kbd> tag is used to indicate text that user should enter(usually displayed in monospaced typeface).

• <var> tag:

  <var> tag is used to indicate a variable(usually displayed in italics).

• <cite> tag:

  <cite> tag is used to indicate a short quote or citations(usually displayed in italics).

Resources

• StackOverflow(html) - What's the difference between <b> and <strong>, <i> and <em>?

• Seobility Wiki - Strong and Bold Tags

• YouTube - Is there a difference between the "strong" and "b" tags in terms of SEO?

• Code Engineered - HTML5: The Semantic Difference Between Bold and Strong

• O'Reilly - 4.5. Physical Style Tags - HTML & XHTML: The Definitive Guide, 6th Edition [Book]

• Tripod - Physical and Logical Tags

Find Me

• @AriaAzadiPour on Twitter