This is an opinionated look at HTML5 elements. The goal is to help you choose an element to use when marking up content.
The doctype is the first element at the top of the page. It tells the browser what version of HTML you are using.
HTML5 doctype
- <!doctype html>
The HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
</html>
The head element represents a collection of metadata for the Document. This is for the browser not people and provides information like: title of the site, charset being used, links to CSS stylesheets, and information that helps responsive design. Not to be confused with the header element.
Basic reponsive header
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>The Title of Your Website: Page Title</title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="css/main.css">
- </head>
The meta element represents various kinds of metadata that cannot be expressed using the title, base, link, style, and script elements.
The meta element can represent document-level metadata with the name attribute, pragma directives with the http-equiv attribute, and the file's character encoding declaration when an HTML document is serialized to string form (e.g. for transmission over the network or for disk storage) with the charset attribute.
Meta tags are useful in SEO for helping search engine spiders index your page properly. See more from Google here.
This shows a number of examples of different attributes for meta tags.
name="description" is used by search engines like Google to read a short description of the page. see more from Googlename="viewport" tag is a key part of responsive design and helps ensure mobile browsers will render the page as you expect (and not shrink it down). This is important when doing Responsive Web Design
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>The Title of Your Website: Page Title</title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="css/main.css">
- </head>
The link element allows authors to link their document to other resources.
The destination of the link(s) is given by the href attribute, which must be present and must contain a valid non-empty URL potentially surrounded by spaces. If the href attribute is absent, then the element does not define a link.
A link element must have rel attribute.
The link here tells the browser to look in the css folder for a file named main.css.
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>The Title of Your Website: Page Title</title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="css/main.css">
- </head>
This allows you to write CSS directly on the page.
Genearlly you should not be doing this but instead putting your CSS in an external .css file. So no example is given.
×The HTML <body> Element represents the visible content of an HTML document. All content elements must be inside of the <body> elementThere can be only one <body> element in a document.
modified from source MDN
<html>
<head>
<title>Document title</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>A div is a generic element used to group elements together. Use it when one of the other grouping elements (article, section, aside, nav etc) are not appropriate.
Because the div has no meaning by itself, you should always (almost) use it with one or more classes. Otherwise it is hard to use CSS to select the div and hard to know what it is grouping.
One of class names should describe the content in the div. You can kind of think of div as a way to add your own custom elements to the page.
In this case the developer needed to create a page with a number of speakers. Two divs are used to mark a group of elements as belonging to a speaker (div class=speaker) and the image of the speaker (div class=pic).
- <div class="speaker">
- <div class="pic">
- <img src="http://placehold.it/100x100" alt="picture of speaker">
- </div> <!-- end .pic -->
- <h3>Name of Speaker</h3>
- <p>Bio of Speaker</p>
- </div><!-- end .speaker -->
The HTML <header> element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, navigation, a search form, an author name, and other elements.
<header>
<h1>Main Page Title</h1>
<img src="mdn-logo-sm.png" alt="MDN logo">
</header>
The HTML <main> element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
<header><h1>Gecko facts</h1></header>
<main>
<article>
<h2>Gecko Habitat</h2>
<p>Geckos are a group of usually small, usually nocturnal lizards.</p>
</article>
</main>
<footer>© copyright 2021</footer>The HTML <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).
<article class="film_review">
<h2>Jurassic Park</h2>
<section class="main_review">
<h3>Review</h3>
<p>Dinos were great!</p>
</section>
<footer>
<p>
Posted on
<time datetime="2015-05-15 19:00">May 15</time>
by Staff.
</p>
</footer>
</article>
The HTML <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document
<section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>
The HTML <aside> element represents a portion of a document whose content is only indirectly related to the document's main content.
<article>
<p>
The Disney movie <cite>The Little Mermaid</cite> was
first released to theatres in 1989.
</p>
<aside>
<p>
In the Hans Christen Andersen story on which the film is based, the little mermaid is never named.
</p>
</aside>
</article>
The HTML <address> element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.
<address>
You can contact author at <a href="http://www.somedomain.com/contact">
www.somedomain.com</a>.<br>
If you see any bugs, please <a href="mailto:webmaster@somedomain.com">
contact webmaster</a>.<br>
You may also want to visit us:<br>
Mozilla Foundation<br>
331 E Evelyn Ave<br>
Mountain View, CA 94041<br>
USA
</address>
Represent headings and subheadings. These elements rank in importance according to the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.
Here there is content about bears with h1 main title, the types of bears section in h2 tags and the brown and black bears in h3 tags and so on.
<h1>All About Bears</h1>
<p>Ipsa, placeat obcaecati distinctio numquam quam amet esse odio eveniet unde porro.</p>
<h2>Types of Bears</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<h3>Brown Bearsr</h3>
<p>Vero nisi deleniti doloremque magnam, earum animi fugiat, similique saepe ex omnis. </p>
<h3>Black Bears</h3>
<p>Itaque libero quos sit velit explicabo? Fuga minima illum dicta. </p>
<h4>Black Bear Habitat</h4>
<p>Itaque libero quos sit velit explicabo? Fuga minima illum dicta. </p>
<h5>Caves</h5>
<p>Itaque libero quos sit velit explicabo? Fuga minima illum dicta. </p>
<h6>Trees</h6>
The p element represents a paragraph. If you have a normal paragraph of text then this is what you use.
<p>This is a paragraph of text inside a p tag.</p>
The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.
<p>Gradually add the <span class="ingredient">olive oil</span>
while running the blender slowly.</p>The HTML <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.
<a href="https://example.com">Website</a>The HTML Strong Importance Element (<strong>) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
<p>Before proceeding, <strong>make sure you put on your safety goggles</strong>.</p>The HTML Bring Attention To element (<b>) is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <b> for styling text; instead, you should use the CSS font-weight property to create boldface text, or the <strong> element to indicate that text is of special importance.
<p>
This article describes several <b class="keywords">text-level</b> elements.
</p>The HTML <em> element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.
<p>This is <em>not</em> a drill!</p>The HTML Idiomatic Text element (<i>) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the <i> naming of this element.
<p>The term <i>bandwidth</i> describes the measure of how much information can pass
through a data connection in a given amount of time.</p>The HTML <br> element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
<address>
Mozilla<br>
331 E. Evelyn Avenue<br>
Mountain View, CA<br>
94041<br>
USA<br>
</address>
The HTML <ol> element represents an ordered list of items — typically rendered as a numbered list
<ol>
<li>right foot up,</li>
<li>left foot slide</li>
<li>Left foot up,</li>
<li>right foot slide</li>
</ol>
The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list.
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
The HTML <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
<ol>
<li>right foot up,</li>
<li>left foot slide</li>
<li>Left foot up,</li>
<li>right foot slide</li>
</ol>The HTML <dl> element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
<dl>
<dt>Firefox</dt>
<dd>
A free, open source, cross-platform,
graphical web browser developed by the
Mozilla Corporation and hundreds of
volunteers.
</dd>
<!-- Other terms and descriptions -->
</dl>
The HTML <img> element embeds an image into the document.The src attribute is required, and contains the path to the image you want to embed.
The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility. Screen readers read this description out to their users so they know what the image means.
<img src="images/mydoc.jpg" alt="dog with a bone">