What does “semantically correct” mean?

by

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

More Related Contents:

  1. Applying an ellipsis to multiline text [duplicate]
  2. How to modify the fill color of an SVG image when being served as background image?
  3. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  4. CSS – How to Style a Selected Radio Buttons Label?
  5. Style input type file? [duplicate]
  6. Table with fixed header and fixed column on pure css
  7. How to display scroll bar onto a html table
  8. Why can’t I center with margin: 0 auto?
  9. How to apply CSS page-break to print a table with lots of rows?
  10. Why display grid with 100% in grid-template-columns goes out of body?
  11. Can I use non existing CSS classes?
  12. Remove default text/placeholder present in html5 input element of type=date
  13. issue with CSS media queries(scrollbar)
  14. How to resize an image to fit in the browser window?
  15. CSS: Workaround to backdrop-filter?
  16. how to overwrite css style
  17. How to create a curved speech bubble?
  18. Make an image width 100% of parent div, but not bigger than its own width
  19. Force an image to fit and keep aspect ratio
  20. HTML Div border not showing
  21. How do I assign multiple classes to one HTML element? [closed]
  22. How to center horizontally and vertically?
  23. How do I select an element that has a certain class?
  24. How to change the text color of first select option
  25. How to use nth-child for styling with a table with rowspan?
  26. What does the question mark at then end of a css include url do?
  27. How to transform each side of a shape separately?
  28. CSS nth-match doesn’t work
  29. CSS Grid with variable number of “auto” rows, but one row should take “1fr”
  30. How to create a ribbon shape in CSS

Leave a Comment