11 MOST USEFUL HTML TAGS
There's no doubt that, HTML remains the foundation on which every webpage is build upon, no matter the design, the programming language used or framework or library it implementation depends greatly on HTML. In HTML 5 we have about 100 or so tags, but we often use some of the tags the most at any point in time while developing our web pages. This 11 tags for me is found them most useful.
Before we continue what are HTML tags, HTML tags helps to distinguish HTML content on any webpage, text from image, heading from paragraph etc.
The output served to the browser is also wrapped within the HTML tag. For instance <h1> My heading</h1> will give us an output of "my heading" with a height of. 32px. Consequently, every HTML tag has a starting tag and an ending tag which is enclosed in angle brackets. We will explore some of them one after the other;
1. Heading (<h1> to <h6>)
Headings just like in our normal settings of writing is the most important text in any piece, HTML heading ranges from h1 to h6 which decreases in size as the number increases.
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
2. Paragraph (<p>)
The paragraph tag is us to start a text content in a webpage. Is has starting tag as and an ending tag with the text enclosed between see example below
<p>This is a paragraph.</p>
3. Italic or Emphasis (<i> / <em>)
The HTML <i> element defines italic text, without any extra importance.
Example
<p>This text is normal <i>This text is italic</i>.</p>
The HTML <em> element defines emphasized text, with added semantic importance.
Example
<p>This text is normal <em>This text is emphasized</em>.</p>
- Bold or Strong ( <b> /<strong>)
The HTML <b> element defines bold text, without any extra importance.
Example
<p>This text is normal <b>This text is bold</b>.</p>
The HTML <strong> element defines strong text, with added semantic "strong" importance.
Example
<p>This text is normal <strong>This text is strong</strong>.</p>
5. Anchor/link (<a>)
All HTML links are hyperlinks. A hyperlink is a text or an image you can click on, and jump to another document. It primarily aide navigation.
<a href="url">link text</a>
Example
<a href="www.facebook.com">Visit Facebook</a>
6. Unordered List, Ordered List & List Item (<ul> <ol> & <li>)
List are great way to arrange items either sequentially or otherwise (ascending or descending order). In HTML we have two types ordered list <ol> and unordered list <ul> with list item <li> wrap between opening and closing tag.
Example
<h1>Unodered list<h1/>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h1>Odered list<h1/>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
7. Blockquote (<blockquote>)
The HTML <blockquote> element defines a quoted section. Browsers usually indent <blockquote> elements.
Example
<p>Here is a quote by Abraham Lincoln</p>
<blockquote cite="https://www.google.com/amp/s/www.goalcast.com/2018/01/05/abraham-lincoln-quotes/amp/">
My concern is not whether God is on our side; my greatest concern is to be on God’s side, for God is always right.
</blockquote>
8. Horizontal Rule <hr>
Horizontal Rule is use to create horizontal line in a webpage and to separate contents.
Example
<p>This is an example of <b>Horizontal Rule<b>.</p>
<hr>
<p>This is an example of <b>Horizontal Rule<b>.</p>
<hr>
<p>This is an example of <b>Horizontal Rule<b>.</p>
9. Line Break (<br> )
The HTML <br> tag produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant. While writing a text content in a webpage like in article or peom.
Example
<p>LOVE
<br> stroke of unknown imagination <br>
steered on the wheels of commitment <br>
voice to rancor deep thoughts of the heart.</p>
10. Image (<img>)
There's no way one will develop a web page without involving images, in today's reality, HTML image tag allow for the insertion of images to the webpage. By default The <img> tag is empty, it contains attributes only, and does not have a closing tag.
Example
<img src="url" alt="some_text">
<img src="File:Abraham_Lincoln_O-77_matte_collodion_print.jpg" alt="Abraham Lincoln">
11. Division <div>
The division tag is the most generic HTML container element, which partion the webpage into different container which allows for individual manipulation of these part without affecting others either by CSS or JavaScript. Is is start by <div> with the tags inside and end with closing tag </div>
Example
<div>
<p>Hello! This is an example of div container</p>
</div>
Check out the summary of all examples in this post while you practice website development with html5 here.
Fine the code from the Link for download and practice on your local computer.