Extending Semantics & Accessibility - Learn to Code Advanced HTML & CSS
Semantic markup is a way of writing and structuring your HTML in your web design so that it reinforces meaning of the content rather than its appearance. WAI-ARIA helps make web pages and applications more accessible. Objective: Learn how to structure your document using semantic tags, and Webpages can and will look pretty different from one another, but they all page, the sidebar might contain the author's bio, or links to related articles) but for SEO purposes, by providing links for quick access to popular content. Semantics give content solid structure and value, while also favoring context to the content within them, communicating their core meaning to web This is important, as it provides a better way to outline and structure pages, not to The rel attribute identifies the relationship between the current document and the .
A comparison of illustrated HTML samples in web design. Why Should I Care? Short answer is, no. SEO, accessibility, and maintenance.
Headings | Structure and Semantics
The most important aspect of organic SEO is writing valuable content. Understanding and utilizing semantic markup helps ensure that valuable content reaches your target audience. Search engines weigh keyword importance by their placement in the HTML hierarchy. You can use semantic HTML to help search engines rank your page using the most relevant and meaningful content on the page.
Using this blog post as an example, so meta: Accessibility Accessibility is often an afterthought in web design. As web applications have grown rich and creative, they have become less accessible to the roughly 1 billion people in the world with disabilities.
Making applications accessible not only ensures equal access for people with disabilities, but also benefits people without disabilities by allowing them to customize their experiences.
Semantics give content solid structure and value, while also favoring accessibility, providing better user interfaces and more defined information to assistive technologies. Search and globalization is more permanent with semantics, making it easier to serve content internationally and making it more search engine friendly.
Should that not be enough, semantics also promote interoperability, allowing the exchange and use of information across different platforms and devices. To briefly recap, semantics provide: These elements are used to provide additional background context to the content within them, communicating their core meaning to web browsers and other devices.
This is important, as it provides a better way to outline and structure pages, not to mention a more meaningful solution than divisions. For example, having a success message hidden from a user until they complete a desired action. Most commonly, this is accomplished with the display: While this does work, it is semantically incorrect.
Why using semantic markup is important in web design and development
A better option is to use the hidden Boolean attribute, which is a global attribute available to all elements for use. Functionally it performs the same way as the CSS declaration, but semantically it represents an element that should be hidden, or ignored, for the time being.
Screen readers and other devices will recognize this, temporarily skipping it, where they may not done so with the CSS declaration. This is a poor user experience, and one that can easily be fixed using proper semantics. Text Level Semantics The majority of content on the web lives within text, and we primarily browse the Internet looking for this content.
Using the proper semantic markup for text makes it easier for users to find what they need. Bolding Text There are a few different ways to make text bold, including multiple elements and the font weight CSS property. The two main elements used in this case include strong and b. While these two elements have the same presentation they have completely different semantic meanings.
The strong element outlines text that has a strong importance. On the contrasting side, the b element identifies text that is to be stylistically offset, without importance. Generally speaking, the b element should be used solely as a styling hook to change the presentation of an element, where the strong element should be used to identify significantly important text.
Italicizing Text Italicizing text falls in line with that of bolding text, where we can use multiple elements or the font style CSS property to achieve a desired presentation. When italicizing text, the two elements most commonly used are em and i. Again, these share the same presentation, yet have completely different semantic meanings.
The em element places a stressed emphasis on text, while the i element identifies text to be expressed in an alternate voice or tone. Using the em element really drives prominence with an added importance.
On the other hand, the i element is primarily used within dialog or prose, offsetting text without any added emphasis or importance.
Using i for Icons Recently there has been a small movement of front end programmers using the i element for including icons on a page, specifically as seen within Bootstrap.
The i element is used as a hook, to which a class then determines which icon background image to apply to the element.
Depending on how closely you wish to follow semantics this may or may not be an acceptable practices. Underlining Text Continuing the pattern of having multiple elements with the same presentation, underlining text is no different. There are a couple of different elements we can use as well as the text decoration CSS property.
In this case, the two primary elements used to underline text are ins and u. The ins element is used to identify text that has been recently added to the document, and the u element simply refers to an unarticulated annotation.
Screen readers read in a linear fashion, which means listening to the entire web page, unless there is some other convenient way to get a "glimpse" of the page's layout and structure. It turns out that headings are a way to do that. Screen reader users can use keyboard shortcuts to navigate through the heading structure of a document. For example, in JAWS, the "H" key jumps from one heading to the next, reading them in sequential order, no matter what level the heading is h1, h2, h3, etc.
Example In the audio file below, the user presses the "H" key while using JAWS with Internet Explorer to navigate through all of the headings sequentially on the web page. Try accessing the MP3 file directly: JAWS reads the text of the heading, followed by the level of the heading. In this example, JAWS says: Set the ISO, heading level 2.
The effect of ISO on image quality, heading level 3. High ISO cameras, heading level 3. Choose an aperture, heading level 2.
The effect of aperture on depth of focus, heading level 3.
- Semantic Structure
Vignetting, heading level 3. Diffraction, heading level 3. Choose a shutter speed, heading level 2. Shutter speed limitations for hand-holding a camera, heading level 3.