**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. Having a knowledge of how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.
When arranging elements in an HTML document, it’s important to understand how these elements take up space on a webpage. Certain elements can take up much more space on the webpage than the content they contain. Understanding the behavior of different element types will help you anticipate how they affect the position of other elements on the page.
In general, there are two different types of elements—inline-level elements and block-level elements—whose spacing defaults behave differently from one another. Below, we’ll describe how the default settings of these elements determine their position on the webpage and relative to the position of nearby elements.
Inline-level Elements
Inline elements are elements whose horizontal width is determined by the width of the content they contain. The <strong> element and the <em> element we covered in the last tutorial are both examples of inline elements.
We can use Firefox’s Web Developer Inspector to inspect the size of HTML elements on a webpage. (If you are using Chrome, you can use the Developer Inspect Elements tool instead but this tutorial will give instructions for Firefox’s Web Developer tool.)
Return to the index.html file that you loaded in your browser. If you need to reload it and don’t remember how, refer to the instructions Loading an HTML File in your Browser from the last tutorial.
Then navigate to the Tools menu item in the top menu bar and select “Web Developer/Inspector.” Selecting this menu item will open up the Inspector interface that allows you to inspect the HTML and CSS of a webpage. Next, hover your cursor over the text My strong text, which should highlight the text in light blue. This highlighting shows the full extent of the space occupied by the element that your cursor is hovering over. As you may have expected, the element’s occupied space is just large enough to contain its text content:
Unlike block-level elements, which we’ll cover in the next section, inline elements do not take up their own line of horizontal space. Thus, inline elements will rest side by side on a webpage if you do not specify a break with an additional HTML element, such as the line break <br> element. This sizing default is often convenient, as you may want to mark up single words in a paragraph with an inline element such as <strong> or <em> without pushing subsequent text to the next line.
Try adding the <br> tag in between your two lines of code in the index.html file. (You will need to return to your file in the text editor.) Note that the <br> element only requires an opening tag and does not wrap around any text:
<strong>My strong text</strong>
<br>
<em>My emphasized text</em>
Save and reload the document in your browser to check your results. You should receive something like this:
My strong text
My emphasized text
Your two phrases should now be on separate lines as they are now separated by the line break element <br>.
#html
