Lesson 2 – HTML5 Elements And Tags

An HTML element is an independent or individual part of an HTML5 document which provides meaning or represents a syntax. In the above example, the title element represents the webpage’s title which appears on the top of web browser in its own title bar. The highlighted area in the above image represents the web page’s title.

HTML5 Start Tag and End Tag

Almost all of the HTML elements are written between a start or opening tag and an end or closing tag except for a few exceptions. Both opening and closing tags enclose elements name in angle brackets. The only difference is that a forward slash precedes the element’s name in the closing tag. Take a look at the following example in which you will see a paragraph tags and element in operation.

<p>Start Tags and End Tags</p>

Many elements also have attributes in their start tags. For example, the image element has a source (src) attribute and the anchor element have a hypertext reference (href) attribute in their opening tags. These attributes provide additional information to the browsers about the element and how to process and render them.

The Paragraph Element

The paragraph element, denoted by <p> and </p>, is one of those HTML5 elements which define HTML5 document’s structure. HTML5 presents all the content within the paragraph’s opening and closing tags as one paragraph.

There is no extra space above and below text in HTML5 by default. However, the browser places the extra space above and below the text when it renders it as a paragraph. The following example further elucidates the concept.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Your First HTML5 Document</title>
</head>
<body>
    <p>This is paragraphy one</p> 
    <p>This is paragraph two</p> 
    <p>This is paragraph three</p>
</body>
</html>

Here is how the browser will render the above code. 

As you can see, the browser places some extra space before and after the texts contained by the paragraph start <p> and end </p> tags.

The Heading Elements

There are in fact six heading elements in HTML5. You can us these elements to represent text or information which is more important than the other information or text. The six heading elements are h1, h2, h3, h4, h5, and h6. These elements specify the relative importance of text. Heading element 1 (h1), usually rendered in large text, represents the most significant piece of information. Remaining heading elements (from h2 to h6) signify progressively less important text and are rendered in progressively smaller fonts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Your First HTML5 Document</title>
</head>
<body>
    <h1>This is Heading 1</h1>
    <h2>This is Heading 2</h2>
    <h3>This is Heading 3</h3>
    <h4>This is Heading 4</h4>
    <h5>This is Heading 5</h5>
    <h6>This is Heading 6</h6>
</body>
</html>

The above code will look something like this in the browser.

In the next chapter, we will discuss HTML5 formatting elements.