10 HTML things to Master as an Experienced Web Developer

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 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-*)

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 which span across four HTML tags, <a/>, <area/>, <link/> and <form/> 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, 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.

Conclusion

There is so much to learn as a web developer and when you make HTML your first stop you should always consider coming back to improve upon it as you learn new things. I also wrote other articles on things to learn about CSS and important things to learn about Javascript as well which I recommend.

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.

10 Things to Master About Javascript Before You Call Yourself a Pro
15 CSS Things to Master and Become a Better Web Developer