Basic Tags | Beginner | Html Css Tutorial

Overview of basic HTML tags and their usage

HTML (HyperText Markup Language) consists of various tags that define the structure and content of a webpage. This tutorial provides an overview of the basic HTML tags and their usage, which are essential for creating simple web pages.

Key Points:

HTML tags define the structure and content of a webpage.
Basic tags are essential for creating simple and well-structured web pages.
Understanding the usage of basic tags is the first step in learning HTML.

Basic HTML Tags

Here is a list of some basic HTML tags and their usage:

<html>...</html>: Defines the root of an HTML document.
<head>...</head>: Contains meta-information about the document.
<title>...</title>: Sets the title of the document, shown in the browser's title bar or tab.
<body>...</body>: Contains the content of the document.
<h1> to <h6>: Defines HTML headings, with <h1> being the highest and <h6> the lowest level.
<p>...</p>: Defines a paragraph.
<a>...</a>: Defines a hyperlink.
<img>: Embeds an image.
<ul>...</ul>: Defines an unordered list (bulleted list).
<ol>...</ol>: Defines an ordered list (numbered list).
<li>...</li>: Defines a list item.
<div>...</div>: Defines a division or section.
<span>...</span>: Defines a span of text.
<br>: Inserts a line break (self-closing).
<hr>: Inserts a horizontal rule (self-closing).

Examples of Basic HTML Tags

Here are some examples of using basic HTML tags:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Tags</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my first HTML page.</p>
    <a href="https://example.com">Visit my website</a>
    <img src="profile.jpg" alt="Profile Picture">

    <h2>My Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <h2>Projects</h2>
    <ol>
        <li>Project One</li>
        <li>Project Two</li>
        <li>Project Three</li>
    </ol>

    <div>
        <span>This is a span inside a div.</span>
    </div>

    <br>
    <hr>
</body>
</html>

HTML Tag Attributes

HTML tags can have attributes that provide additional information about the element. Attributes are added to the start tag and come in name-value pairs. Here are some common attributes:

href: Specifies the URL of the link (used with <a>).
src: Specifies the path to the image (used with <img>).
alt: Provides alternative text for the image (used with <img>).
id: Specifies a unique identifier for the element.
class: Specifies one or more class names for the element.
style: Specifies inline CSS styles for the element.

Here is an example of using attributes:


<a href="https://example.com" target="_blank">Visit Example.com</a>
<img src="logo.png" alt="Website Logo" width="200">
<p id="intro" class="swf-lsn-text-large" style="color: blue;">Welcome to my website!</p>

HTML Comments

HTML comments are used to add notes or explanations within the code. Comments are ignored by the browser and do not affect the rendered output. Comments are enclosed within  tags. Here is an example:


<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments can be used to explain the code -->

Summary

In this tutorial, you learned about the basic HTML tags and their usage. These tags are essential for creating simple and well-structured web pages. Understanding how to use these tags is the first step in learning HTML and developing your web development skills. You also explored HTML tag attributes and comments, which provide additional information and help in organizing the code.