Introduction to HTML
HTML (HyperText Markup Language) is the backbone of web development. It structures the content of websites, enabling you to display text, images, videos, and more. Whether you’re a beginner or want to enhance your skills, this guide will help you master HTML from scratch.
What is HTML?
HTML is a markup language used to structure and present content on the web. It consists of elements enclosed in angle brackets (< >). These elements define how content appears on a webpage.
Basic Structure of an HTML Document
Below is a simple HTML document structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a beginner’s guide to learning HTML.</p>
</body>
</html>
Explanation of the Structure:
<!DOCTYPE html>: Declares the document type as HTML5.<html>: The root element of the document.<head>: Contains meta information, such as the<title>.<body>: Includes all visible content, such as text, images, and links.
Essential HTML Elements and Their Uses
Headings (<h1> to <h6>):
Define the hierarchy of content.
<h1>Main Heading</h1>
<h2>Subheading</h2>
Paragraphs (<p>):
Used to create blocks of text.
<p>This is a paragraph.</p>
Links (<a>):
Create hyperlinks to other pages.
<a href=”https://example.com”>Visit Example</a>
Images (<img>):
Embed images in a webpage.
<img src=”image.jpg” alt=”A description of the image”>
Attributes in HTML
Attributes provide additional information about elements. They are included inside the opening tag. For example:
Common Attributes:
href: Specifies the link destination.alt: Describes an image for accessibility.src: Indicates the source of an image or file.
Lists in HTML
Ordered List (<ol>): Numbered items.
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Unordered List (<ul>): Bulleted items.
<ul>
<li>Point A</li>
<li>Point B</li>
</ul>
Forms in HTML
Forms are used to collect user input. Example:
<form action=”/submit” method=”post”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
<input type=”submit” value=”Submit”>
</form>
Tables in HTML
Tables organize data into rows and columns.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Conclusion
HTML is the cornerstone of web development. By mastering its basics, you can start creating visually appealing and functional websites. Keep practicing and explore more advanced topics like CSS and JavaScript to elevate your skills.
