<h1>This is a header</h1>
<h2>This is a subheader<h2>
Notice how the browser interpreted your tags and displayed your titles on separate lines and in different font sizes? This is because we have given context to our data: we have told the browser which header is more important, and which header is less important. You can use these tags any number of times across a webpage, constructing a hierarchy of data and denoting importance.
Notice how the browser knew to put each header on a new line; that’s because these header elements are known as ‘block elements’. You can think of a block element as an element that has an invisible box around it as wide as your webpage can go, which forces the next element to be positioned below it.
At this point you might be thinking ‘what about text that isn’t a header?’ Well, for that we have a paragraph tag – a nice and simple little tag – denoted simply with a <p>. Contrasting with the header tag, there is only one level of paragraph tag. The <p> tag simply means paragraph. Each block of text that you would deem to be a paragraph, and so should appear as a block of text, must be contained within a <p> tag. You can have multiple <p> tags following on from one another and the browser will know to give a space between each one to denote the new paragraph. Now to put this into practice.
Let’s take our code from the last section and expand on it by adding some <p> tags underneath our headers. Feel free to experiment with any number of paragraphs at any location. Take a look at this news article example: