HTML Tutorial

HTML Elements

HTML element consists of HTML tags and contents.

HTML tags are keywords surrounded by angle brackets (<keyword>).

These tags normally come in pairs, beginning with opening tag or start tag and ending with the closing tag or end tag.

The content to be formatted is therefore written in between these tags:

<tagname>content to be formatted</tagname>

Everything from the beginning of a start tag to the end tag is called an HTML Element.

<p>Paragraph Text</p>
start tag
end tag

  Do It Yourself

The HTML Elements are what makes up the HTML document from the HTML start tag <html> to the HTML end tag </html>.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >
    <title>Title of the document</title>
  </head>
  <body>
    <p>HTML></p>
  </body>
</html>

  Do It Yourself

It is therefore the responsibility of a web developer to know and understand these tags, in order to become professional in building webpages. Don't worry, no man is omniscient, you can always come back to this website to refresh your memory if any tag skips your head! It is normal.

See live examples of a few HTML elements that are commonly used:

The <b> Element

The <b> (HTML Bring Attention To element — formerly known as the Boldface element) is used to draw readers' attention to a text content. It may be used to indicate keywords in a particular statement with no other special importance. This is most times rendered in browsers as bold texts, but should not be typically used for styling a text as bold. Use the CSS font-weight property for this purpose instead.

Example

<b>Keyword text</b>
  Do It Yourself

Live Result

The <i> Element

The <i> (HTML Idiomatic Text element  — historically known as the Italic element) is used to indicate a text in an alternate voice or mood, in a manner that indicates a different quality of a text — such as a technical term or an idiom from another language. This is most times rendered in browsers as italicized texts, but should not be typically used for styling text as italics. Use the CSS font-style property for this purpose instead.

Example

<i>idiomatic phrase</i>
  Do It Yourself

Live Result

The <u> Element

The <u> (HTML Unarticulated Annotation element — formerly known as Underline element in older versions of HTML) is used to indicate that a text should be marked differently from other texts. This is most times rendered in browsers as underlined texts, but should not be typically used for styling text as underlined. Use the CSS text-decoration property for this purpose instead.

That Is

<b>Unarticulated text</b>
  Do It Yourself

Live Result

Basic HTML Elements

We have gathered lists of important HTML elements you should know as a beginner, we will discuss the rest in later chapters.

Element Tag Element name Functions Examples
<a>   Creates a link to another document. <a href="../../formus/">Our Forum Index</a>
<abbr>   Indicates the content is an acronym of a term. <abbr>inc.</abbr>
<address>   Used to identify the author's contact information in an HTML document. <address>
Plot 105, Ikeja, Lagos.
</address>
<area>   Defines an image section.  
<b>   Used to bring attention to important texts. <b> Important text </b>
<base>   Defines information regarding to the base link of the page ______
<blockquote>   Seperates a section. <blockquote>
Seperate Section
</blockquote>
<body>   Defines the body of an HTML webpage.  
<br>   Breaks to a new line.
It starts the next content on a new line		 1.<br>
2.<br>
3.
<button>   Defines a clickable button
<canvas>   Used to draw graphics, on the fly, via scripting (usually JavaScript) ________________
<caption>   Defines a text that serves as a label (caption) for a table _________
<cite> HTML Citation element Used to describe a reference to a work or project ___________
<code> Inline Code element Defines a piece of computer code 
<?php echo 'Hello World!' ?>
<dd>   Defines a description/value of a term in a description list This is a description
<del>   Defines text that has been deleted from a document This is text has been deleted.
<details>   Defines additional details that the user can view or hide This is a detailed text.
<dfn>   Represents the defining instance of a term This is a definition.
<dialog>   Defines a dialog box or window _______________
<div>   Defines a section in a document This is a section.
<dl>   Defines a description list
This is a description
<dt>   Defines a term/name in a description list ____________
<em>   Defines emphasized text  This is an emphasized text.
<embed>   Describes an external non-HTML application ______________
<fieldset>   Groups related elements in a form ________________
<figcaption>   Defines a caption for a <figure> element _______________
<figure>   Specifies self-contained content This is a figure content.
<footer>   Defines a footer for a document or section _____________
<form>   Defines an HTML form for user input _____________
<h1> <h2> <h3> <h4> <h5> <h6>   Defines HTML headings

