Basic HTML Tags Used In Web Development

Loadednaija · Loadednaija 12-16-2022, 10:34 AM Senior Member

Basic HTML Tags
We will take a look at the most used basic HTML tags in website design.

this is my short list of top basic HTML tags, that I use frequently. Furthermore, all the tags have a short description and an example, so that you can see immediately what they do.

What are the most used HTML tags?
We analyzed the most popular websites on the web to find out what are the most used tags. It wasn’t surprising to find that the link tag is the most used tag.

This is our list of basic HTML tags:

<a> - for link
<b> - to make bold text
<strong> - for bold text with emphasys
<body> - main HTML part
<br> - for line break
<div> - it is a division or part of an HTML document
<h1> - for titles
<i> - to make an italic text
<img> - for images in document
<ol> - is an ordered list,
<ul> - for an unordered list
<li> - is a list item in bulleted (ordered list)
<p> - for paragraph
<span> - is to style part of text

In short, this is a tag that helps you make a link to a web page, to your page, social media site, product within online store,... The main attribute for this HTML tag is the href (Hypertext Reference) attribute, where you put a link to a website you want to link to. The other attribute is target, it can be used to open a link in a new window, so that users don’t lose focus on the current page.

Example:

This is how you would link to our page: <a href=”

[To see links please register here]

”>Loaded Naija</a>

<B> </B>

If you have a lot of text, then you need to emphasise some words to let the reader know what is important. And you do that with bold parts of the text.

Example:

LoadedNaija has a lot of <b>Web Design</b> Courses.

<BODY> </BODY>
The body part of an HTML document. In fact, this is an integral part of all HTML documents but it is just a tag that marks what is the visible content of the page, where the most content is.

<BR>
This basic HTML tag we let the browser know, where we want some blank lines or breaks in the text. As a matter of fact, using a few breaks makes our text breath, this means that it is easier to read and understand.

Example: (use this text in html, and it will look different)

LoadedNaija will teach you how to Design a Web Pages.<br><br>If only you are willing to learn, you should join our html class.<br>And before you know it you will be a professional.<br><br><br>LoadedNaija.

<DIV> </DIV>
An element which is mostly used to group elements and to act as a template for new controls. The div HTML tag is an element you will use to divide a significant part of an HTML document from other parts. For example, let’s say you have a list of products on your web page, you will use a div for each product.

<HEAD> </HEAD>

The head part of an HTML document. Moreover, this is where you have metadata, which is data about the styling of the document, JavaScript libraries the document uses, title and CSS files.

Headings (levels 1-6, i.e. H3 is a subheading within a H2 subheading). H1, H2,... tags are used to create titles. Why do we need titles, when we can style a text to look like H tags? For instance, titles are used so that search engines and other scrapers (bots) understand the important parts of our documents.

Example:

<h1>Learn Web Design</h1> <br><br><br>In this class you will learn how to create a website.<br><br> <h2>First Steps To Create a Website</h2>Get ideas on how you want your website to look like.

<I> </I>

If you have a lot of text, then you need to emphasize some words to let the reader know what is important. Rather, with italics you can present text that is a little tilted to the right.

Example:

<i>LoadedNaija</i> has a lot of Web Design Courses.

<IMG>

We use the IMG tag to show images. Considering that images can be within files for your web page or anywhere online. In addition, the most important attribute is src (source), which tells where the picture is.

Example (this will show Loadednaija Logo and a text):

Login to LoadedNaija <img src=”https://djmondomusic.com.ng/wp-content/uploads/2022/12/lOADED-1536x1536.jpg” width=”100”>

<LI> </LI>

List item. A tag that is used within an ordered (<OL>) or unordered (<UL>) list. Not to mention, you can have as many as you like.

Example:

<ul> <li>This is single list item.</li> </ul>

<OL> </OL>

Ordered list. Also includes <LI> List Items, which will be numbered automatically. As a consequence, this is very useful if you add more list items, because the numbers will always be in the right order.

Example:

<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>

<P> </P>

The paragraph tag groups text into a paragraph Big Grin

(That is funny). Hence its purpose is to separate a part of text or paragraph, this way you make it more readable and organized..

Example:

<p> LoadedNaija is discussion board/forum which simply aims to be the largest, broadest, music network, informative discussion forum, self-improvement discovery platform for the people. LoadedNaija allows creators to discuss there topics and share there stories, gist, memes, news, podcasts and many more through its website..</p><p> Share You Content & Stories On LoadedNaija “LoadedNaija is discussion board/forum which simply aims to be the largest, broadest, music network, informative discussion forum ..</p>

<SPAN> </SPAN>

The span tag groups text for which we want to have different styling. A good example would be if we wanted to have a red word inside a sentence.

Example:

This is a <span style=”color: green;”>FREE!:</span> Website to share your stories, gists, contents, music and many more.

<STRONG> </STRONG>

Text is emphasised strongly - usually appears in bold, most of the time it looks like bold too. But it has an additional meaning, that this text should be emphasised.

Example:

LoadedNaija is <strong> discussion board/forum which simply aims to be the largest, broadest, music network, informative discussion forum, self-improvement discovery platform for the people. </strong>

<UL> </UL>

An unordered list just means that it will have bullets for each item in the list. List items will have bullets for each item.

Example:

LoadedNaija Web Courses:<br>
<ul>
<li>Web Pages</li>
<li>SEO</li>
<li>Hyperlinks</li>
</ul>
LoadedNaija Web Courses:<br>
<ul>
<li>Web Pages</li>
<li>SEO</li>
<li>Hyperlinks</li>
</ul>