XQA
Back to Web Development
2026-02-077 min read

HTML Formatting (Web Development)

Learn HTML Formatting (Web Development) step by step with clear examples and exercises.

Why This Matters

HTML text formatting is a fundamental aspect of web development that enables the creation of engaging, well-structured, and user-friendly web pages. Proper formatting not only improves readability but also enhances the overall user experience. Understanding HTML text formatting is crucial for web developers as it serves as the foundation for designing responsive websites catering to diverse audiences. This knowledge can be valuable in job interviews or real-world bug fixing scenarios.

Prerequisites

Before delving into HTML text formatting, it's essential to have a basic understanding of:

  1. HTML syntax and structure (tags, attributes, and elements)
  2. Basic CSS concepts (properties, selectors, and values)
  3. The Document Object Model (DOM)
  4. Familiarity with a text editor or Integrated Development Environment (IDE) for writing and editing HTML files
  5. A general understanding of web browsers and how they interpret HTML code

Core Concept

HTML text formatting involves utilizing various tags, attributes, and elements to style and organize content on a web page. Some common HTML text formatting tags include:

  • `` - Heading 1 (largest heading)
  • `` - Heading 2
  • `` - Heading 3
  • `` - Heading 4
  • `` - Heading 5
  • `` - Heading 6 (smallest heading)

Text Styling

HTML provides several tags for styling text, such as:

  • `` - Bold text (for emphasis)
  • `` - Italicized text (indicates emphasis or tone)
  • ` and ` - Superscript (above the line) and subscript (below the line) text, respectively
  • `` - Inserted text (for adding content to a document without replacing existing text)
  • `` - Deleted text (for marking removed or struck-through content)

Links

HTML allows you to create hyperlinks using the ` tag. The href` attribute specifies the URL or location of the linked resource:

<a href="https://www.example.com">Example Link</a>

Images

To embed an image in HTML, use the ` tag and provide the source (src`) attribute with the image's URL:

<img src="path/to/image.jpg" alt="Description of the image">

The alt attribute is used to describe the image for screen readers or if the image fails to load.

Lists

HTML provides two types of lists: ordered (numbered) and unordered (bulleted). Use the ` tag for ordered lists, and ` for unordered ones:

<!-- Ordered list -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

<!-- Unordered list -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

Tables

HTML tables are created using the `, (table row), (table header cell), and ` (table data cell) tags:

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Forms

HTML forms are used to collect user input. The `` tag defines the form, and various input types (e.g., text fields, radio buttons, checkboxes) can be included within it using appropriate tags:

<form action="submit_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<!-- Radio buttons -->
<label for="gender1">Male</label>
<input type="radio" id="gender1" name="gender" value="male"><br>

<label for="gender2">Female</label>
<input type="radio" id="gender2" name="gender" value="female"><br><br>

<!-- Checkboxes -->
<label for="hobbies1">Reading</label>
<input type="checkbox" id="hobbies1" name="hobbies[]" value="reading"><br>

<label for="hobbies2">Writing</label>
<input type="checkbox" id="hobbies2" name="hobbies[]" value="writing"><br><br>

<!-- Submit button -->
<input type="submit" value="Submit">
</form>

Worked Example

Let's create a simple HTML page with text formatting, links, images, lists, tables, and forms:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Text Formatting Example</title>
</head>
<body>

<!-- Heading -->
<h1>Welcome to our website!</h1>

<!-- Links -->
<p><a href="https://www.example.com">Example Link 1</a></p>
<p><a href="https://www.google.com">Example Link 2 - Google</a></p>

<!-- Images -->
<img src="path/to/image1.jpg" alt="Image 1 Description">
<img src="path/to/image2.jpg" alt="Image 2 Description">

<!-- Lists -->
<h2>Ordered List</h2>
<ol>
<li>First item in ordered list</li>
<li>Second item in ordered list</li>
<li>Third item in ordered list</li>
</ol>

<h2>Unordered List</h2>
<ul>
<li>First item in unordered list</li>
<li>Second item in unordered list</li>
<li>Third item in unordered list</li>
</ul>

<!-- Tables -->
<h2>Table Example</h2>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

