Role of HTML in web development - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does HTML stand for?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web.

beginner

What is the main role of HTML in web development?

HTML provides the structure of a web page. It tells the browser what content to show, like headings, paragraphs, images, and links.

intermediate

How does HTML relate to CSS and JavaScript?

HTML creates the page structure, CSS styles the page to look nice, and JavaScript adds interactivity. They work together to build modern websites.

intermediate

Why is semantic HTML important?

Semantic HTML uses meaningful tags like <header>, <nav>, and <article> to describe content. This helps browsers, search engines, and assistive technologies understand the page better.

intermediate

What role does HTML play in accessibility?

HTML provides the foundation for accessibility by using proper tags and attributes like alt for images and aria-label for better screen reader support, making websites usable for everyone.

What is the primary purpose of HTML in web development?

A To structure the content of web pages

B To style the web pages with colors and fonts

C To add interactive behavior to web pages

D To store data on the server

HTML is used to create the structure and content of web pages, such as headings, paragraphs, and images.

Which HTML tag is used to define the main heading of a page?

A <section>

B <h1>

C <div>

D <p>

The

tag defines the main heading of a page, which is important for structure and accessibility.

Why should you use semantic HTML tags?

A They make the page load faster

B They automatically style the page

C They improve the meaning and accessibility of content

D They prevent the page from being indexed by search engines

Semantic tags give meaning to the content, helping browsers, search engines, and assistive tools understand the page better.

Which attribute improves accessibility by describing images?

A alt

B src

C href

D title

The alt attribute provides alternative text for images, which screen readers use to describe images to users who cannot see them.

How does HTML work with CSS and JavaScript?

A HTML stores data, CSS adds interactivity, JavaScript structures the page

B HTML styles the page, CSS structures it, JavaScript stores data

C HTML adds interactivity, CSS stores data, JavaScript styles the page

D HTML structures the page, CSS styles it, JavaScript adds interactivity

HTML creates the structure, CSS styles the look, and JavaScript adds interactive features to web pages.

Explain the role of HTML in building a website and how it interacts with CSS and JavaScript.

Think about what each language does on a web page.

Describe why semantic HTML and accessibility features are important in web development.

Consider users who rely on screen readers or other assistive tools.

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