Tutorial
How To Use and Understand HTML Elements
HTML documents are composed of HTML elements. Most HTML elements contain content (such as text or an image) along with HTML tags that tell the browser how to interpret the content (such as a heading or paragraph text). HTML elements can be used to add structure, semantics, and formatting to different parts of an HTML document. An HTML element is often created—but not always—by opening and closing HTML tags, which wrap around a piece of content.
Below is an illustration that labels each of the parts of an HTML element:
Let’s try exploring HTML in practice. Try pasting the following line into your “index.html” file that you created when Setting Up Your HTML Project:
<strong>My strong text</strong>
In this example, the <strong> tag adds strong formatting by enclosing the text with a pair of opening and closing <strong> tags. Note that closing tags are always denoted by a forward slash (/).
Note: You may note that the <strong> tag acts very similar to adding bold styling to the text. You can achieve the same styling effect by using the bold <b> tag, however the <strong> tag adds bold styling and semantic meaning that indicates the text is of strong importance. If you are using the bold styling because you want to note the importance of the text, make sure to use the <strong> tag, which will enable screen readers to announce their importance to the user.
Similarly, the emphasis tag <em> adds italic styling and semantic meaning that indicates the text is emphasized. The italics tag <i> only adds the italic styling to the text. If you are using the italic styling because you want to emphasize the text, make sure to use the <em> tag, which will enable screen readers to announce their emphasis to the user.<$>
To check the results of this HTML code, we can load the “index.html” file in our browser. Though your file is not online, the browser will still be able to interpret the HTML file as if it were a web page document. Make sure to save your “index.html” file before loading it in the browser as only saved updates will be rendered.
How To View an Offline HTML File In Your Browser
You can view an offline HTML file in the browser in several ways:
- Drag and drop the file into your browser
CTRL + Left Click(on Macs) orRight Click(on Windows) to open the file with a browser- Copy the full path of your file and paste the file in your browser bar
If you are using the Visual Studio Code text editor, you can copy the file path using CTRL + Left Click (on Macs) or Right Click (on Windows) on the file “index.html” in the left hand panel and selecting “Copy Path.” Then paste the path in your web browser as illustrated in the gif below:
<$>[note] Note: To load the file in the browser, it’s important that you copy the absolute path, (which refers to the file location relative to the root directory), rather than the relative path, (which refers to the file relative to the current working directory). In Visual Studio Code, “Copy Path” refers to the full file path. Be aware, however, that we will use relative paths of files in other parts of this tutorial.
After loading the file in your browser, you should receive a page that contains the following:
My strong text
Let’s try experimenting with other HTML elements. On the next line of your “practice.html” file, try adding the <em> element, which adds emphasis.
<strong>My strong text</strong>
<em>My emphasized text</em>
Save the file and reload the file in the browser. You should receive something like this:
My strong text My emphasized text
The first phrase should be styled with strong formatting and the second phrase should be styled with emphasis. However, you may be surprised by the side-by-side placement of the two phrases. If you added <em>My emphasized text</em> to the second line of the text editor, you may have expected “My emphasized text” to show up on the line below “My strong text” in the web browser. However, certain HTML elements, such as <strong> and <em>, require you to specify line breaks with additional HTML elements (if you desire lines breaks). We’ll explain why in the next tutorial.
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.
author
Senior Manager, DevEd
Open source advocate and lover of education, culture, and community.
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!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.