Role of HTML in web development

Introduction

HTML is the basic building block of every website. It tells the browser what content to show and how to organize it.

When creating the structure of a webpage like headings, paragraphs, and lists.

When adding images, links, or buttons to a website.

When making content accessible to all users including those using screen readers.

When preparing content that other technologies like CSS and JavaScript will style and make interactive.

When building any web page or web app to display information on the internet.

Syntax

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

HTML uses tags like <html>, <head>, and <body> to organize content.

The lang attribute helps browsers and screen readers understand the language of the page.

Examples

This creates a large heading on the page.

HTML

<h1>Welcome to my website</h1>

Paragraphs hold blocks of text content.

HTML

<p>This is a paragraph of text.</p>

This creates a clickable link to another website.

HTML

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

This adds an image with a description for accessibility.

HTML

<img src="image.jpg" alt="A description of the image">

Sample Program

This webpage shows a heading, a paragraph, a link that opens in a new tab, and a footer. It uses semantic tags for better structure and accessibility.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple HTML Page</title>
</head>
<body>
  <header>
    <h1>My First Webpage</h1>
  </header>
  <main>
    <section>
      <p>Hello! This is a simple webpage made with HTML.</p>
      <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Go to Example.com</a>
    </section>
  </main>
  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>
</html>

Important Notes

Always use semantic HTML tags like <header>, <main>, and <footer> to help organize content clearly.

Use the alt attribute on images to describe them for people who cannot see them.

HTML alone does not style or animate content; it only structures it. CSS and JavaScript add style and behavior.

Summary

HTML creates the structure and content of web pages.

It uses tags to organize text, images, links, and other elements.

Good HTML helps browsers and assistive tools show your content correctly.

Practice

1. What is the main role of HTML in web development?

easy

A. To create the structure and content of web pages

B. To style the appearance of web pages

C. To add interactivity to web pages

D. To store data in databases

Solution

1. Step 1: Understand HTML's purpose

   HTML is used to build the basic structure and content of a webpage, like headings, paragraphs, and images.

2. Step 2: Differentiate from other technologies

   Styling is done by CSS, interactivity by JavaScript, and data storage by databases, not HTML.

3. Final Answer:

   To create the structure and content of web pages -> Option A

4. Quick Check:

   HTML = structure and content [OK]

Hint: HTML builds page structure, not style or behavior [OK]

Common Mistakes:

• Confusing HTML with CSS or JavaScript
• Thinking HTML stores data
• Believing HTML adds interactivity

2. Which of the following is the correct way to start an HTML document?

easy

A. Page

B. Page

C. Page

D. Page

Solution

1. Step 1: Identify standard HTML tags

   The root tag for an HTML document is <html>, with <head> and <body> inside it.

2. Step 2: Check tag correctness

   <html><head><title>Page</title></head><body></body></html> uses correct tags: <html>, <head>, <title>, and <body>. Others use invalid tags like <document>, <page>, or <header> instead of <head>.

3. Final Answer:

   <html><head><title>Page</title></head><body></body></html> -> Option D

4. Quick Check:

   HTML document starts with <html> and <head> [OK]

Hint: HTML documents start with <html>, not <document> or <page> [OK]

Common Mistakes:

• Using non-standard root tags like <document>
• Confusing <head> with <header>
• Missing <body> tag

3. What will the browser display when rendering this HTML snippet?

<h1>Welcome</h1>
<p>This is a paragraph.</p>
<img src='image.jpg' alt='Sample Image'>

medium

A. A heading 'Welcome', a paragraph 'This is a paragraph.', and an image with alt text 'Sample Image'

B. Only the text 'Welcome' and 'This is a paragraph.' without any image

C. An error message because <img> tag is not closed

D. A heading and paragraph but the image will show broken link icon

Solution

1. Step 1: Understand HTML tags used

   The <h1> tag creates a large heading, <p> creates a paragraph, and <img> inserts an image with alt text.

2. Step 2: Check <img> tag syntax

   The <img> tag is self-closing in HTML5 and does not require a closing tag. The alt attribute provides alternative text if image fails to load.

3. Final Answer:

   A heading 'Welcome', a paragraph 'This is a paragraph.', and an image with alt text 'Sample Image' -> Option A

4. Quick Check:

   HTML renders headings, paragraphs, and images correctly [OK]

Hint: Remember <img> is self-closing and shows alt text if image missing [OK]

Common Mistakes:

• Thinking <img> needs a closing tag
• Assuming image won't show without closing tag
• Ignoring alt attribute purpose

4. Identify the error in this HTML snippet:

<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h2>
</body>
</html>

medium

A. The <body> tag is not closed

B. The closing tag for the heading is incorrect

C. The <title> tag is missing

D. The <html> tag is misspelled

Solution

1. Step 1: Check heading tags

   The opening tag is <h1> but the closing tag is </h2>, which is mismatched and invalid.

2. Step 2: Verify other tags

   The <title>, <body>, and <html> tags are correctly opened and closed.

3. Final Answer:

   The closing tag for the heading is incorrect -> Option B

4. Quick Check:

   Matching tags must have same number (h1 with /h1) [OK]

Hint: Opening and closing tags must match exactly [OK]

Common Mistakes:

• Mismatching heading tags like <h1> with
• Forgetting to close <body> or <html>
• Misspelling tag names

5. You want to create a simple webpage with a header, a paragraph, and a link to another page. Which HTML structure correctly achieves this while ensuring accessibility?

hard

A. WelcomeClick here to go to page 2.

B. WelcomeClick here to go to page 2.

C. WelcomeClick here to go to page 2.

D. WelcomeClick here to go to page 2.

Solution

1. Step 1: Check semantic tags and link usage

   Using <header> and <h1> is correct for the page header. The <a> tag must have an href attribute to link properly.

2. Step 2: Verify accessibility features

   <header><h1>Welcome</h1></header><p>Click <a href='page2.html' aria-label='Go to page 2'>here</a> to go to page 2.</p> adds an aria-label to the link, which helps screen readers describe the link purpose clearly, improving accessibility.

3. Final Answer:

   <header><h1>Welcome</h1></header><p>Click <a href='page2.html' aria-label='Go to page 2'>here</a> to go to page 2.</p> -> Option C

4. Quick Check:

   Use semantic tags and aria-label for accessibility [OK]

Hint: Use semantic tags and aria-label for accessible links [OK]

Common Mistakes:

• Missing href in <a> tag
• Using alt attribute on <a> instead of aria-label
• Not using semantic <header> tag