HTML Beginner's Guide

Introduction

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It defines the structure of web content.

With HTML, you can create paragraphs, headings, links, images, and much more.

<!DOCTYPE html>

The !DOCTYPE declaration represents the document type, and helps browsers to display web pages correctly.

It is the foundation of web development.
Works with CSS and JavaScript for full functionality.
It must only appear once, at the top of the page (before any HTML tags).
The !DOCTYPE declaration is not case sensitive.

HTML Basics

HTML documents are structured using tags enclosed in angle brackets, like <tag>.

Tags typically come in pairs: opening <tag> and closing </tag>.

<html>...</html>

The above example defines the root element of an HTML document.

HTML is not case-sensitive.
Indentation improves readability but is not required.

HTML Elements

HTML elements are the building blocks of any HTML document. They define the structure and content of a web page. Let's dive into some of the essential elements.

1. Headings

Headings are used to define the structure and hierarchy of content. There are six levels of headings, from <h1> to <h6>. The <h1> tag represents the most important heading, while <h6> represents the least important.

<h1> - Main title of the document.
<h2> - Subsections of the main title.
<h3> - Subsections within <h2>.
<h4>, <h5>, <h6> - Further subdivisions.

Example:

<h1>Welcome to HTML</h1>
<h2>Getting Started</h2>
<h3>Introduction</h3>

2. Links

Links are created using the <a> tag, which stands for anchor. Links can point to internal pages, external websites, or specific sections of a page.

href - Specifies the URL of the page the link goes to.
target - Defines where to open the linked document (e.g., _blank for a new tab).

Example:


        <a href="https://www.example.com" target="_blank">Visit Example</a>

3. Images

Images are added using the <img> tag. It requires the src attribute to define the image source and the alt attribute to provide alternate text for accessibility.

src - Path to the image file (URL or local path).
alt - Describes the image content for screen readers or when the image fails to load.

Example:


        <img src="example.jpg" alt="Description of the image">

These elements are foundational to creating structured and accessible web content. Use them effectively to build user-friendly web pages.

Forms and Tables

Forms are used to collect user input. They consist of various elements like text fields, checkboxes, radio buttons, and more, wrapped inside a <form> tag. Data from forms can be sent to a server for processing.

Form Elements

<input> - Used for single-line text, passwords, or other input types like email or number. Common attributes:
- type - Specifies the type of input (e.g., text, password, email).
- name - Identifies the input when data is submitted.
- placeholder - Adds a hint inside the input field.
<textarea> - For multi-line text input.
<label> - Describes the input field, improving accessibility.
<select> and <option> - Used for dropdown lists.
<button> - Represents a clickable button.

Form Example

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email"><br>
  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="4" cols="30" placeholder="Type your message"></textarea><br>
  <button type="submit">Submit</button>
</form>

Tables are used to display data in rows and columns. The <table> element contains all table content, while <tr>, <th>, and <td> are used to structure the rows and cells.

Key Table Elements

<table> - Defines the table.
<tr> - Represents a row in the table.
<th> - Represents a header cell in the table, typically bold and centered.
<td> - Represents a data cell in the table.
<caption> - Adds a title to the table.

Table Example

<table border="1">
  <caption>Student Grades</caption>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Math</td>
    <td>A</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>English</td>
    <td>B+</td>
  </tr>
</table>

The table example above shows how data about students and their grades is displayed. The border attribute adds borders around table cells for better visibility.

Best Practices

When writing HTML, following best practices ensures your code is clean, maintainable, and accessible. Here are some tips to keep in mind:

1. Use Semantic HTML

Semantic elements, like <header>, <nav>, <article>, and <footer>, provide meaning to the content. They improve readability for developers and accessibility for users.

<header>
<h1>Welcome to My Website</h1>
</header>

2. Keep Your Code Indented and Organized

Consistent indentation and organization make your code easier to read and debug.

<div class="container">
  <p>This is an indented paragraph.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

3. Use Meaningful Names for IDs and Classes

Choose descriptive names for your id and class attributes to make the code self-explanatory.

<div id="main-content" class="blog-post">
<h2>Understanding CSS</h2>
</div>

4. Optimize for Accessibility

Use attributes like alt for images, aria-* attributes for interactive elements, and ensure proper heading structure to make your website accessible to all users.

5. Avoid Inline Styles

Use external stylesheets instead of inline styles to separate content and presentation. This makes it easier to maintain and scale your code.

/* styles.css */
.btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
}

6. Validate Your HTML

Always validate your HTML to ensure there are no syntax errors. You can use the W3C Validator.

7. Minimize Use of Deprecated Tags

Avoid using deprecated tags like <font> and <center>. Instead, use modern CSS for styling and layout.

8. Include Meta Tags

Meta tags, like <meta charset="UTF-8">, improve browser compatibility and SEO.

9. Use Comments Wisely

Add comments to explain complex sections of your code, but avoid cluttering it with excessive or redundant comments.

<section id="about-us">
<p>About us content.</p>
</section>

10. Test Your Code

Regularly test your HTML across different browsers and devices to ensure compatibility and responsiveness.

By following these practices, you can write clean, efficient, and accessible HTML code for any project.

Reference

Some of the documentation in this page is taken from w3schools.