Most styles like font-family and color will inherit across all email clients for these elements so no need to reset those. Not much you need to do here, but I do advise setting the margin and font-size if you want consistency. So, Semantic HTML isn't just an option, but it's a necessity, and more people should start considering this when building any web project.Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Paragraph
#Html strong em semantic accessibility screen reader code#
Writing HTML is easy, but the way you structure your code matters much more than the content, in a way that it's more accessible to everyone and maintainable when the size of the codebase increases on your page. You see how the use of div's and spans is highly reduced, and the code is now much cleaner. So, by enclosing the time information on your page inside a time tag, you make the code machine-readable. Dates and times are formatted differently across the world, and so it becomes difficult to parse through a search engine or email client. - The time tag is used to define a specific time or date.Often we have to quote something, and simply wrapping the quote inside " " won't give it meaning, so it's best to put the quote inside a tag and the title inside the cite tag. and - the tag is used to specify a quote, and the cite tag defines the title of the work.- Used to display a popup or modal window This element makes it easy to create popup dialogs and modals on any web page.So it is used to provide an autocomplete feature to input elements. & - Used to specify a list of predefined options for an input element.And the summary tag is used with the details to specify a visible heading for the details.įor e.g Heading The content will go here… The details tag allows you to put additional details that the user can open and close on demand. & - Used to Show/hide content under a collapsible heading without having to use JS.Instead of having one image that is scaled up or down based on the viewport, multiple images can be put up to fit the browser viewport. - This tag is used when you want to have different images for different media queries it's most commonly used for responsive designs.Sometimes you want to have spaces or line breaks in between your text, which you cant achieve simply using a paragraph tag, so the text inside a pre element preserves both spaces and line breaks and will be displayed exactly as written in the HTML source code. Now let's talk about some lesser-known HTML tags that may be helpful to you in various scenarios. The for wrapping your image content, and to write a caption for that image.The tag for the additional information alongside the content or as a sidebar.The tag whenever you need to write an article or a long paragraph.You can use a tag to break the content of your page into various sections.will contain the header part of your page Seeing at it anyone can tell this is the nav section of the page and similarily you can use other semantic tags like to breaking the code into different parts that will be easier to manage. There are some basic semantic tags that you should start using from now onwards every time you build a new website replacing the old way of enclosing everything inside a div or span.įor example, instead of writing a navbar like this: How do you shift to writing Semantic HTML Helps you rank higher in search engine results.Increases the readability and accessibility of your code.You might have a question that when there is no major effect on the way my page will look to the audience, then why have an extra headache of caring about the tags I use? Yeah, it won't matter much for a part of your audience, but for people using a screen reader or for someone going through your code and even for the web crawlers, it matters. You write tags that convey something, such asĪnd a lot more. You can't guess this just by looking at it, and that's where the concept of semantic tags comes into place. It does not affect the way your web page will look, but it certainly will make your code more accessible, making it easier to read for the humans as well as for the machines.įor example, A tag states that it is a paragraph, so you can guess the content is gonna be a paragraph for sure.īut on the other side, a tag it can be a navbar, footer, or a hero section. Semantic HTML is a way of writing HTML code that's readable, that gives meaning to the webpage rather than just the presentation part. Do you use a div tag for enclosing every significant section of your webpage and are tired of maintaining the whole codebase afterward, then I highly suggest you to start using Semantic HTML in your code.