HTML, or HyperText Markup Language, is the standard language used to create and design webpages.
It structures
content on the web by using a system of tags and attributes. Here’s a basic introduction to HTML:
### Basic HTML Structure
An HTML document typically follows this structure:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Home Section</h2>
<p>This is the home section of the webpage.</p>
</section>
<section id="about">
<h2>About Section</h2>
<p>This is the about section of the webpage.</p>
</section>
<section id="contact">
<h2>Contact Section</h2>
<p>This is the contact section of the webpage.</p>
</section>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
```
### Key Components
1. **`<!DOCTYPE html>`**: Declares the document type and version of HTML. This helps browsers render the page
correctly.
2. **`<html>`**: The root element of an HTML page. All other elements are nested within this tag.
3. **`<head>`**: Contains meta-information about the document, such as the title, character set, and links to
stylesheets or scripts.
4. **`<title>`**: Sets the title of the document, which appears in the browser tab.
5. **`<meta charset="UTF-8">`**: Defines the character encoding for the document, ensuring that special characters are
displayed correctly.
6. **`<link>`**: Used to link external resources like CSS files.
7. **`<body>`**: Contains the content of the document that is visible to users. It includes elements like headers,
paragraphs, links, images, and more.
8. **`<header>`, `<nav>`, `<main>`, `<footer>`**: Semantic HTML5 elements that define different sections of the page,
improving accessibility and SEO.
9. **`<h1>`, `<h2>`, `<p>`, `<a>`**: Various HTML tags used to structure and format content.
- **`<h1>`**: Defines the main heading.
- **`<h2>`**: Defines a subheading.
- **`<p>`**: Defines a paragraph.
- **`<a>`**: Defines a hyperlink, allowing users to navigate to other pages or resources.
10. **Attributes**: Provide additional information about HTML elements. For example, the `href` attribute in `<a>`
specifies the URL of the link.
### Example of Basic HTML Tags
- **Headings:**
```html
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
```
- **Paragraph:**
```html
<p>This is a paragraph of text.</p>
```
- **Link:**
```html
<a href="https://www.example.com">Visit Example</a>
```
- **Image:**
```html
<img src="image.jpg" alt="Description of image">
```
- **List:**
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
### Conclusion
HTML is foundational for web development. Understanding its basic structure and elements is crucial for building and
designing webpages. Once you're comfortable with HTML, you can enhance your web pages with CSS for styling and
JavaScript for interactivity.