What is semantic design?

To reiterate what Chris is explaining - "Semantic Design", when used in the context of web design, usually refers to the clarity of the code.

Let's take a quick look at how Merriam-Webster defines "semantic":

1. of or relating to the meanings of words and phrases

The key word of this definition is meaning.

For example, if I were to create a web page and add a heading to the page, I could code the following:

<div class="big">Page Heading</div>
<div class="small">Content of my page</div>

This is perfectly legal, but not very semantic. When a web browser interprets the code and renders it as a web page - it really doesn't know what "Page Heading" is referring to, even though it may display it in a large font because my CSS class defines it as such.

On the other hand, if one were to code the page like this:

<h1>Page Heading</h1>
<p>Content of my page</p>

This is more semantic, since the code is telling the web browser by using the h1 tag, that it is the level 1 heading. The p tag tells the web browser that the content within it is paragraph text.

h1 gives meaning to "Page Heading".

p gives meaning to "Content of my page".

While both code will display the same thing in a browser, semantic meaning in the code is important for screen readers, search engines, etc. - hence, it is desirable to use semantic design to give meaning to what you create.