- Log in to:
- Community
- DigitalOcean
- Sign up for:
- Community
- DigitalOcean
Tutorial
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 text</em></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 <em>
tag closes first as it was the last tag to open. The <strong>
tag closes last as it was the first to open.
This sentence contains HTML elements that are <strong><em>nested according to best practices</em></strong>.
As a counter example, the following HTML code contains tags that are not nested according to best practices, as the <strong>
tag closes before the <em>
tag:
This sentence contains HTML elements that are <strong><em>not nested according to best practices</strong></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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Tutorial Series: How To Build a Website with HTML
This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.
At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.
Browse Series: 23 articles
About the authors
author
Senior Manager, DevEd
Open source advocate and lover of education, culture, and community.
Still looking for an answer?
Was this helpful?
Leave a comment
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Try DigitalOcean for free
Click below to sign up and get $200 of credit to try our products over 60 days!
Featured on Community
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Featured Tutorials
Welcome to the developer cloud
DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.
© 2024 DigitalOcean, LLC.Sitemap.