Hello! Welcome to Tecky AaryaN.
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>
<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>
Code Editor
Output
This is Level 1 For Beginner I will Make level 2 Soon On HTML with CSS introduction .