Elements

HTML is made up of elements, which create the structure and layout of webpages.

HTML Syntax

HTML has one main syntax structure for most of its elements. It consists of an opening and closing tag which surrounds the element's contents. This is what it looks like: 

<tag>content</tag>

Tags

The opening tag shows where the element starts. It contains the element's name, and possible some attributes. The opening tag is followed by the element's content, which is some form of text. The closing tag also contains the element's name but starts with a forward slash.

Tags in HTML are not case-sensitive. <title>, <TITLE>, <Title>, and <TitLE> are treated identically, but it is conventional to write tags in all lowercase for readability and convenience.

Whitespace

The indentation of an HTML file does not actually matter for how things will be displayed on the webpage. Although, indented code tends to be more readable. 

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Website<title>
<meta name="author" content="James Smith">
</head>
<body>
<h1>My <i>Three</i> Favourite Colours</h1>
<ul>
<li>Red</li>
<li>Blue</li>
<li>Yellow</li>
</ul>
</body>
</html>

Excess whitespace and line breaks in HTML are usually ignored. Consecutive spaces will be displayed as a single space. 

<p>Hello         there, 
        CS Club!</p>

Hello there, CS Club!

There are ways to properly display whitespace by using the <pre> element, the <br> element, or HTML escape codes.

Heading Elements

There are six elements that are used for headers in HTML. These are the <h1> to <h6> elements.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

There should only be one <h1> element per page, representing the page title. Heading elements should be used for headers, not making text big or bold. There are better ways to do that using text formatting and CSS.

How to Use Inspect Element

Inspect element is a very useful tool. It lets you look at the HTML source code of every website. But, it can do more than that. It can help you determine the exact dimensions of elements, where they fit on the page, and more. As a web developer, inspect element can help you solve problems with your website faster.

In order to use inspect element, all you have to do is right click anywhere on the page and click Inspect. For more information, check out this article: Inspect Element: How to Temporarily Edit Any Webpage.