<!-- Forms -->
<h2>Form Example</h2>
<form action="submit_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<!-- Radio buttons -->
<label for="gender1">Male</label>
<input type="radio" id="gender1" name="gender" value="male"><br>

<label for="gender2">Female</label>
<input type="radio" id="gender2" name="gender" value="female"><br><br>

<!-- Checkboxes -->
<label for="hobbies1">Reading</label>
<input type="checkbox" id="hobbies1" name="hobbies[]" value="reading"><br>

<label for="hobbies2">Writing</label>
<input type="checkbox" id="hobbies2" name="hobbies[]" value="writing"><br><br>

<!-- Submit button -->
<input type="submit" value="Submit">
</form>
</body>
</html>

Common Mistakes

  1. Forgetting to close HTML tags: Always ensure that all opened HTML tags are properly closed.
  2. Incorrect use of semantic tags: Use appropriate HTML tags for their intended purpose (e.g., using ` instead of ` for headings).
  3. Overuse of styling attributes: Avoid overusing inline styles, as they can make the code harder to maintain and less accessible.
  4. Ignoring accessibility: Ensure that your HTML is accessible by using appropriate ARIA roles, providing alt text for images, and considering color contrast for visually impaired users.
  5. Mixing HTML and CSS: Keep HTML and CSS separate to promote cleaner code and easier maintenance.
  6. Using outdated or deprecated tags: Familiarize yourself with the latest HTML standards and avoid using obsolete tags.
  7. Neglecting to validate HTML code: Validate your HTML code using online tools like the W3C Markup Validation Service to ensure it is error-free.
  8. Not optimizing for mobile devices: Ensure that your HTML code is responsive and adapts well to different screen sizes and devices.
  9. Overusing tables for layout: While tables can be used for data, avoid using them for layout purposes as it leads to complex and hard-to-maintain code.
  10. Not testing across multiple browsers: Test your HTML pages in various web browsers (e.g., Chrome, Firefox, Safari, Edge) to ensure cross-browser compatibility.

Practice Questions

  1. Create an HTML page with a heading, a paragraph, an image, and a link.
  2. Write an ordered list of your favorite programming languages using the `` tag.
  3. Create an unordered list of common web development tools using the `` tag.
  4. Design an HTML table that displays data about three different books (title, author, and publication year).
  5. Create a simple HTML form to collect a user's name, email address, and preferred programming language.
  6. Bonus: Add validation to the form in question 5 using the required attribute for input fields and client-side JavaScript.
  7. Bonus: Optimize the HTML code for mobile devices by using media queries and responsive design techniques.
  8. Bonus: Validate the HTML code using an online tool like the W3C Markup Validation Service and fix any errors found.

FAQ

What is the difference between ` and ` tags?

  • The ` tag is used for headings in HTML, while the ` tag is used for emphasizing text within a paragraph.

How do I create an image with text on it using HTML?

  • To create an image with text on it, you can use CSS to position and style text over an image. However, this requires knowledge of both HTML and CSS.

What is the purpose of the alt attribute in the `` tag?

  • The alt attribute provides a description of the image for screen readers or if the image fails to load. It is essential for accessibility purposes.

Can I use HTML tables for layout purposes?

  • While it is possible to use HTML tables for layout, it is generally discouraged as it can lead to complex and hard-to-maintain code. Instead, consider using CSS for layout design.

How do I ensure that my HTML is accessible to users with disabilities?

  • To make your HTML accessible, follow best practices such as providing alt text for images, using semantic tags appropriately, and considering color contrast for visually impaired users. Additionally, consider using ARIA roles to improve accessibility for screen readers.

What are some common mistakes to avoid when working with HTML?

  • Common mistakes include forgetting to close HTML tags, incorrect use of semantic tags, overuse of styling attributes, ignoring accessibility, mixing HTML and CSS, neglecting mobile optimization, using outdated or deprecated tags, not validating HTML code, and failing to test across multiple browsers.

How can I validate my HTML code?

  • Validate your HTML code using online tools like the W3C Markup Validation Service to ensure it is error-free.

What are some best practices for creating responsive HTML pages?

  • Best practices for creating responsive HTML pages include using media queries, flexible grids, and scalable images. Additionally, consider testing your code on various devices and screen sizes to ensure compatibility.
HTML Formatting (Web Development) | Web Development | XQA Learn