What does "semantically correct" mean?

Question

I have seen it a lot in css talk. What does semantically correct mean?

Answer 1

Labeling correctly

It means that you're calling something what it actually is. The classic example is that if something is a table, it should contain rows and columns of data. To use that for layout is semantically incorrect - you're saying "this is a table" when it's not.

Another example: a list should generally be used to group similar items. You could use a span for each item, and style each span to be on a separate line with a bullet point, but "this is a list" conveys more information.

Makes it more useful

The idea behind this is to help machines parse your content. For example, a screen reader for the blind can help them fill out a form more easily if the logical sections are broken into fieldsets with one legend for each one. The blind user can say, "oh, this section doesn't apply to me, so I can skip ahead," just as you would do by glancing at it.

Fits the ideal behind HTML

Since HTML stands for "HyperText Markup Language," it's intended purpose seems to be to mark up, or label, your content. The more accurately you mark it up, the better. New elements are being introduced in HTML5 to more accurately label common web page parts, such as headers and footers.

With semantic markup, you can more easily style your pages with CSS (Cascading Style Sheets), which is intended for that purpose.

Answer 2

It means that HTML elements are used in the right context (not like tables are used for design purposes), CSS classes are named in a human-understandable way and the document itself has a structure that can be processed by non-browser clients like screen-readers, automatic parsers trying to extract the information and its structure from the document etc.

For example, you use lists to build up menus. This way a screen reader for disabled people will know these list items are parts of the same menu level, so it will read them in sequence for a person to make choice.

Answer 3

"Semantically correct usage of elements means that you use them for what they are meant to be used for. It means that you use tables for tabular data but not for layout, it means that you use lists for listing things, strong and em for giving text an emphasis, and the like."

From: http://www.codingforums.com/archive/index.php/t-53165.html

Answer 4

See This

Answer 5

HTML elements have meaning. "Semantically correct" means that your elements mean what they are supposed to.

For instance, you definition lists are represented by <dl> lists in code, your abbreviations are <abbr>s etc.

Answer 6

I've never heard it in a purely CSS context, but when talking about CSS and HTML, it means using the proper tags (for example, avoiding the use of the table tag for non-tabular data), providing proper values for the class and id that identify what the contained data is (and using microformats as appropriate), and so on.

It's all about making sure that your data can be understood by humans (everything is displayed properly) and computers (everything is properly identified and marked up).

Answer 7

Semantics basically means "The study of meaning".

Usually when people are talking about code being semantically correct, they're refering to code that acrutately describes something.

In (x)HTML, there are certain tags that give meaning to the content they contain. For example:

A H1 tag describes the data it contains as a level-1 heading. A H2 tag describes the data it contains as a level-2 heading. The implied meaning behind this is that each H2 under a H1 is in some way related (i.e. heading and subheading).

When you code in a semantic way, you basically give meaning to the data you're describing.

Consider the following 2 samples of semantic VS non-semantic:

<h1>Heading</h1>
<h2>Subheading</h2>

VS a non-semantic equivelant:

<p><strong>Heading</strong></p>
<p><em>Subheading</em></p>

Sometimes you might hear people in a debate saying "You're just talking semantics now" and this usually refers to the act of saying the same meaning as the other person but using different words.