What is HTML?
It stands for Hypertext Markup Language. In simple words, HTML provides the structure and content of a web page, CSS enhances its presentation, and JavaScript adds interactivity and dynamic behavior to the user interface.
Tools required for Web Development
- A Code Editor : Visual Studio Code(recommended) - Download
- Live Server Extension(By Ritwick Dey) - Learn how to install
What is a Tag?
In HTML, a tag is like a label that tells the browser what a piece of content is and how it should be treated.
Example:
- To make a paragraph, use <p> and </p>.
What is an Element in an HTML?
Everything from starting tag to ending tag is called an HTML Element.
Heading Tags-<h1> to <h6>
There are total of Six levels of heading from h1 to h6 with every number increasing the significance of heading decreases.
Note:H1 is bigger than H2, no we don't use headings like this it means H1 has more importance than H2 which helps in SEO optimization and also act as a great help to screen readers for blind people.
Anchor Tags-<a>
This tag helps us to create hyperlinks(link to another website, document,image or text etc) in our web page.
Example:
Click here to open YoutubeCode for above link is:
<a href="https://www.youtube.com/" target="_blank">Click here to open Youtube</a>Paragraph Tag-<p>
Horizontal Ruler(<hr>) and Line Break(<br>)
- <hr>- this tag will create a horizontal line.
- <br>- this tag will create a line brake.
Lists in HTML
There are three different types of list in HTML:
- Ordered List
- Unordered List
- Descriptive List
Ordered List
In this list all list items are numbered like 1,2,3... and so on.
Tags that are used:
- <ol>:ordered list (container)
- <li>:list item (each point in the list)
<ol>
<li> Orange </li>
<li> Mango </li>
</ol>
The above code will create a list like:
- Orange
- Mango
Unordered List
In this list all list items are accompanied bullet points.
Tags that are used:
- <ul>:unordered list (container)
- <li>:list item (each point in the list)
<ul>
<li> Orange </li>
<li> Mango </li>
</ul>
The above code will create a list like:
- Orange
- Mango
Descriptive list
A descriptive list in HTML is a way to show terms and their descriptions — like a dictionary or FAQ list.
Tags that are used:
- <dl>:descriptive list (container)
- <dt>:description term (the word or title)
- <dd>:description detail (the explanation)
<dl>
<dt>HTML</dt>
<dd>A language used to create web pages.</dd>
<dt>CSS</dt>
<dd>A language used to style web pages.</dd>
</dl>
The above code will create a list like:
- HTML
- A language used to create web pages.
- CSS
- A language used to style web pages.
Image Tag-<img>
The Image tag is a self-closing tag used to embed an image onto your page.
It requires two main attributes:
- src(source): The path or URL to the image file. This is mandatory.
- alt(alternative text): A description of the image. This is vital for accessibility (screen readers for the visually impaired will read this out) and for when the image fails to load.
<img src="./images/aboutme.jpg" width="300px" alt="This is Malhar Parikh, a man standing wearing black shirt and smiling">
The above code will show image like below:
