Introduction to HTML

1. Introduction to HTML

HTML (HyperText Markup Language) is the standard language used to create web pages. It provides the basic structure of a webpage, which is then enhanced and modified by other technologies like CSS (Cascading Style Sheets) and JavaScript. HTML is a markup language, meaning it uses tags to annotate text, images, and other content to display them correctly in web browsers.

2. Basic Structure of an HTML Document

An HTML document has a well-defined structure that includes the following key components:

2.1 Document Declaration

The <!DOCTYPE html> declaration is used to define the document type and version of HTML being used. It should always be the first line in an HTML document.


<!DOCTYPE html>

2.2 The <html> Element

The <html> tag wraps all the content of the web page and is the root element of an HTML document. All other elements are contained within this tag.


<html>
  <!-- Content goes here -->
</html>

2.3 The <head> Element

The <head> element contains meta-information about the document, such as its title, character set, linked CSS files, and more. This information is not displayed on the webpage but is essential for how the page is interpreted by browsers.


<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>

2.4 The <body> Element

The <body> element contains all the content that is visible on the web page, such as text, images, links, and other media. This is where the majority of the HTML code is written.


<body>
  <h1>Hello, World!
  <p>This is a sample HTML document.
</body>

3. Common HTML Tags

HTML consists of a wide variety of tags, each serving a specific purpose. Here are some of the most commonly used tags:

3.1 Headings

Headings are used to define the headings of sections in a document, with <h1> being the highest level and <h6> being the lowest.


<h1>This is a Heading 1
<h2>This is a Heading 2

3.2 Paragraphs

The <p> tag is used to define a paragraph of text.


<p>This is a paragraph.

3.3 Links

The <a> tag is used to create hyperlinks that connect one page to another or to different sections within the same page.


<a href="https://example.com">Visit Example</a>
<a href="javascript:alert('Clicked')">Visit Example</a>

3.4 Images

The <img> tag is used to embed images into a webpage. The src attribute specifies the path to the image file.


<img src="image.jpg" alt="Sample Image">

4. Semantic HTML

Semantic HTML refers to the use of HTML tags that convey the meaning of the content enclosed within them. These tags help improve the accessibility and SEO of a webpage. Examples of semantic HTML tags include:

4.1 <header>

Defines the header section of a webpage, typically containing the site logo, navigation links, and other introductory content.

4.2 <nav>

Represents a section of the webpage that contains navigation links.

4.3 <article>

Defines a self-contained piece of content that could be independently distributed or reused, such as a blog post or news article.

4.4 <footer>

Defines the footer section of a webpage, typically containing copyright information, links to terms of service, and other related content.

5. HTML Best Practices

Following best practices in HTML helps ensure that your web pages are well-structured, accessible, and easy to maintain:

Use Semantic Tags: Whenever possible, use semantic tags to describe the content's purpose.
Keep Code Clean: Write clean, readable HTML code by using consistent indentation and meaningful class and ID names.
Validate Your Code: Use HTML validators to check your code for errors and ensure compliance with web standards.
Use Alt Attributes: Always include alt attributes for images to improve accessibility for users with visual impairments.