I've attempted to steer my career in the area of web development, all the back in 2006, but something as always stood in my way. Other interests, job, JavaScript (that's a story for another day), to just name a few of those obstacles.
Here in 2022 I'm making the earnest attempt to become a full stack developer and a developer in general. After taking refresher courses in both HTML and CSS, it's incredible how far both languages have come in the years. Compared to when I first started, creating a website is as easy as it's ever been (front end strictly speaking).
CSS3 and HTML5 have introduced some amazing new features; CSS was long overdue for new features that made centering elements easier (yes you read that correctly). Though with HTML5, inclusion has been one of the stand out features. In order to have websites more accessible for people dealing with numerous disabilities.
Called "a11y" (stands for "accessibility" and the 11 represents the 11 letters in between "a" and "y"), the belief is that the world wide web should be fundamentally designed to work for everyone, regardless if someone is using a screen reader, have dyslexia, or even colorblindness.
HTML5 introduced some new tags in order to aid with making website more accessible. Some we've been using for years - h1, h2, h3 etc... in order to denote what's the main focus of the webpage, and the "alt" attribute when placing images in websites. Here's a rundown of a few new tags that helps with inclusion.
Header - Introduces with the webpage is about, usually includes the h1 tag, possible logo and navigation.
Footer - What I would consider the sister (or brother, cousin, whatever you like) of the header element. The Footer usually contains copyright information.
Main - Used to wrap, of course, the main content. This information is related to the content of the page, and every page should contain only one Main element.
Article - The Article tag is used to denote specific or self contained content. Think of blog/forum posts, news articles, etc.
Section - There seems to be some discourse between when to use Articles and when to use Sections. Section tags are used to group similarly themed content, and can be used in tandem with the Article tags.
Label - Seen in forms, the Label tag is wrapped around a name or short sentence for a choice or input by the user (checkboxes, email, etc). Labels need the for attribute in order to associate that label with the option its representing. Because of this, the for attribute in labels must match the id of the input tag so that everything makes sense, especially for screen readers.
These new tags are only scratching the surface; for more in-depth details please head over to The a11y Project for more on inclusion and accessibly (they even include a checklist) and MDN Web Docs for a deeper dive into the tags.
Top comments (0)