HTML5 Reference Guide
There are a lot of tags in HTML5. It's important to learn the correct tags for many reasons, especially since semantic code works much better with SEO. Writing semantic code means that you're writing code that uses the most logical and appropriate tags. For example, you might have learned that to make your navigation you'd use a tag like this:
<div id = "nav">. Now, in HTML5, there is a tag <nav> that you should use instead, which is the most semantic way. Using the correct tags makes things much easier for screen readers and for search engines to figure out if you have your important information where it should be.
Because there are so many tags, I'm going to keep this HTML5 Reference Guide to the most used tags. We will have other articles that address less used tags, tags related to forms, and tags related to tables.
In gray you'll see the name of the tags. I'll list the common attributes for each tag (that has some) at the end of the definition in italics.
<!--...--> If you need to leave a comment in your code, either to hide something until it's ready or for organization, or for a little developers note, this is the code that you should use. The code that's between the dashes will not be read by the browser.
<!DOCTYPE> The Doctype tag defines the type of document you're writing. For an HTML document you would write <!DOCTYPE HTML>
<a> The Anchor tag defines a hyperlink. You'll need to use this tag if you want to create a clickable link, whether it's to your own homepage or an external page. Attributes: href, hreflang, media, ping, rel, target, type
<address> The Address tag is used to define addresses or contact information on your page. This tag should only be used with a postal address if it's is also part of the contact information.
<article> The Article tag is so that you can distinguish independent content from your main content on your site. The content within an Article tag should make sense on its own.
<aside> The Aside tag defines content that's different, or aside, from page content. However, whatever you put in an Aside, should still be related to surrounding content.
<audio> The Audio tag defines sound content, like music or other forms of audio. Attributes: autoplay, controls, loop, muted, preload, src
<b> The Bold tag creates bold text. However, according to the HTML5 specifications this tag should only be used as a last resort. There are much more semantic ways to specify bold text. If you need to make sure that something is bold because it's important information, you should use the <strong> tag. If you want to simply make the text look bolder for stylistic reasons, you should style the text through a <span> in CSS.
<body> The Body tag defines the body of your document. In HTML, all of your text, images, and content that's visible to the user will be in the Body.
<br> The Break tag will create a single line break. It's also an empty tag, meaning that no content goes inside it so it doesn't need a closing tag.
<button> The Button tag creates a clickable button. You can put images, text, or content in a button. Attributes: autofocus, disabled, form, formaction, name, type, value
<canvas> The Canvas tag is used to create graphics in the browser through scripting, like with JavaScript. Attributes: height, width
<code> This tag indicates that you've written code that shouldn’t be read by the browser. This tag comes in handy if you're blogging about web things, that way when you're writing code examples you don't have worry about the browser reading your examples as code the way it normally would. The code tag is also referred to as a phrase tag, since you're using it to outline a particular phrase in your text. Attributes: autobuffer, autoplay, controls, src
<del> The Deleted text tag makes it possible for you to strike through text. Attributes: cite, datetime
<div> The Div tag defines a section or division in your HTML. It's often used to group together block-level elements so that they can be formatted with CSS.
<em> The Emphasize tag is used to emphasize a word. It will look like the text is italicized, however this tag shouldn't be used just to italicize something for stylistic purposes. If you wanted to write something with an emphasize on a word like you find when reading dialogue, then you should use this tag. To create italicized text just for stylistic purposes, like italicizing a movie title, then you should use the <span> tag and style it specifically with CSS.
<embed> The Embed tag should be used to define a container for external content, like a YouTube video. Attributes: height, src, type, width
<footer> The Footer tag defines the footer of a web page. It's the most semantic way to create a footer and all pertinent information should be within it.
<form> The Form tag should be used to create an HTML form that a user will fill out. Attributes: action, autocomplete, method, name, novalidate, target.
<h1> to <h6> These Heading tags define headings on your page. The <h1> is the most important heading and the <h6> is the least important.
<head> The Head is an element that contains all necessary elements like <title> (which is required for all HTML documents), <style>, <meta> and <script>. In HTML5 the <head> can be omitted, but it's still widely used on most sites, since it was required with HTML 4.01.
<header> The Header tag is a container for the content that's in the header of a site. Usually logos and headings are included in the <header>.
<html> The HTML tag is necessary so that your browser will know where your HTML will start in your document. It's also important that all your HTML elements, except the Doctype, should be within the <html> container.
<i> Like the Bold tag, this Italic tag should be used as a last resort, since you should be using the most semantic element possible. If you need italicized text to emphasize a word you should use <em>. For words that are italicized for stylistic purposes, put the text in a <span> and style it with CSS.
<img> The Image tag defines an image and requires both the src and alt attributes. The image tag is really a link to an image that's stored somewhere else, so you can think of an Image tag as just a holding spot for a particular image. Attributes: alt, height, ismap, src, width
<input> The Input tag will create an input field for a user to enter information. Inputs are used within forms and can vary greatly depending upon the attributes selected. Attributes: alt, autocomplete, autofocus, checked, disabled, form, formaction, formmethod, height, max, maxlength, min, name, placeholder, required, size, src, step, type, value, width.
<li> The List Item tag works together with the <ol> (Ordered List) and <ul> (Unordered list) tags. This tag is used for every item that you would need to include in a list.
<link> While you might infer that the Link tag is used to create hyperlinks on your website, you'd be mistaken. To achieve hyperlinks you'd use the <a> tag. The Link tag defines a link between a document and another resource, like your stylesheets (CSS). The rel attribute is required. Attributes: href, rel, media, sizes, type.
<meta> The Meta tag is used to describe metadata that's within an HTML document. You can include information like: page description, UTF encoding, keywords, and author. Meta tags much go inside the <head>. Attributes: charset, content, http-equiv, name
<nav> The Nav tag is used for page navigation. The <nav> should be used as a container for a block of major navigation links (like Home, About, Contact, etc.).
<ol> The Ordered List tag will create an ordered list. Within this container tag you'll need to add your <li> tags. The ordered list can be alphabetical or numerical. Attributes: reversed, start, type
<p> The Paragraph tag is used to create a paragraph, or a group of text that's a block-level element.
<script> The Script defines a script like JavaScript. You can use this tag to include JavaScript directly within your HTML or point it to an external source with the src attribute.
<section> The Section tag can be used to define specific sections or your content, like chapters.
<span> The Span tag is used to group inline elements together or as a way for you to target a specific section of an element like a <p> so that you can style it with CSS independently from the rest of the paragraph.
<strong> The Strong tag is used to create bold text. It's similar to the <em> tag in that it should be used for semantic purposes, like making sure you're defining text that's important.
<style> The Style tag defines style information in an HTML document. You'd use this to add CSS directly within your HTML document instead of using <link> to link to an external style sheet. Attributes: media, scoped, type
<table> The Table tag creates a table within HTML.
<title> Required in every HTML document, the Title tag defines the title of that particular HTML document. It will make a title when the page is added to favorites, in the browser toolbar, and in search engine results.
<ul> The Unordered list tag creates an unordered (bulleted) list. You need to use the <li> tags together with the <ol> to create unordered lists. It's possible to change the style of the bullets or remove them with CSS.
<video> The Video tag is for a video clip in MP4, WebM, or Ogg format. It's new in HTML5. Attributes: autoplay, controls, height, loop, muted, poster preload, src, width
Keep in mind, this isn't a comprehensive list of all HTML5 tags. I've intentionally left out tags that are used for forms and tables for a future post.
