Structure of an HTML Document
HTML5 Elements: Page Structure
An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag. A Web page has structure and the HTML provides this. The CSS styles the page.
Start with <!DOCTYPE html>
The <!DOCTYPE> declaration should be the very first thing in your HTML document, before the <html> tag. It's not an HTML tag; it's an instruction to the web browser about what version of HTML the page is written in. Keep away "Quirks Mode."
Main root
| Element | Description |
|---|---|
<html> | The HTML <html> element represents the root (top-level element) of an HTML document, so it is also called the root element. All other elements are descendants of this element. |
Document metadata (the <head> tag)
The `
tag holds metadata which is information about the page. This includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information. Things in this element don't render in the browser.| Element | Description |
|---|---|
<link> | The HTML <link> element sets up external resources like CSS stylesheets and script files. |
<meta> | The HTML <meta> element represents metadata - which is information about data! Use <meta charset="UTF-8"> so your text renders like it is supposed to. You can use <meta name="Your name"> to say who made your website! Use <meta name="viewport" content="width=device-width, initial-scale=1.0"> to make sure the browser checks to see what size the viewer's screen is. Plus there is a lot more you can do with the <meta> tag. |
<style> | The HTML <style> element contains style information for a document, or part of a document. |
<title> | The HTML Title element (<title>) defines the title of the document, shown in a browser's title bar or on the page's tab. |
Then the <body>
| Element | Description |
|---|---|
<body> | The HTML <body> Element represents the content of an HTML document. There can be only one <body> element in a document. |
Content sectioning
Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content. Here it is good to use semantic tags which describe the information in a meaningful way.
| Element | Description |
|---|---|
<article> | The HTML <article> element represents a self-contained composition in a webpage. It's like the <figure> tag but for text! This means that the text or article will make sense on its own. Example: posting some different reviews about a game you feature on your website. Put those each in an <article> tag. Articles can contain <section>'s and <h1>'s. They are like little mini pages within a page. |
<aside> | The HTML <aside> element represents a portion of a document whose content is only indirectly related to the document's main content. |
<div> | The HTML Content Division element (<div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS. |
<footer> | The** HTML <footer> element** represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents. |
<header> | The HTML <header> element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, a search form, an author name, and so on. |
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> | The HTML <h1>--<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. |
<main> | The HTML <main> element represents the dominant content of the <body> of a document, portion of a document or application. 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. |
<nav> | The HTML <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes. |
<section> | 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. |
Text content
Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. Important for accessibility and SEO, these elements identify the purpose or structure of that content.
| Element | Description |
|---|---|
<blockquote> | The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element. |
<figcaption> | The HTML <figcaption> element represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the <figure> element which is its immediate ancestor. |
<figure> | The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit. |
<hr> | The HTML <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section); historically, this has been presented as a horizontal rule or line. |
<li> | 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> | The HTML <ol> element represents an ordered list of items, typically rendered as a numbered list. |
<p> | The HTML <p> element represents a paragraph of text. |
<pre> | The HTML <pre> element represents preformatted text which is to be presented exactly as written in the HTML file. |
<ul> | The** HTML <ul> element** represents an unordered list of items, typically rendered as a bulleted list. |
Tags for editing
These elements let you provide indications that specific parts of the text have been altered.
| Element | Description |
|---|---|
<del> | The HTML <del> element represents a range of text that has been deleted from a document. |
<ins> | The HTML <ins> element represents a range of text that has been added to a document. |
Inline semantic tags
Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
| Element | Description | |
|---|---|---|
<a> | The HTML <a> element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL. | |
<b> | 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. | |
<br> | 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. | |
<cite> | The HTML Citation element (<cite>) is used to describe a reference to a cited creative work, and must include either the title or the URL of that work. | |
<code> | The HTML <code> element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. | |
<em> | 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. | |
<s> | The HTML <s> element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate. | |
<span> | 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. | |
<strong> | The HTML Strong Importance Element (<strong>) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type. |
Image and multimedia
HTML supports various multimedia resources such as images, audio, and video.
| Element | Description |
|---|---|
<area> | The HTML <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element. |
<audio> | The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream. |
<img> | The HTML <img> element embeds an image into the document. |
<map> | The HTML <map> element is used with <area> elements to define an image map (a clickable link area). |
<video> | The HTML Video element (<video>) embeds a media player which supports video playback into the document. |