Learn the latest website design tips and tricks! Explore our newest articles now.

Introduction to HTML Tags and Attributes with Examples

HTML Introduction Level 1
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

 Hello! Welcome to Tecky AaryaN. 

Today i will Share HTML Introduction then this post is just for you.

HTML (HyperText Markup Language) was created in 1991 by Tim Berners-Lee, who is considered the father of the World Wide Web. He developed HTML as a markup language to structure web pages, allowing them to be displayed by web browsers. At the time, Berners-Lee was working at CERN (the European Organization for Nuclear Research) and recognized the need for a system that would make it easy for scientists to share their research.

The first official version of HTML was standardized in 1993 with HTML 2.0. Since then, HTML has evolved through several versions, including HTML 3.2, HTML 4.01, and the modern and highly flexible HTML5, which is widely used today to create rich and interactive websites.

It's used to structure web content, and it consists of tags and attributes.

HTML Tags

Tags are the building blocks of HTML. They define how the content on a web page will be displayed. HTML tags usually come in pairs – an opening tag and a closing tag. Some tags are self-closing as well.

Opening tag: <tagname>

Closing tag: </tagname>

Example:
<p>Hey, I am AaryaN.</p>

In this case, <p> is the opening tag, and </p> is the closing tag, and the content is "This is a paragraph."


1: Common HTML Tags:

1. <html>: This tag defines the start of an HTML document.

2. <head>: Contains meta-information about the document (like title, metadata).

3. <title>: Sets the title of the webpage shown in the browser tab.

4. <body>: This tag contains the content of the HTML page like text, images, links, etc.

5. <h1> to <h6>: Header tags, <h1> being the largest and <h6> the smallest.

6. <p>: Paragraph tag.

7. <a>: Anchor tag used for creating hyperlinks.

8. <img>: Image tag.

9. <div>: Division tag, used to group elements.

10. <span>: Inline container for text and other elements.

11. <ul>, <ol>, and <li>: Unordered list, ordered list, and list item tags.

12. <table>, <tr>, <td>: Table, table row, and table data tags.

13. <form>: Tag used to create input forms.

14. <input>: Used to take user input.

15. <button>: A clickable button.

16. <hr>:This stands for "horizontal rule" and is used to insert a horizontal line on a web page.

- It is often used to separate sections of content.

- It is a self-closing tag, meaning it does not need a closing tag.

17.<br>: - This stands for "break" and is used to insert a line break, moving the text or content to a new line.

- Like <hr> <br>, it is also a self-closing tag.


2: HTML Attributes

Attributes provide additional information about HTML elements. They are always included inside the opening tag and come in name-value pairs.

Example:
<a href="https://www.example.com">Visit Example</a>

Here, href is the attribute for the <a> tag, and its value is the link to the website.


Common HTML Attributes:

1. href: Specifies the URL of a link (used with <a>).

2. src: Specifies the image source (used with <img>).

3. alt: Provides alternative text for an image if it cannot be displayed.

4. id: A unique identifier for an HTML element.

5. class: Specifies one or more class names for an element.

6. style: Adds inline CSS styles to an element.

7. type: Specifies the type of input (used with <input>).

8. value: Specifies the value of an input field.

9. placeholder: Provides a hint in an input field.

10. title: Adds a tooltip to the element.


Headings Explanation:

H{1-6} = Heading + 1 to 6 any number.

<h2>: Highest level heading (most important).

<h2>: Second level heading.

<h3>: Third level heading.

<h4>: Fourth level heading.

<h5>: Fifth level heading.

<h6>: Lowest level heading (least important).These headings are used to structure the content hierarchically.


Simple Webpage Example Without CSS(Design):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Page</title>
</head>
<body>

    <h1>Welcome to My Website</h1>

    <p>This is a simple webpage to demonstrate HTML tags and attributes.</p>

    <h2>About Me</h2>
    <p>My name is AaryaN, and I love coding.</p>

    <img src="profile.jpg" alt="John's Profile Picture" width="200" height="200">

    <h2>Contact Me</h2>
    <a href="mailto:support@teckyaaryan.com">Send me an email!</a>

    <h2>Favorite Programming Languages</h2>
    <ul>
        <li>JavaScript</li>
        <li>CSS</li>
        <li>HTML & CSS</li>
    </ul>

</body>
</html>

This is Level 1 For Beginner I will Make level 2 Soon On HTML with CSS introduction .

Conclusion

I hope you Understand This HTML Introduction. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright: 

Post a Comment

Please don't share any sensitive or personal details here.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.