All HTML elements can be identified as either semantic or non-semantic. Think of the word “profile.” It makes a big difference if that bit of text is just plain text, or in an HTML heading or button, for instance. If it’s just plain text, its meaning is simply the dictionary definition of “profile,” but if it’s in a button, then there’s additional meaning. It’s an actionable element, it can be activated with the keyboard, mouse, or voice command, it performs some action on the current page, etc.
All that additional meaning is the semantics of the element. If the text were in a first-level heading element (<h1>), it would mean it was the main page topic. If it were in a lower level heading, it would denote a change to a sub-topic. Some elements are non-semantic containers that aid with visual layout, but provide no other information.
Div, span, and paragraph are examples of non-semantic containers. A div, span, or paragraph are ignored by assistive technology, since they’re only used for visual layout. Keep this in mind when writing HTML. Alway use the appropriate semantic element for the purpose. If you’re adding a list, use <ul>, <ol>, or <dl>. If you’re presenting tabular data, use a properly constructed table, and so on.
When a user of assistive technology comes across a content element, they need to know what it is, and what it’s for. Is it simply text to be read, a button to perform an action, a heading from which content structure can be inferred, or something else?
Comments