Web documents contain content. The content is wrapped (marked up) using HTML tags. Each tag has a certain meaning (semantics). A browser displays the content that is nested inside a tag in a certain way depending on the tag.
Let’s take an example. Most documents have a main title. Suppose this is the title of a document:
Our Solar System Planets
Which HTML tag should we use to wrap this title? Suppose that we want the title to be boldfaced and on its own line. We could use these tags (the <b> tag means “bold” and the <br> tag means break/new line):
<b>Our Solar System Planets</b>
These tags are being employed to achieve the desired appearance.
Alternatively, there is an HTML tag that has the semantics: “The content of this tag is a top-level document title.” Here the title is wrapped using this tag:
<h1>Our Solar System Planets</h1>
Now we are selecting HTML tags based on their purpose, not their appearance. This is the right approach. Web Standards Design says: choose HTML tags based on their purpose, not their appearance; use CSS to specify appearance.