This is an heading.
<head>   Defines information about the document _________
<header>   Defines a header for a document or section ___________
<hr>   Defines a thematic change in the content. Usually appears as a horizontal line.
<html>   Defines the root of an HTML document. This whole document is embedded in an HTML element. ______________
<i>   Defines a part of text in an alternate voice or mood, usually in italics This is an example.
<iframe>   Defines an inline frame This is a figure content.
<img>   Defines an image
<input>   Defines an input field. Eg( text filed) This is an emphasized text
<ins>   Defines a text that has been inserted into a document _________
<label>   Defines a label for an <input> element _________
<li>   Defines a list item
  • This is a list-item.
<link>   Defines the relationship between a document and an external resource (most used to link to style sheets and favicon) _________
<main>   Specifies the main content of a document _________
<mark>   Defines marked/highlighted text for illustration. This is a marked text
<meta>   Defines metadata about an HTML document <meta name="Author" content="Erisan Olasheni" />
<meter>   Defines a scalar measurement within a known range (a gauge) _________
<nav>   Defines navigation links
<noscript>   Defines an alternate content for users that do not support client-side scripts (like JavaScript). _________
<ol>   Defines an ordered list
    This is an ordered list.
<option>   Defines an option in a drop-down list
<p>   Defines a paragraph

This is a paragraph.
<param>   Defines a parameter for an object _______
<pre>   Defines preformatted text 
This is a pre-formatted text.
<progress>   Represents the progress of a task ________
<q>   Defines a short quotation This is an "example".
<rp>   Defines what to show in browsers that do not support ruby annotations ________
<rt>   Defines an explanation/pronunciation of characters (for East Asian typography) ________
<ruby>   Defines a ruby annotation (for East Asian typography) ________
<s>   Defines text that is no longer correct be striking a line over the text example
<samp>   Defines sample output from a computer program ________
<script>   Defines a client-side script <script> alert('Hello World!'); </script>
<section>   Defines a section in a document ________
<select>   Defines a drop-down list
<source>   Defines multiple media resources for media elements (<video> and <audio>) <video>
<source src="video_url.mp4" /> </video>
<span>   Defines an inline section in a document This text is wrapped in a span.
<strike>   Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text		 example
<strong>   Defines important text, usually in a bold form. This is an example
<style>   Defines style information for a document <style type="text/css"> </style>
<sub>   Defines subscripted text. Mostly used for mathematical operations. Example: 52.
<sup>   Defines superscripted text. Mostly used for mathematical operations. Example:24
<table>   Defines a table
     
<tbody>   Groups the body content in a table ________
<td>   Defines a cell in a table
 
<textarea>   Defines a multiline input control (text field)  
<tfoot>   Groups the footer content in a table _________
<th>   Defines a table heading
Heading 1 Heading 2 Heading 3
<thead>   Groups the header content in a table ________
<time>   Defines a date/time  
<title>   Defines a title for the document This document title is: HTML Tags
<tr>   Defines a row in a table ________
<tt>   Not supported in HTML5. Use CSS instead.
Defines teletype text		 This is a teletype text
<u>   Defines text that should be stylistically different from normal text, by underlining it. This is an example.
<ul>   Defines an unordered list
  • List Item 1
  • List Item 2
  • List Item 3
<var>   Defines a variable _________
<video>   Defines a video or movie <video> <source src="video_url.mp4" /></video>
<br>   Defines a possible line-break _________

  Do It Yourself

HTML Elements based on their Functions

HTML provides some basic tags that perform special functions in document representation. They are fully explained in the table below.

Functions HTML Elements Description
Heading <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Provides headings to HTML documents.
Paragraph <p> Used to provide paragraphs in documents.
Horizontal Rule <hr> Used to make horizontal lines in documents.
Link <a> Anchor tags are used to link to pages in HTML.
Media <img>, <video>, <audio>

Used to add media files to web pages. <img> adds an image to an HTML document, <audio> adds audio files, <video> is used to add up video files. 

Note: <audio>, <video> are added in HTML5.
List <ul>, <ol>, <li>

HTML list tags are used to denote lists in HTML

 

<ul> - Used to create unordered lists.

<ol> - Used to create ordered lists.

<li> - Used to create items in lists.
Divider <div>

<div> - Used to create divided sections.
Span <span>

<span> - Used to create wraps around other elements.

 

  Do It Yourself

What You Should Know at the End of This Lesson

  • You should understand HTML tags are and there functions.
  • You should be able to define the HTML element.
  • You should understand and know the basic HTML tags and their functions.
Previous Chapter Next Chapter