Adding html to web page

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.

// 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>. 

element attribute="property:value;"> 

h1 style="font-size:40px;color:green;">This text is 40 pixels and green.h1>