For example, the HTML heading elements ( through ) are block-level elements that automatically place their content onto a new line and push any content that follows onto a new line. Each of these six heading elements represent a different heading size.
Let’s study how this works in practice. At the bottom of your index.html file, try pasting in the highlighted code snippet:
strong>My strong textstrong> br> em>My emphasized textem> h1>Heading 1h1> h2>Heading 2h2> h3>Heading 3h3> h4>Heading 4h4> h5>Heading 5h5> h6>Heading 6h6> Save your file and reload it in the browser. You should receive something like this:
Let’s now inspect the block-level heading elements to study how they differ from the inline-level text elements above. Open up the Firefox Web Developer Inspector and hover over each of the elements to inspect their occupied space as indicated by the blue highlighting. You should be able to confirm that the occupied horizontal space of each of the inline-level elements is determined by its text content, while the occupied horizontal space of each of the block-level elements stretches across the entire web page:
Block-level elements will always push inline-level elements down to the next line, even if you write those HTML elements on the same line of the HTML document. To confirm this for yourself, try writing a block-level element and an inline-level element on the same line of your index.html file. Erase the existing content from your file and add the following code snippet:
strong>My strong textstrong>h1>My headingh1>em>My emphasized texta> Can you guess how this HTML code will render in the browser? Save your file and reload it in the browser. You should receive something like this:
Notice that the heading element has started on a new line and pushed the subsequent text element to a new line even though the elements were written on the same line in the HTML document.
You should now have an understanding of how inline-level and block-level elements are positioned and how they affect the position of nearby elements. Remembering their distinct behaviors can be useful when arranging HTML elements in the future.
We’ll continue learning about new inline and block elements in the tutorials ahead.
- How To Nest HTML Elements
- Nesting Best Practices
- How To Use HTML Attributes
- Using the Style Attribute
- This text is 40 pixels and green.
- HTML: HyperText Markup Language
- Key resources
- Looking to become a front-end web developer?
- Beginner’s tutorials
- Advanced topics
- Reference
- Related topics
- Found a content problem with this page?
- HTML Introduction
- What is HTML?
- A Simple HTML Document
- Example
- My First Heading
- Example Explained
- What is an HTML Element?
- Web Browsers
- HTML Page Structure
- This is a heading
- HTML History
// Tutorial //
How To Nest HTML Elements
This tutorial will teach you how to nest HTML elements in order to apply multiple HTML tags to a single piece of content.
HTML elements can be nested, meaning that one element can be placed inside another element. Nesting allows you to apply multiple HTML tags to a single piece of content. For example, try pasting the following code snippet inside your index.html file:
strong>My bold text and em>my bold and emphasized textem>strong> Save your file and reload it in the browser. (For instructions on creating an index.html file, please see our tutorial here or for loading the file in your browser, see our tutorial here.) You should receive something like this:
My bold text and my bold and emphasized text
Nesting Best Practices
Note that it is recommended to always close nested tags in the reverse order that they were opened.
For example, in the example below, the tag closes first as it was the last tag to open. The tag closes last as it was the first to open.
This sentence contains HTML elements that are strong>em>nested according to best practicesem>strong>. As a counter example, the following HTML code contains tags that are not nested according to best practices, as the tag closes before the tag:
This sentence contains HTML elements that are strong>em>not nested according to best practicesstrong>em>. While not technically necessary for rendering your HTML in the browser, nesting your tags in the proper order can help improve the readability of your HTML code for you or other developers.
// Tutorial //
How To Use HTML Attributes
HTML attributes can be used to change the color, size, and other features of HTML elements. For example, you can use an attribute to change the color or size of a font for a text element or the width and height for an image element. In this tutorial, we’ll learn how to use HTML attributes to set values for the size and color properties of HTML text elements.
An HTML attribute is placed in the opening tag like this:
element attribute="property:value;"> One common attribute is style , which allows you to add style properties to an HTML element. While it’s more common to use a separate stylesheet to determine the style of an HTML document, we will use the style attribute in our HTML document for this tutorial.
Using the Style Attribute
We can change multiple properties of an element with the style attribute. Clear your “index.html” file and paste the code below into your browser. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.
h1 style="font-size:40px;color:green;">This text is 40 pixels and green.h1> Before we load the file in our browser, let’s review each of the parts of this HTML element:
- h1 is the name of the tag. It refers to the largest-sized Heading element.
- style is the attribute. This attribute can take a variety of different properties.
- font-size is the first property we’re setting for the style attribute.
- 40px; is the value for the property font-size , which sets the text content of the element to 40 pixels.
- color is the second property we’re setting for the style attribute.
- green is the value for the property color , which sets the text content color to green
Note that the properties and values are contained by quotation marks, and that each property:value pair ends with a semicolon ; .
Save the file and reload it in your browser. (For instructions on loading the file in your browser, see our tutorial here.) You should receive something like this:
This text is 40 pixels and green.
HTML: HyperText Markup Language
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page’s appearance/presentation (CSS) or functionality/behavior (JavaScript).
«Hypertext» refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.
HTML uses «markup» to annotate text, images, and other content for display in a Web browser. HTML markup includes special «elements» such as , , , , , , , , , , , , , , , , , , , , , , , , and many others.
An HTML element is set off from other text in a document by «tags», which consist of the element name surrounded by » < " and " >«. The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the tag can be written as , , or in any other way. However, the convention and recommended practice is to write tags in lowercase.
The articles below can help you learn more about HTML.
Key resources
If you’re new to web development, be sure to read our HTML Basics article to learn what HTML is and how to use it.
For articles about how to use HTML, as well as tutorials and complete examples, check out our HTML Learning Area.
In our extensive HTML reference section, you’ll find the details about every element and attribute in HTML.
Looking to become a front-end web developer?
We have put together a course that includes all the essential information you need to work towards your goal.
Beginner’s tutorials
Our HTML Learning Area features multiple modules that teach HTML from the ground up — no previous knowledge required.
This module sets the stage, getting you used to important concepts and syntax such as looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a web page.
This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.
Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.
Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.
Advanced topics
Reference
HTML consists of elements, each of which may be modified by some number of attributes. HTML documents are connected to each other with links.
Elements in HTML have attributes. These are additional values that configure the elements or adjust their behavior in various ways.
Global attributes may be specified on all HTML elements, even those not specified in the standard. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.
HTML elements are usually «inline-level» or «block-level» elements. An inline-level element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a «block box».
HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each context has a set of other content categories it can contain and elements that can or can’t be used in them. This is a guide to these categories.
Historical information on quirks mode and standards mode.
Related topics
This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so. Includes examples, links to palette-building tools, and more.
Found a content problem with this page?
This page was last modified on Jul 17, 2023 by MDN contributors.
Your blueprint for a better internet.
HTML Introduction
HTML is the standard markup language for creating Web pages.
What is HTML?
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as «this is a heading», «this is a paragraph», «this is a link», etc.
A Simple HTML Document
Example
My First Heading
My first paragraph.
Example Explained
- The declaration defines that this document is an HTML5 document
- The element is the root element of an HTML page
- The element contains meta information about the HTML page
- The element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
- The element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
- The element defines a large heading
- The
element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
The HTML element is everything from the start tag to the end tag:
Note: Some HTML elements have no content (like the
element). These elements are called empty elements. Empty elements do not have an end tag!
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:
This is a heading
This is another paragraph.
Note: The content inside the section will be displayed in a browser. The content inside the element will be shown in the browser’s title bar or in the page’s tab.
HTML History
Since the early days of the World Wide Web, there have been many versions of HTML:
| Year | Version |
|---|---|
| 1989 | Tim Berners-Lee invented www |
| 1991 | Tim Berners-Lee invented HTML |
| 1993 | Dave Raggett drafted HTML+ |
| 1995 | HTML Working Group defined HTML 2.0 |
| 1997 | W3C Recommendation: HTML 3.2 |
| 1999 | W3C Recommendation: HTML 4.01 |
| 2000 | W3C Recommendation: XHTML 1.0 |
| 2008 | WHATWG HTML5 First Public Draft |
| 2012 | WHATWG HTML5 Living Standard |
| 2014 | W3C Recommendation: HTML5 |
| 2016 | W3C Candidate Recommendation: HTML 5.1 |
| 2017 | W3C Recommendation: HTML5.1 2nd Edition |
| 2017 | W3C Recommendation: HTML5.2 |
This tutorial follows the latest HTML5 standard.