I came across a thread of web designers discussing their frustration with designers and business owners not using Web Tags the other day. So, I’d like to give some context on the importance of using Web Tags and a few basic tags to get you started.
Web Tags are small bits of code used on websites to help collect and organize data tags to help with tasks such as SEO raking and Accessibility tool functions.
Search engines use bots called Crawlers that read through your website's code to understand what your site is about, using web tags and other data to help sort through and categorize information. Once a bot has crawled through your site, it will index your website on search engines like Google.
Tags help crawlers understand your website content and what information is most important to index and rank your site, by communicating information such as hierarchy and primary subject.
Web Tags are also used by Screen Readers, software programs that allow blind or visually impaired users to read text on a computer screen with a speech synthesizer or braille display.
Screen Readers use Web Tags to understand and communicate content to the user similar to how Crawlers collect information for search engines. So, when tags are missing, these tools can't effectively understand the hierarchy of your content. Essentially reading your content in complete monotone or if the text is incorrectly labeled the tool would add stressors to odd parts of your text.
(<html></html>)
The HTML tag starts the document + serves as the paper for your document.
(<body></body>)
Body tags contain all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, + lists.
(<h1></h1>)
The heading tag and uses numbers to dictate importance, with H1 at the highest + H6 at the lowest.
(<head></head>)
The Head tag, placed between HTML + Body tags, contains metadata defining undisplayed information such as the title, character set, styles, and scripts.
(<title></title>)
The title tag signifies the document Title.
(<p></p>)
The P tag signifies paragraphs.
(<a></a>)
The A tag adds links to the document.
(<div></div>)
The DIV tag is a large container that adds structure by holding tags together.
(<span></span>)
The Span tag is a small container that can hold tags together within a div container.
(<img></img>)
The IMG tag adds images to the document.
w3schools.com has proven to be a great reference resource in my experience. Give them a visit if you'd like more in-depth information.
