Dev. Abok Madaki's Blog

A Beginner’s Guide To Basic Html Tags

Abok Istifanus Madaki's photo
Abok Istifanus Madaki
·

4 min read

A Beginner’s Guide To Basic Html Tags

Table of contents

INTRODUCTION

HTML (Hypertext Markup Language) is the foundation of web development and an essential skill for anyone aspiring to create web pages. Understanding the basic HTML tags is the first step toward building a functional and visually appealing website.

Example of a Simple HTML Language:

 <!DOCTYPE html>
 <html>
 <head>
 <title>Page Title</title>
 </head>
 <body>
<h1>My First Heading</h1>
 <p>My first paragraph. </p>
</body>
 </html>

PREREQUISITES

For this tutorial, you will need the following:

• No / Basic Knowledge of HTML

• Visual Studio Code (VS Code) installed on your Personal Computer (PC)

• A Web Browser installed on your PC; Chrome, Firefox, Microsoft Edge, Safari, etc.

Let's get started!

AIM

At the end of this tutorial, the user should be able to:

•Know HTML tags, which can assist the user in defining headings, paragraphs, lists, images, links, forms, tables, and other elements that make up a webpage.

•Know how HTML tags help in optimizing web pages for search engines.

ANATOMY OF HTML TAGS

The main parts of our element are as follows:

  1. The opening tag: <p> In this case, the opening tag is composed of the element name (p), surrounded by angle brackets, this indicates where the element begins or starts to take effect — in this case where the paragraph begins.

  2. The closing tag: </p> This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.

  3. The content: Essentially, this is the content of the element, which in this case is just text.

  4. The element: The opening tag, the closing tag, and the content together comprise the element. In this case, 1, 2, and 3 are included.

This article will explore commonly used HTML tags and their purposes, providing a solid foundation for your HTML journey. Let's delve into the details:

  1. HTML:

    Every HTML document begins with a doctype declaration, which serves as the building block for HTML. To incorporate all your content inside an HTML file, you need to use HTML tags.

    Example: <html></html>

  2. DOCTYPE:

    The doctype declaration defines the document type and is not considered an HTML tag. It precedes the HTML tag and instructs the website that the document is of HTML type. In HTML5, the declaration syntax is as follows:

    Example: <!DOCTYPE html>

  3. PARAGRAPHS:

    To create paragraphs of text, you can use the <p> tag. It automatically adds line breaks and visually separates blocks of text.

    Example: <p>A Beginner's Guide to Basic HTML Tags</p>

  4. TITLE:

    The <title> tag is used to provide a title to your content and is placed within the <head> tag. It only contains text and does not include any other labels.

    Example: <title>This is a Page Title</title>

  5. The <a> tag defines a hyperlink. It consists of the following syntax:

    <a href="url">link text</a>

    The href attribute is the most essential attribute of the <a> element, indicating the link's destination. The link text is what the reader sees, and clicking on it will redirect to the specified URL address.

  6. IMAGES:

    To include images on your web page, you can use the <img> tag. The src attribute specifies the image source (URL or file path), while the alt attribute provides alternative text displayed if the image cannot be loaded.

    Example:

    <img src="https://images/logo.png" alt="Dev. Abok Madaki">

    The <img> tag does not have a closing tag.

  7. HEADING:

    There are five heading tags in HTML represented by <h1> to <h5>. Heading tags range from the largest (h1) to the smallest (h5). In an HTML document, heading tags are enclosed within the <body> tag.

    Example:

    <h1>Heading 1</h1>

    <h2>Heading 2</h2>

    .

    .

    .

    <h5>Heading 5</h5>

  8. DIV:

    The <div> tag is used to group different tags within an HTML document. It can be assigned a "class" to apply external styling using CSS. Here's an example of a <div> enclosing <h1>, <h2>, and <p> Tags:

    <div>

    <h1>Learn HTML</h1>

    <h2>HTML Tags</h2>

    <p>HTML is a markup language...</p>

    </div>

  9. SPAN:

    The <span> tag is a generic inline container without any default styling. It can be used to group text that you want to style. <span> tags can be used inside other tags such as headings and paragraphs.

    Examples:

    <h2>Learn HTML <span>from experts</span> and build basic projects</h2>

    <p>Learn HTML <span>from experts</span> and build basic projects</p>

  10. CENTER:

    The <center> tag is used to center content within an HTML document.

    Example:

    <center>

    <h2>Centering Content in HTML</h2>

    </center>

    Note: The <center> tag is considered obsolete in HTML5, and using CSS is recommended for content alignment.

CONCLUSION

That concludes today's session, everyone! If you found this article informative and enjoyable, feel free to share it with your friends. Also, remember to give it a thumbs up! I trust that you have gained valuable knowledge about various HTML tags throughout this course. I look forward to connecting with you again in my next article. Until then, take care and farewell! 🙌🏻

HTMLHTML5Frontend Development