HTML Elements

HTML elements consist of an opening tag, content and closing tag. In this tutorial, I will be putting you through various elements you will be using to create your webpage

iDOCTYPE

This is a declaration that tells the browser, that this is an HTML5 Document.
<iDOCTYPE html>

Html

The document root element of the page that serves as container for other elements.
<html>....</html>

Head

This element serves as a container for information (meta data) about the HTML page.
<head>....</head>

Title

This element contains the title of the document, which is usually seen in browser's title bar. It is coded inside the head tag.
<title>....</title>

Body

This is the element that serves as a container for everything that will be visible on the web page such as: headings, paragraphs, links, images etc.
<body>....</body>

Headings

There are six (6) types of headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. For main headings you can use <h1>, while subheading you can use <h1>. Then <h3> - <h6> are smaller headings.

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Example

TRY IT OUT YOURSELF

Paragraph

This paragraph element is used to display text in form of paragraph inside the web page. Each paragraph starts from a new line.
<p>....</p>

Example

TRY IT OUT YOURSELF

Line Break

This is used to give an horizontal line space. It can be used to add space inside and outside of any texts. It is an empty element. <br />

Example

TRY IT OUT YOURSELF

Horizontal Rule

This is used to insert a horizontal line. It is an empty element. <hr />

Example

TRY IT OUT YOURSELF

TIP:

An Empty element is an element that doesn't require a closing tag. They are usually self closing elements.

Preformatted Text

HTML uses this element to display text exactly the way it is. White spaces here are kept and the text is presented in monospaced font type. <pre>....</pre>

Example

TRY IT OUT YOURSELF

NOTE:

The elements explained above are the major ones; as you continue with this tutorial you will be seeing more elements and with time you will get conversant with all of them.

Block vs Inline Elements

There are two categories of elements in HTML, they are: block and inline elements

BLOCK ELEMENTS

They occupy 100% of the entire width, and create a line break afterwards. Some examples of block elements are:

<h1>
<p>
<div>
<ul>
<li>
<form>
<ol>
<address>
<article>
<fieldset>
<nav>
<main>
<dl>
<dt>
<pre>
<section>
<header>
<video>

INLINE ELEMENTS

They occupy only the space that is required of its content, and they do not create a line break afterwards. Examples of inline elements are:

<a>
<span>
<img>
<input>
<button>
<label>
<cite>
<select>
<textarea>
<abbr>
<samp>
<big>
<acronym>

White Space

As you might have noticed, if your HTML code contains consecutive blank spaces, newlines, or tabs, the browser displays the web page with only one whitespace character (a blank space). The only way to prevent this is to use the Preformatted Text tag. <pre>

HTML

BASIC

INTERMEDIATE

ADVANCE

HTML Elements

iDOCTYPE

Html

Head

Title

Body

Headings

Example

Paragraph

Example

Line Break

Example

Horizontal Rule

Example

Preformatted Text

Example

Block vs Inline Elements

BLOCK ELEMENTS

INLINE ELEMENTS

White Space

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT