What 1. Use HTML elements for their intended purpose. 2. Separate content and presentation. Why It's easier to read and naturally leads to more consistent code. Consistent HTML code is easier to style. It will help your SEO. HTML will literally do your work for you, including making your page much more accessible. At its core, a webpage is a document you want anyone to be able to read. Use HTML to create that document. Javascript and CSS are add-ons. How Ask yourself if there’s a tag with more meaning you can use when you reach for a or . <div> <span> Google if HTML does it before building it. Root Structure of a Page and tell the machines that this is an HTML document written in English. The element contains your metadata. is important. It tells the browser how to decode and encode your characters for machines and humans. Finally, the tag wraps the content of your page. <!DOCTYPE html> <html lang=“en”> <head> <meta charset="utf-8"> <body> SEO Before we move on to the content in , let's talk about the elements that go in . First, don't forget your ! Keep it descriptive and under 60 characters. Include the brand if you've got one. <body> <head> <title> Use to set your favicon - the little logo in the browser tab. <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> tag types: <meta> description: Keep it under 160 characters, descriptive, with short keywords or let search engines write it for you. keywords: If you want to suggest keywords you don't think a search engine will pull, do. : Control how your content is displayed on social media sites like Facebook and LinkedIn. open graph : Control how your site looks in Twitter Cards. Twitter Cards : Tell search engine crawlers what to do with your site's information. robots Always add your viewport meta tag - it tells search engines you've got a responsive site and prevents devices from resizing your viewport. <meta name="viewport" content="width=device-width, initial-scale=1"> Finally, use a tag to add to control how your site is displayed in search engines. <script> schema markup Sectioning Content Getting started: 1. Put your top of the page things like your logo, main navigation, and a heading in . <header> 2. Any navigation menu goes in . <nav> 3. All that good content unique to the page goes in . The main point of your page, if you will. <main> 5. Bottom of the page things like copyright, authorship, contact, and maybe some more navigation (like a link back to the top) go in . <footer> 6. Use for your text. <p> 7. Use or containing s for your lists. <ul> <ol> <li> Remember - separate content and presentation. is for site navigation, not lists of links. and are branding and navigational content you'd have at the top and bottom of every page on your site. <nav> <header> <footer> <article> vs <section> vs <aside> Use and to group content within . <article> <section> <main> Content in should still make sense if it was dropped by itself in a completely different page. <article> groups together content along the same theme. It can even go inside . <section> <article> The stuff that isn’t the main content goes in . It's complementary, but not vital. Nest this element inside the element that contains the content to which it’s related. It can be inside , but doesn't have to be. Content wrapped in can be in a sidebar, but "sidebar" is a presentational concept. <aside> <main> <aside> alt: unenchanted Melisandre from game of thrones captioned HTML and enchanted Melisandre from game of thrones captioned HTML + CSS Headings We're talking about through . They must be in your page in ascending order starting with without skipping levels. There's rarely any reason to go below . <h1> <h6> <h1> <h3> Using consistent, query-like headings only helps your SEO. You must have ONE and ONLY ONE per page. <h1> MYTH: restarts heading order. <section> TRUTH: Browsers did not implement that feature listed in the HTML5 spec. Tables Gone are the days of using tables to layout content - that's presentation. Use the element to structure tabular data. <table> A basic 2 column 2 row table: Enhance your tables with , , , , , and . <col> <colgroup> <tbody> <thead> <tfoot> <scope> Forms Wrap your form in . Use to group form options together and to label them. You can use , , , , , and headings within the element. <form> <fieldset> <legend> <li> <ul> <ol> <p> <section> <form> More on form controls later. Check your Outline Sectioning and heading elements work together to create a document outline for your page. Once you think you’ve got your page set up, try to navigate it with a screen reader. If you find there are gaps in your document outline, you can add using the attribute in your container elements. ARIA landmark roles role=“” This is manually adding what semantic HTML does for you. A screen reader would read “navigation” to a user for both and . <div role=“navigation"> <nav> Landmark roles like , , and should only appear once on a page. <main> <header> <footer> Enrich Your Content with HTML will produce italicized text. It also tells a screen reader to tell the user that the text has been emphasized. <em> will produce bolded text. It also tells a screen reader to tell the user that the text has added importance. <strong> Use CSS instead of and . <b> <i> If the image content is necessary for understanding the content around it, use and . <figure> <figcaption> If not, use and don’t forget your alt text! <img> creates a block quote (like ). <blockquote> display: block; creates a inline quote. <q> and will tell a screen reader to tell a user it’s a quote. <blockquote> <q> Use to cite your sources. <cite> If you wanted to use a quote, say who said the quote, and cite your source, it would look like: Give the Machines More Information and - be nice to the computer and tell it that this is a date or time <date> <time> - always define your abbreviations! <abbr> , , - define other stuff <dd> <dl> <dt> - preformatted text <pre> - it’s code! <code> - it’s a variable! <var> - machine-readable data <data> - contact info for the parent element. <address> Inside , is identified as the contact info for the web page owner! <footer> <address> Let HTML Do Your Work for You Form Controls allows the user to submit freeform text. It has a lot of attributes you can use, including enabling spellcheck! <textarea> creates a drop down for you and using the attribute allows users to select multiple options. <select> multiple creates an option for . When multiple s are wrapped in , they create suggestions for autocomplete. <option> <select> <option> <datalist> and create progress and meter bars for you! <progress> <meter> Using 's and attributes activates built-in HTTP messaging. or inside will automatically create a submit/send button for your HTTP messaging. inside automatically creates a button that will reset all the 's controls. <form> action method <button> <button type=“submit”> <form> <button type="reset"> <form> <forms> <input type=""> Yeah, built-in HTTP messaging is cool, but if you've got users submitting data, you're probably using . creates an image that acts like a button. Why build your own pickers or file uploader when you have , , and ? Types like email and password have built-in validation options. This codepen demonstrates all the different types of : <input> <input type="image"> <input type="color"> <input type="datetime-local"> <input type="file"> <input> <label> Associating a with an is not only accessible, but also provides programmatic advantages in your code and in HTTP messages. For example, clicking a is the same as clicking its associated . <label> <input> <label> <input> Don’t associate a with a or with type=button, reset, or submit. Never put a heading in your . <label> <button> <input> <label> <button> vs <a> Literally never build your own button. Just use . <button> A screen reader treats buttons and links very differently. They have different built-in properties, behaviors, and states. Buttons made with (which again, you should never do) will be grouped with other links. <a> Buttons are for performing an action (unless that action is navigating to another page). Buttons and inputs are in tab order and can be triggered with space and enter for keyboard users. The element automatically provides hover and focus states. <button> Anchor tags ( ) are for links and . Anchor tags are not in tab order and are only triggered on enter. <a> provide useful SEO Special mention: <button> vs <input type="button"> A can have content and is easier to style. A inside a without a type specified will automatically become a . has no default behavior making it less semantic and accessible. It does make it behave more consistently across browsers. This was particularly important when trying to support IE6/IE7. and do have the default behavior of submitting a form or resetting all the form controls when inside a , but nothing else. <button> <button> <form> <button type="submit"> <input type="button"> <input type="submit"> <input type="reset"> <form> Other Elements That Do a Ton of Work and work together to create a toggle. and have built-in players with controls. <details> <summary> <audio> <video> wraps multiple or elements and chooses the best one based on display/device scenarios. can be used to trap remote code or user input in a separate context from your page for security reasons. <picture> <img> <source> <iframe> Conclusion Learning and using semantic HTML gives you a ton of functionality without lifting a finger. It also allows you to bake accessibility and SEO in with very little effort. Not to mention it leads to cleaner code and cleaner code is easier to style. There are around 100 semantic HTML elements - don't build what HTML hands to you on a silver platter. Also published here: https://dev.to/abbeyperini/semantic-html-what-why-and-how-3b34

Harmony

CodePen

Facebook

Google

Twitter

Meet Hacker Noon’s Contributor and Serial Hobbyist Abbey Perini

How to add a Dark Mode Toggle in React

Nominated for 2022 - HackerNoon Contributor of the Year - Refactoring

Nominated for 2022 - HackerNoon Contributor of the Year - Beginners Guide

Too Long; Didn't Read

Semantic HTML: What, Why, and How

Semantic HTML: What, Why, and How

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

8 Things I've Learned Working on a Huge Legacy Codebase

20 Hours of Work, $258 in Sales — The First Week of Shade

4 Quick and Easy Tips to Make Your WordPress Website ADA Compliant

4 ways CSS :has() can make your HTML forms even better

5 Resources to Measure Website Accessibility

8 Things I've Learned Working on a Huge Legacy Codebase

20 Hours of Work, $258 in Sales — The First Week of Shade

4 Quick and Easy Tips to Make Your WordPress Website ADA Compliant

4 ways CSS :has() can make your HTML forms even better

5 Resources to Measure Website Accessibility

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps