Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Text Abbreviations, Addresses, and Citations

Nils Eriksson
Nils Eriksson
3,396 Points

Semantic meaning of your page

Hi Love the site! Im wondering what nick means when he says Semantic meaning, the word semantic has not been defined in the course. And when i looked it up it said that Semantic = Meaning.

Tnx :)

1 Answer

Ryno Botha
PLUS
Ryno Botha
Courses Plus Student 4,055 Points

Labelling 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.

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:

+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. 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.

+Mobile phones can switch to a numeric keyboard when they see a form input of type "tel" (for telephone numbers).

Check:

http://changelog.ca/log/2006/11/19/what_is_semantic_html