HTML Basics
Section 1: Getting Started with HTML
Lesson 1: HTML Document Structure
HTML (HyperText Markup Language) serves as the foundation of web development, defining the structure and content of webpages. In this section, we'll explore the basic structure of an HTML document, the use of meta tags, and delve into HTML elements and tags.
1.1 HTML Document Structure
A typical HTML document follows a hierarchical structure. Let's break down the essential components:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: Represents the root element of the HTML document.
lang="en": Specifies the language of the document (English, in this case).
<head>: Contains meta-information about the HTML document, such as character set and viewport settings.
<meta charset="UTF-8">: Specifies the character set for the document (UTF-8, which supports a wide range of characters).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport settings for responsive design.
<title>: Sets the title of the webpage, displayed in the browser's title bar or tab.
<body>: Contains the content of the HTML document, such as text, images, and other elements.
1.2 HTML Elements and Tags
HTML elements are the building blocks of a webpage, represented by tags. Let's explore some common HTML tags:
Headings (<h1>, <h2>, ..., <h6>):
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<!-- ... -->
<h6>This is a Heading 6</h6>
Paragraphs (<p>):
<p>This is a paragraph of text.</p>
Lists (Ordered <ol> and Unordered <ul>):
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
Links (<a>):
<a href="https://www.example.com">Visit Example.com</a>
Semantic HTML Tags (e.g., <header>, <footer>, <article>):
<header>
<h1>Website Header</h1>
</header>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
<footer>
<p>© 2023 Your Website</p>
</footer>
These tags help structure content, making it readable and accessible.
Lesson 2: Attributes and Values
HTML attributes provide additional information about an element and are defined within the opening tag. Let's explore attributes with practical examples:
2.1 Understanding HTML Attributes and Values
Attributes provide extra information about HTML elements. For example, the href attribute in an <a> tag specifies the URL of the link:
<a href="https://www.example.com">Visit Example.com</a>
2.2 Using Attributes for Elements
Attributes are used to enhance elements. For instance, the src attribute in an <img> tag specifies the source (URL) of the image:
<img src="image.jpg" alt="A descriptive text">
Similarly, the alt attribute provides alternative text for screen readers and browsers that can't display the image.
Understanding and using attributes allows you to customize the behavior and appearance of HTML elements, enhancing the overall user experience.