HTML Syntax, Tags & Elements
Now that you understand what HTML is, let's learn how HTML actually works.
1. What is an HTML Tag?
A tag tells the browser what type of content something is.
Example:
<h1>Hello World</h1>
Here:
<h1> โ opening tagHello World โ content
</h1> โ closing tag The complete structure is called an HTML element.
2. HTML Element
An HTML element usually looks like this:
<tag>Content</tag>
For example:
<p>This is a paragraph.</p>
<h2>About Me</h2>
<button>Click Me</button>
Think of an element as a complete building block of a webpage.
3. Opening and Closing Tags
Most HTML elements have both.
<p>Hello</p>
Opening:
<p>Closing:
</p>Notice the
/ in the closing tag.4. Some Tags Don't Need a Closing Tag
Some HTML elements are void elements.
Example:
<img src="photo.jpg" alt="My photo">
<br>
<hr>
They don't have a separate closing tag.
5. HTML Attributes
Attributes provide additional information about an element.
Example:
<a href="https://example.com">Visit Website</a>
Here:
href="https://example.com" is an attribute.Another example:
<img src="profile.jpg" alt="Profile photo">
The image has two attributes:
src โ location of the image
alt โ description of the image
6. Attributes Usually Go Inside the Opening Tag
Correct:
<p class="description">Hello</p>
Incorrect:
<p>Hello</p class="description">
7. Nesting Elements
HTML elements can be placed inside other elements.
Example:
<div>
<h1>My Website</h1>
<p>Welcome to my website.</p>
</div>
Here:
<div>
โโโ <h1>
โโโ <p>
The
<h1> and <p> elements are inside the <div>.8. Proper Nesting Matters
Correct:
<p>
Hello <strong>World</strong>
</p>
Incorrect:
<p>
Hello <strong>World</p></strong>
HTML elements should be properly nested.
9. HTML Comments
Comments allow developers to leave notes in their code.
<!-- This is a comment -->
The browser doesn't display the comment as webpage content.
Example:
<!-- Website heading -->
<h1>My Portfolio</h1>
10. A Simple HTML Example
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>Welcome to My Portfolio</h1>
<p>I am learning web development.</p>
<a href="about.html">About Me</a>
</body>
</html>