We’re seeing many trends this year with artisans considering building their own websites. I’m writing a series this year for Handmade Seller to share an often overlooked area of website technology- accessibility. This is a topic that many people don’t fully understand. This series will help you understand what’s behind the topic of accessibility, what different platforms have to offer to meet accessibility guidelines, and how to help you make the decisions that make the most sense for your business. This month, we are digging into Semantic code- what it is and why it is important.
The Importance of Semantic Code
Semantic code, or backend code, is the programmatic structure of a website. It’s the syntax for how Internet browsers interpret information like images, headlines, paragraphs of texts, buttons and more. These semantic elements are essential for assistive navigation as they define the structure of a webpage – both to browsers and to adaptive technologies (like screen readers).
Most business owners will create their website using a builder like WordPress, Squarespace or Shopify – platforms that allow you to make a website without needing to know how to code. While this makes it infinitely easier to get your business online, it’s not so great when you factor in accessibility.
Understanding semantic markup is important for creating a more inclusive web experience.
Examples of Semantic (and Non-Semantic) HTML Elements
Semantic Elements
Semantic HTML elements convey meaningful information about the purpose and content of each section of a webpage.
- By using the <img> tag with appropriate alternative text (ALT attribute), you can provide descriptive information about the content depicted in an image.
- Properly structured navigation elements such as <nav> tags enable users to quickly locate and access important links or menu options.
- <address> represents contact information for the author or owner of a webpage.
- The <main> content area contains primary information that is relevant to that page’s topic.
- Use the proper headline tag (e.g. <h1>, <h2>, <h3>) in ascending order to correctly organize the structure of your content.
- Use <p> (paragraph) tags to organize longform text.
Non-Semantic Elements
Non-semantic HTML elements do not inherently convey any meaning about its content or purpose. These elements are typically used for layout and presentation rather than for structuring content.
- The <div> element is a generic container used for grouping and styling content within a page.
- Similar to the <div> tag, <span> tags are used to style groups of text.
- <b> or <strong> are used to place emphasis on certain words.
Using Anchor Links vs Buttons
Another set of elements that offer similar functionality, but have different intentions, are <a> (anchor links) and <button>.
Anchor links are primarily used for navigation purposes, such as linking to other pages, sections within the same page, or external sites. Button elements are typically used to trigger actions or submit forms on a web page, such as submitting a form. So which one should you use? Both, because It depends…
Anchor links can enhance accessibility by providing clear navigation cues When used appropriately with descriptive text, alternative text and/or ARIA (Accessible Rich Internet Applications) attributes. We recommend using anchor links to link to other pages or articles (internal or external).
Buttons are inherently accessible and provide clear indications of interactive elements to users, can be easily focused on and activated using keyboard navigation. We recommend using buttons instead of anchor links when it comes to prompting the user to take an action other than navigating to a different page, like opening up a pop-up window.
Why Is Improper Div Use Bad?
Non-semantic elements, specifically <div> tags, are considered to be a “miscellaneous” element container that’s used when no other semantic element properly categorizes the content.
Assistive technology uses element structure like a GPS uses location and street names. Overusing <div> tags can be compared to a GPS not telling you the street name, or telling you to turn at 4-way stop without stating left or right.
Selfish SEO Benefits
Just like accessibility tools, search engines also rely on semantic code to understand the structure and relevance of web content, which, in turn, can positively impact search engine rankings. Properly structured semantic markup, including headings, lists, and other elements, helps search engines index and rank web pages more accurately.
Summing It Up: Why Semantic HTML Matters for Your Website
The default set up of most website platforms, like WordPress or Squarespace, will meet WCAG 2.0 standards from the start. However, not all themes on template markets will necessarily meet those same standards. And, some page builders give you free reign in design which creates an unnecessary amount of nested <div> tags.
While non-semantic elements play a role in web design for layout, it’s important to use them in conjunction with semantic elements to ensure that your content remains accessible to all users. Semantic HTML elements provide structure and meaning to the content, making it more accessible, searchable, and understandable for both humans and browsers.
Want to read the whole series? Check out these articles:
Part 1:How to improve accessibility for your website
Part 2: Improving website accessibility- who creates the standards?
Interested in a subscription to the magazine?
Interested in a digital or print subscription to our quarterly magazine? Or are you interested in reading back issues of the magazine?
