-
Notifications
You must be signed in to change notification settings - Fork 96
06. Block Elements
HTML tags fall into different categories. Block elements are those that by default force a new line of content before and after them. The most common block element is <p> used to define paragraphs.
When experimenting with the following code snippets ensure you place them in the index.html file. They should also all go inside of the <body>.
<body>
<p>This is a paragraph of text.</p>
</body>HTML provides six tags <h1> through to <h6> that provide a heading hierarchy for a document. <h1> is the most important heading through to <h6> as the least important of the six.
<h1>This is heading style one</h1>
<h2>This is heading style two</h2>
<h3>This is heading style three</h3>
<h4>This is heading style four</h4>
<h5>This is heading style five</h5>
<h6>This is heading style six</h6>By default the heading styles appear bold and decrease in size with <h6> the smallest.
Tip
The default styling of these elements can changed with CSS Cascading Style sheets. That is colours, fonts and sizing can be added to each element via CSS (more later).
To create a line break as opposed to a paragraph there is the <br> tag. Providing a closing pair for this tag is unnecessary. It can be either written as <br> or <br/>.
Warning
You cannot nest block element such as a <p> or <h1> to <h6> inside one another ie this is WRONG
<body>
<p>This is a <p>not allowed</p> as it is nested.</p>
</body>Web designers often talk about ‘semantic markup’. Semantics is the study of meaning. The heading tags are great examples of semantic markup as they are tags with meaning. That is a <h1> is heading one – the most important heading in the document. At this stage we are not concerned about the appearance of a <h1>, that is the role of CSS, but we can note that by default it is in a larger font that other elements.