Introduction to HTML
What is HTML?
HTML, which stands for Hypertext Markup Language, is the standard markup language for creating web pages. It describes the structure of a web page using a series of tags.
A basic HTML page
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is a simple web page.</p>
</body>
</html>
<body>
and </body>
tagsOpening/closing tags
In HTML, most tags have an opening tag and a closing tag. These tags frame the content they affect. Here are the main characteristics:
- Opening tag: Composed of the tag name, surrounded by angle brackets < >. It can contain attributes.
Example:<p>
or<a href="https://www.example.com">
- Closing tag: Identical to the opening tag, but preceded by a slash / to indicate the end of the element.
Example:</p>
or</a>
Example of an opening and closing tag
<p>This is a paragraph with an opening tag and a closing tag.</p>
Special cases: self-closing tags
Some HTML tags do not require a closing tag. They are called self-closing tags and are used for elements that do not contain content.
Example: <img />
or <input />
These tags can include attributes like src or type.
Example of self-closing tags
<img src="image.jpg" alt="A descriptive image" />
<input type="text" placeholder="Enter your text" />
- All opening tags must correspond to closing tags.
- Tags must be properly nested:
<div>
<p>This is a paragraph.</p>
</div>
Incorrect:
<div>
<p>This is a paragraph.</div>
</p>
The distinction between opening, closing, and self-closing tags is essential for writing valid and understandable HTML code. A good practice is to use an editor with HTML validation to avoid syntax errors.
Basic HTML Tags
<body>
- Usage: The
<body>
tag contains the main content of your HTML document, i.e., everything that is visible on the web page. - Example:
<body>
<p>This is a paragraph.</p>
</body>
<hn>
- Usage:
<h1>
to<h6>
are title tags,h1
being the most important andh6
the least.
<h1>Main Title</h1>
<h2>Secondary Title</h2>
<p>
- Usage: The
<p>
tag is used to define a paragraph. - Example:
<p>This is an example paragraph.</p>
<a>
- Usage: The
<a>
tag defines a hyperlink. - Important attributes:
href
: URL of the page the link leads to.
- Example:
<a href="https://www.example.com">Visit our site</a>
<img>
- Usage: The
<img>
tag is used to integrate images. - Important attributes:
src
: The image URL.alt
: Alternative text for the image.
- Example:
<img src="image.jpg" alt="Image description" />
<div>
- Usage: The
<div>
tag is a generic container for content flow. - Example:
<div>
<p>A paragraph inside a div.</p>
</div>
Attributes and attribute values
- Attributes: Provide additional information about a tag. Examples:
href
,src
,alt
. - Attribute values: Specify the attribute data. For example, in
href="https://www.example.com"
,https://www.example.com
is the value of thehref
attribute.