It is easy to just underestimate HTML as a simple thing to learn but there is more to HTML than you think if your intention is to learn it right. It represents the structure, the bones of any website and these are 10 things to strengthen these bones.
HTML5 semantic tags are like types in a loosely typed language. You can go ahead and structure your entire site with div tags but you would miss out on the benefits of semantic tags:
- Help visually impaired users navigate a page with Screen Reader;
- SEO (Search Engine Optimization) improved ranking;
- Easy to find, and make sense of the content;
- Indicate the type of content a block of text is;
- Accessibility built-in;
- Some tags have basic style and behavior you may need to take advantage of;
These are things like knowing when to use div, article vs section tags, or when to use main, header, footer vs aside tags, etc. There are a few semantic tags and you should find time to understand them all as you go and start creating meaningful pages.
Accessibility & Accessibility Attributes
Accessibility is not about slapping an ARIA attribute on your HTML and walk out thinking that is now accessible. By using the right tags you are automatically building an accessible site most of the time. That’s another reason good semantics matter.
Accessibility is about:
- Using the correct semantic tags;
- Using clear and simple language in text content,
- Using proper labels and text formatting;
- Structuring the layout with proper layout tags;
- Using correct interactable UI elements like button and select tags which have keyboard accessibility built-in;
- Using the text or other alternatives for media and imagery tags;
- Properly linking things on the page;
- Properly spacing content apart among other UI considerations
- Using ARIA tags and JS techniques to add accessibility to custom-built things
- Build your website with Accessibility in mind from the gecko.
It is easy to learn about ARIA and accessibility with many freely available resources. As a web developer, I believe this is one of the most important investments you can make by trying to understand, how you can build things for everyone and anyone.
Block vs Inline Tags
The HTML tags can either be a block or inline-level which influences how your content behaves on the page. Understanding the difference will even improve your CSS styling technique. The block-level tags will take full available horizontal space and the inline ones will only cover the space needed by the content. Block elements force a new line where inlines do not.
You can use CSS display property to force inline tags to behave like a block or a mix of inline and block but the general rule is that you should put inline elements inside block elements and not the inverse.
Data Attributes (data-*)
These attributes are not “accessibility” friendly, so if you intend for them to be visible to the user or used for accessibility purposes it is good to know that screen readers often ignore them. It is a small thing to learn about but I really think you should take the time to learn how to include data attributes on your site.
There are many ways to link things to a web page. You have links for resources the page needs, local page links, and external links as well. There are many link types which span across four HTML tags, <a/>, <area/>, <link/> and <form/> and you should know all about them.
DOM (Document Object Model)
If SEO is of any importance to you, as it should, learning about meta tags is crucial. The meta tag is used to represent data that cannot be represented by other meta related elements. And yes, there are other meta-related tags and you often don’t think about them as such.
Among other things, meta tags play a crucial role in links shared on social media as they provide information about the page which can be quickly accessed without having to look into the rest of the page to make sense out of it.
They also provide instructions to the browser of what to do, for example, you want the user to see the page for 5 seconds before being redirected to another page by using the
http-equiv attribute with the “refresh” value.
Media & Imagery Tags
If you ever tried to create custom audio or video player you already know how robust these tags are. If you haven’t, I challenge you to create custom players and get familiar with the <audio/> or <video/> and all derived tags along with their DOM API up close.
Simple things like knowing the difference between the <img/>, <figure/>, and <picture/> tags will go a long way as these tags will help you enhance the image displaying experience on your site. You just can’t avoid any type of imagery and media displaying on the web anymore. Users require them now so, take your time to take a deep dive into each by experimenting and creating things around them.
SVG (Scalable Vector Graphics)
SVG is not HTML, I know. SVG is XML-based markup used to describe 2d vector graphics but because it is often mixed with HTML and it is so powerful that I decided to sneak it last. Think about SVG as HTML/XML for graphics.
The ability to include scalable sharp graphics on a website is itself mind-blowing and SVG is fun to work with. From simple icons or fonts, developers gained a way to express their artistic side by manipulating SVG to create static and motion art in the browser. The best part is that you can use it to enhance other things on the page with a much faster loading time by including the markup directly on the page.
HTML Validator & other Validators
One of my favorite tools is the HTML validator and I have been using it for years to validate my HTML ensuring that I properly write proper HTML markup. Among other tools, W3.org has a nice list of web accessibility validators you can use also. On top of these, you should use look into the Chrome Lighthouse tool and many available browser extensions for SEO checks.
Take your time with HTML, learn the basics, and never think you are done. HTML is constantly evolving and maturing with things changing on the web. It is one of the best text markup languages out there and pretty much supports all the great things we do in the browser.