What Does "Semantically Correct" Mean

What does semantically correct mean?

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 (<ul> or <ol>) should generally be used to group similar items (<li>). You could use a div for the group and a <span> for each item, and style each span to be on a separate line with a bullet point, and it might look the way you want. But "this is a list" conveys more information.

Fits the ideal behind HTML

HTML stands for "HyperText Markup Language"; its purpose is 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.

Makes it more useful

All of this semantic labeling helps machines parse your content, which helps users. For instance:

• Knowing what your elements are lets browsers use sensible defaults for how they should look and behave. This means you have less customization work to do and are more likely to get consistent results in different browsers.
• Browsers can correctly apply your CSS (Cascading Style Sheets), describing how each type of content should look. You can offer alternative styles, or users can use their own; as long as you've labeled your elements semantically, rules like "I want headlines to be huge" will be usable.
• Screen readers 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. A blind user can hear the legend text and decide, "oh, I can skip this section," just as a sighted user might do by reading it.
• Mobile phones can switch to a numeric keyboard when they see a form input of type="tel" (for telephone numbers).

Is it semantically correct to use a b element to mark up keywords without highlighting them?

Styling doesn’t change the meaning. So if it were appropriate in some context to use b with styling (e.g., making it bold), it’s also appropriate in that context to use b without any styling.

It’s conceivable that a user-agent makes use of these b elements, even if you don’t style them or don’t do anything else with them.

An actual example: text browsers (or feed readers etc., i.e., any UA that doesn’t support CSS) might display them in bold by default.

class name for the b element

However, the class name no-bold is not ideal, as

• it couples the current styling to the content (you might want to change the styling without also having to change the HTML), and
• it doesn’t describe what the purpose of the b element is (not useful for consumers of your markup).

This goes for any element, but the spec explicitly mentions it for the b element, too:

[…] authors can use the class attribute on the b element to identify why the element is being used, so that if the style of a particular use is to be changed at a later date, the author doesn’t have to go through annotating each use.

A more suitable name might be definition-keyword or something like that.

What does the word semantic mean in Computer Science context?

Semantics are the meaning of various elements in the program (or whatever).

For example, let's look at this code:

int width, numberOfChildren;

Both of these variables are integers. From the compiler's point of view, they are exactly the same. However, judging by the names, one is the width of something, while the other is a count of some other things.

numberOfChildren = width;

Syntactically, this is 100% okay, since you can assign integers to each other. However, semantically, this is totally wrong, since the width and the number of children (probably) don't have any relationship. In this case, we'd say that this is semantically incorrect, even if the compiler permits it.

What is the semantically correct way to break these lines?

talking about semantic, this could be a good usecase for <address> if the contact information provided is related to the document (I may suppose, since I see a license information included¹): see http://html5doctor.com/the-address-element/ for further reference about it.

(If not, the same page on html5doctor is suggesting to simply use a pararaph with the hcard microformat using <br> where it's necessary)

So in the first scenario I would go with

<footer>
    <p>
       License: <a href="#" rel="license">Creative Commons BY</a>
    </p>
    <address>
        Email: <a href="mailto:#">email@mail.com</a>
        Telephone: <a href="tel:#">0123456789</a>
    </address>
</footer>

and

footer p { margin: 0; }

footer address {
   font-style: normal; /* just because of default browser style */
}

footer address a:after {
  content: "";
  display: block;
}

see jsbin example: http://jsbin.com/ajohur/1/edit

---

⁽¹⁾ Edit — as pointed out by @unor, the information license should probably stay outside the address element, so I wrapped it in a paragraph.

Semantically Correct HTML Checkbox lists

Labelled rows and columns? This is almost certainly a case where a table is the correct thing.

Imagine that, once the user has made their selections and submitted the form, you then display their choices back to them. It would clearly be correct to use a table to display the gathered data, so it is correct to use a table to display the form that gathers the data.

Is it semantically correct to nest an article element within a li element?

There is nothing semantically incorrect about it, but it is not really necessary. The <ul> and <li> elements aren't really adding anything here, unless you are taking advantage of their default styling. Simply putting the <article> tags directly within the <section id="popular"> should be sufficient, and it reduces the complexity of your page as well as its size.

To determine whether something is semantically correct and useful in HTML, ask yourself a few questions. Are you using each element for its intended purpose? For instance, it's not semantically correct if you use an <a> element for a button, as <a> is for hyperlinks, <button> is for buttons. Do you need each element you are using in order to convey all of the semantic information about your content (sections, headings, links, etc)? Is there anything meaningful that you intend to convey that isn't expressed by use of appropriate elements? Having lots of extra meaningless elements usually isn't harmful, but it adds clutter, and it may mean that there are semantic distinctions you are conveying visually but not encoding in a way that a screen reader or automated bot or browser that presented the information in a different format could make sense of.

---

Related Topics