How do you choose the right HTML tags for your web page content? (2024)

I have seen many developers using the heading tags like <h1>, <h2>, <h3>, etc. for making the size of the font big or small. This is a very big mistake. The purpose of heading tags is to add headings to your content & not to resize your font. Making such mistakes not only hampers the user experience, accessibility & readability but also the SEO of the website.Using the right tags at the right place can optimize the overall user experience on the website & the SEO too.

- Semantics: Choose tags that accurately represent the purpose of the content like <h1> for headings,<p> for paragraphs,<ul> or <ol> for lists.- Accessibility: Use appropriate tags to ensure your content is accessible to all users, including screen readers & assistive technologies.- SEO: Some tags, like <title>,<meta>,<header> can improve your website's SEO by providing context & keywords.- HTML5 structure: Utilize HTML5 elements <article>,<section>,<nav>,<footer> for better organization.- Compatibility: Ensure compatibility across different browsers & devices by checking HTML specifications and browser support for specific tags.- HTML validation: Validate your HTML code using online validators to ensure it conforms to standards.

Of course, knowing when to use <h1>, <h2>, <h3> etc., or <p> vs. <div> vs. <span> isn't always clear. The same text can be used in all of these tags, but the tag you chose effects how it's seen on the page, and can create a headache when writing CSS.

One thing I have found helpful is using HTML5 tags that gives more meaningful structure to the HTML document and also gives better understanding of the content to assistive technologies and search engine optimization strategy.

If the layout isn't working out for you using tags properly, you need to consider changing the design because semantic meanings won't change for you.

Choosing the right tag can also improve your site's ranking in Google or Bing.For example, instead of using the <span> element, you can use the following elements:* The abbr element represents an abbreviation or acronym.* The code element represents a fragment of computer code.* The cite element represents the title of a work (e.g. a book, a paper, an essay, a song, a script, a game, etc.). This can be a work that is being quoted.* The q element represents some phrasing content quoted from another source.* The dfn element represents the defining instance of a term.* The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

At the same time, we have to be careful here. HTML isn't the only part of the webpage. It's important to consider all of the tools being used. For example, if your page has a <b>single</b> word in a block of text that needs meaning or an appearance change, vs. a block of text that you want to change.

In addition to deprecated or obsolete tags, it is also not recommended to use elements that were not part of the HTML standard and were supported only by some browsers.For example, these are elements such as <blink>, <bgsound>, <marquee>, <nobr>, <noembed>, <plaintext>, <spacer>.

Replacing them with CSS makes it a more flexible and efficient design approach. CSS allows for consistent styling across multiple elements, promoting code reusability. For example, instead of using <center>, utilize the 'margin' or 'text-align' property in CSS for centering, ensuring compatibility with current web standards and simplifying maintenance.

Obsolete tags might not be compatible with the latest versions of the browsers. When a visitor uses the latest browser to visit the website, he or she might not have a great experience if the website is built using deprecated or obsolete tags.

New tags added to HTML5 make it easier to use and create dynamic websites. <audio> and <video> tags allow you to embed a video or audio on your website. Vector graphics tags <svg> and <canvas> are used to draw graphics with various shapes and colors. <header> and the <footer> tags allow the browser to know in which order and what element to load first. And also <section>, <article>, <nav> which allow you to create semantic and logical sections of your page. <figure> tag is used element to mark up a photo in a document and <figcaption> tag defines a caption for the photo. <progress> tag is used to check the progress of a task during the execution. Input attributes placeholder and email were added as well. And many more ...

Right-click and then select "View page source" to view the HTML code of the web page.Right-click and then select "Inspect" to access additional viewing options, including Styles, Console, Network, Memory, and more.