1. Use HTML elements for their intended purpose.
2. Separate content and presentation.
It's easier to read and naturally leads to more consistent code. Consistent HTML code is easier to style.
It will help your SEO.
Ask yourself if there’s a tag with more meaning you can use when you reach for a
Google if HTML does it before building it.
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.
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.
to set your favicon - the little logo in the browser tab.
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
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 schema markup to control how your site is displayed in search engines.
1. Put your top of the page things like your logo, main navigation, and a heading in
2. Any navigation menu goes in
3. All that good content unique to the page goes in
. The main point of your page, if you will.
5. Bottom of the page things like copyright, authorship, contact, and maybe some more navigation (like a link back to the top) go in
for your text.
s for your lists.
Remember - separate content and presentation.
is for site navigation, not lists of links.
are branding and navigational content you'd have at the top and bottom of every page on your site.
<article> vs <section> vs <aside>
to group content within
should still make sense if it was dropped by itself in a completely different page.
groups together content along the same theme. It can even go inside
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.
alt: unenchanted Melisandre from game of thrones captioned HTML and enchanted Melisandre from game of thrones captioned HTML + CSS
We're talking about
. They must be in your page in ascending order starting with
without skipping levels. There's rarely any reason to go below
Using consistent, query-like headings only helps your SEO.
You must have ONE and ONLY ONE
restarts heading order.
Gone are the days of using tables to layout content - that's presentation. Use the
element to structure tabular data.
A basic 2 column 2 row table:
Enhance your tables with
Wrap your form in
to group form options together and
to label them. You can use
, and headings within the
More on form controls later.
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 ARIA landmark roles using the
attribute in your container elements.
This is manually adding what semantic HTML does for you. A screen reader would read “navigation” to a user for both
Landmark roles like
should only appear once on a page.
will produce italicized text. It also tells a screen reader to tell the user that the text has been emphasized.
will produce bolded text. It also tells a screen reader to tell the user that the text has added importance.
Use CSS instead of
If the image content is necessary for understanding the content around it, use
If not, use
and don’t forget your alt text!
creates a block quote (like
creates a inline quote.
will tell a screen reader to tell a user it’s a quote.
to cite your sources.
If you wanted to use a quote, say who said the quote, and cite your source, it would look like:
- be nice to the computer and tell it that this is a date or time
- always define your abbreviations!
- define other stuff
- preformatted text
- it’s code!
- it’s a variable!
- machine-readable data
- contact info for the parent element.
is identified as the contact info for the web page owner!
allows the user to submit freeform text. It has a lot of attributes you can use, including enabling spellcheck!
creates a drop down for you and using the
attribute allows users to select multiple options.
creates an option for
. When multiple
s are wrapped in
, they create suggestions for autocomplete.
create progress and meter bars for you!
attributes activates built-in HTTP messaging.
will automatically create a submit/send button for your HTTP messaging.
automatically creates a button that will reset all the
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
? Types like email and password have built-in validation options. This codepen demonstrates all the different types of
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
Don’t associate a
with type=button, reset, or submit. Never put a heading in your
<button> vs <a>
Literally never build your own button. Just use
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.
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.
Anchor tags (
) are for links and provide useful SEO. Anchor tags are not in tab order and are only triggered on enter.
<button> vs <input type="button">
can have content and is easier to style. 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.
do have the default behavior of submitting a form or resetting all the form controls when inside a
, but nothing else.
work together to create a toggle.
have built-in players with controls.
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.
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