OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES HTML
HTML - Elements

HTML

BASIC

Introduction to HTML Getting Started Basic Structure HTML Syntax HTML Tags HTML Elements HTML Attributes HTML Formatting HTML Links HTML Quotation Element HTML Citation Element HTML Address Element HTML Abbreviation Element HTML Bi-Directional Element HTML Comments HTML Lists HTML Styles HTML Images HTML Favicon Basic Projects

INTERMEDIATE

HTML Meta Tag Attributes HTML Tables HTML Forms HTML Form Elements HTML Form Attributes HTML Input Attributes HTML Form Examples HTML Inline Elements HTML Block Elements HTML Div HTML Id HTML Class HTML iFrame

ADVANCE

HTML Graphics

HTML Elements

PREVIOUS NEXT

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
tips
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
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>

PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT