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.
- How TO — Make a Website
- Create a Website from Scratch
- A «Layout Draft»
- Navigation bar
- Side Content
- Main Content
- Footer
- First Step — Basic HTML Page
- Example
- My Website
- Example Explained
- Creating Page Content
- Header
- My Website
- Navigation Bar
- Content
- Footer
- Footer
- W3Schools Spaces
// 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.
How TO — Make a Website
Learn how to create a responsive website that will work on all devices, PC, laptop, tablet, and phone.
Create a Website from Scratch
A «Layout Draft»
It can be wise to draw a layout draft of the page design before creating a website:
Navigation bar
Side Content
Main Content
Footer
First Step — Basic HTML Page
HTML is the standard markup language for creating websites and CSS is the language that describes the style of an HTML document. We will combine HTML and CSS to create a basic web page.
Example
My Website
A website created by me.
Example Explained
- The declaration defines this document to be HTML5
- The element is the root element of an HTML page
- The element contains meta information about the document
- The element specifies a title for the document
- The element should define the character set to be UTF-8
- The element with name=»viewport» makes the website look good on all devices and screen resolutions
- The element contains the styles for the website (layout/design)
- The element contains the visible page content
- The element defines a large heading
- The
element defines a paragraph
Creating Page Content
Inside the element of our website, we will use our «Layout Draft» and create:
- A header
- A navigation bar
- Main content
- Side content
- A footer
Header
A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:
My Website
A website created by me.
Then we use CSS to style the header:
.header <
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c; /* green background */
color: white; /* white text color */
>
/* Increase the font size of the element */
.header h1 font-size: 40px;
>
Navigation Bar
A navigation bar contains a list of links to help visitors navigating through your website:
Use CSS to style the navigation bar:
/* Style the top navigation bar */
.navbar overflow: hidden; /* Hide overflow */
background-color: #333; /* Dark background color */
>
/* Style the navigation bar links */
.navbar a float: left; /* Make sure that the links stay side-by-side */
display: block; /* Change the display to block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center; /* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none; /* Remove underline */
>
/* Right-aligned link */
.navbar a.right float: right; /* Float a link to the right */
>
/* Change color on hover/mouse-over */
.navbar a:hover background-color: #ddd; /* Grey background color */
color: black; /* Black text color */
>
Content
Create a 2-column layout, divided into a «side content» and a «main content».
We use CSS Flexbox to handle the layout:
/* Ensure proper sizing */
* box-sizing: border-box;
>
/* Column container */
.row <
display: flex;
flex-wrap: wrap;
>
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side flex: 30%; /* Set the width of the sidebar */
background-color: #f1f1f1; /* Grey background color */
padding: 20px; /* Some padding */
>
/* Main column */
.main <
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
>
Then add media queries to make the layout responsive. This will make sure that your website looks good on all devices (desktops, laptops, tablets and phones). Resize the browser window to see the result.
/* Responsive layout — when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) .row <
flex-direction: column;
>
>
/* Responsive layout — when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) .navbar a float: none;
width: 100%;
>
>
Tip: To create a different kind of layout, just change the flex width (but make sure that it adds up to 100%).
Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.
Tip: To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.
What is box-sizing?
You can easily create three floating boxes side by side. However, when you add something that enlarges the width of each box (e.g. padding or borders), the box will break. The box-sizing property allows us to include the padding and border in the box’s total width (and height), making sure that the padding stays inside of the box and that it does not break.
You can read more about the box-sizing property in our CSS Box Sizing Tutorial.
Footer
At last, we will add a footer.
Footer
.footer <
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd; /* Grey background */
>
Congratulations! You have built a responsive website from scratch.
W3Schools Spaces
If you want to create your own website and host your .html files, try our website builder, called W3schools Spaces: