Part of the 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.

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:

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

Loading an HTML File

You can load an offline HTML file in the browser in several ways:

  • Drag and drop the file into your browser
  • CTRL + Left Click (on Macs) or Right 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:

Gif of how to copy a file path and load it in your browser

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 bold 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 bold text</strong>
<em>My emphasized text</em>

Save the file and reload the file in the browser. You should receive something like this:

My bold 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 bold 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.


Creative Commons License