10 HTML things to Master as an Experienced Web Developer

By Elson CorreiaDecember 4, 2020

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.

Semantic tags

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 walking 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 buttons 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 its 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 up 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 the 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-*)

Data attributes are built with the intention to bind data to your HTML and they are accessible through CSS and Javascript which further helps you improve the behavior and look of your website. Any developer trying to set extra information on the page should use these, preferably.

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.

Links

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 that span across four HTML tags, , , , and

and you should know all about them.

DOM (Document Object Model)

DOM represents an HTML or XML document so you may have HTML DOM or XML DOM. You may learn all about HTML but at some point, you will need to interact with it and you will use CSS or Javascript and these do not “speak” HTML. What allows them to interact with HTML is the DOM. The programming interface for HTML.

A common misconception is that DOM is Javascript and that's not true. This is thought so because Javascript and DOM used to be tightly coupled but that's no longer true anymore. In fact, DOM can even be controlled using Python. I really love this quick intro to DOM by MDN which I truly believe will benefit you greatly, so check it out.

Form Elements

There are only a few form element tags and they allow you to work with user data. Form DOM API is powerful, and element tags themselves are powerful on their own. In fact, you don't even need Javascript to control, validate, and submit your forms.

As a web developer, you can’t avoid forms and there is so much to master here. You must know how to style them without compromising accessibility, enhance the experience around them with Javascript and validate them among many other awesome things you can do to them.

Meta Tags

If SEO is of any importance to you, as it should be, 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 a 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 or and all derived tags along with their DOM API up close.

Simple things like knowing the difference between the ,

Illustration for “10 HTML things to Master as an Experienced Web Developer”