ESSENTIAL HTML TAGS AND THEIR FUNCTIONS

Image by Muhammad Hasan Firdaus from Pixabay

HTML Tags

HTML Tags

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

• HTML tags normally come in pairs like <p>and <p/>
• The first tag in a pair is the start tag, and the second tag is the end tag
• The end tag is written like the start tag but with a forward slash inserted before the tag name

The start tag is also called the opening tag, and the end tag is the closing tag.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

The lesser the number, the bigger the text between the opening and closing tag

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

Example below:

Result below:

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

Note: These <p> tags occupy the whole width of the browser and come with a default margin-top and margin-bottom

Example below:

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

Result below:

This is a paragraph.

This is a paragraph.

This is a paragraph.

HTML Links

HTML links are defined with the <a> tag:

<a href="../index.html">This is a link</a>

The result below:

This is a link

The link navigates you to another page entirely.

Note: The content inside by default comes with an underline and in purple color.

HTML Images

HTML images are defined with the <img> tag.

The source file ( src ), alternative text ( alt ), width, and height are provided as attributes:

<img src="MTN.jpg" alt="MTN.com" width="104" height="142">

The result is above as you can see. The images come with the width and height you gave them, the bigger the width and height, the bigger the image.

HTML Buttons

HTML buttons are defined with the <button> tag:

<button>Submit</button>

The button comes in a default formation in different browsers shown above

HTML Lists

HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):

Example below:

<h2>An Unordered HTML List</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

<h2>An Ordered HTML List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

Results below:

An Unordered HTML List
.Coffee
.Tea
.Milk

An Ordered HTML List
1.Coffee
2.Tea
3.Milk

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example below:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Result below:

Coffee
- black hot drink
Milk
- white cold drink

HTML break

<br> is an empty element without a closing tag (the <br> tag defines a line break).

Empty elements can be “closed” in the opening tag like this: <br />.

Example below:

<p> My name is Emmanuel <br> Jonh from Spain  <p/>

Result below:

My name is Emmanuel
Jonn from Spain

HTML bold

<b> Tags make a text become bold

Example below:

<b> I'm bold <b>

Result below:

I'm bold

HTML italics

The <i> tag makes a text come in the form of italics

Example below:

<i> This is an italics text<i>

Result below:

This is an italics text

HTML horizontal line

The <hr> tag is used to create a horizontal line in the browser

Example below:

<p> Their is a horizontal line below <p/>
<hr>
<p> Their is a horizontal line above <p/>

Result below:

There is a horizontal line below
---------------------------------------------------------------------------
There is a horizontal line above

Note: the horizontal lines take the width of the entire browser by default.

HTML underlines

The <u> tag is used to underline a certain text provided in between the opening and closing tag

Example below

<u> Visit our HTML tutorial </U>

Result below:

Visit our HTML tutorial

HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table of data/cells is defined with the <td> tag.

Example below:

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jonh</td>
    <td>Faith</td>
    <td>70</td>
  </tr>
  <tr>
    <td>Marry</td>
    <td>David</td>
    <td>89</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>James</td>
    <td>79</td>
  </tr>
</table>

Result below:

Firstname  Lastname        Age
John        Faith          70
Marry       David          89
Peter       James          79

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

• Use the HTML <table> element to define a table
• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table heading

HTML videos

The HTML5 <video> element specifies a standard way to embed a video in a web page.

Example below:

<video controls width="900" height="700">
  <source src="./christBrown-NoGuidance(OfficialVideo)ft.Drake" type="video/mp4">
</video>

Result below:

Note: The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files that the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

To start a video automatically use the autoplay attribute:

<video autoplay>
  <source src="movie.mp4" type="video/mp4">
</video>

In conclusion:

there are a lot of HTML tags we are not going to mention in this edition

tags like <center>, <audio> etc.

follow me at @bomaboy1996 for more articles