HTML Basics: 83 flashcards
All 83 flashcards from this kit, free and with no sign-up.
1. What does HTML stand for?
Show the answer
HyperText Markup Language
2. Is HTML a programming language? Why or why not?
Show the answer
No, it is a markup language. It cannot perform logic or calculations; it only describes the structure and meaning of content.
3. What is the difference between an opening tag and a closing tag?
Show the answer
An opening tag (e.g., `<p>`) starts an element; a closing tag (e.g., `</p>`) ends it and includes a forward slash before the tag name.
4. What is a self-closing tag? Give two examples.
Show the answer
A tag that does not need a separate closing tag. Examples: `<img>` and `<br>`.
5. What is the Document Object Model (DOM)?
Show the answer
The tree-like hierarchical structure of an HTML document that browsers and scripts use to understand and manipulate the page.
6. What is the role of the `alt` attribute on an `<img>` tag?
Show the answer
It provides alternative text for accessibility (screen readers) and SEO, describing the image for users who cannot see it.
7. What is semantic HTML?
Show the answer
Using HTML tags that convey the meaning of the content (e.g., `<h1>` for a heading, `<nav>` for navigation) rather than just for visual presentation.
8. Why should you avoid using `<font>` or `<center>` tags in modern HTML?
Show the answer
Because they mix structure with presentation. Modern best practice uses CSS for styling and keeps HTML for structure only.
9. What are the two main sections inside an `<html>` element?
Show the answer
`<head>` (contains metadata, title, and links) and `<body>` (contains the visible content).
10. How does HTML help with web accessibility?
Show the answer
Semantic tags and attributes like `alt` allow screen readers and assistive technologies to navigate and interpret content correctly.
11. What is the difference between HTML and CSS?
Show the answer
HTML defines the structure and meaning of content; CSS controls the presentation (colors, fonts, layout).
12. What does the `<a>` tag do?
Show the answer
It defines a hyperlink, allowing users to navigate from one page to another when clicked.
13. What is the purpose of the `<head>` element?
Show the answer
It contains metadata about the document, such as the title, character set, and links to stylesheets or scripts.
14. What does the term 'HyperText' in HTML refer to?
Show the answer
The ability to link from one document to another, creating the interconnected web.
15. Name three places where HTML is used besides web pages.
Show the answer
Email newsletters, mobile apps (via web views), and e-books (EPUB format).
16. What is the purpose of the `<!DOCTYPE html>` declaration?
Show the answer
It tells the browser that the document is written in HTML5, preventing quirks mode.
17. Which element is the root container of an HTML document?
Show the answer
The `<html>` element.
18. What does the `<head>` section contain?
Show the answer
Metadata such as the title, character encoding, CSS links, and other information not directly visible on the page.
19. What is the role of the `<body>` element?
Show the answer
It contains all visible content that users see and interact with.
20. Where should the `<title>` tag be placed?
Show the answer
Inside the `<head>` section.
21. What does the `lang` attribute on the `<html>` tag do?
Show the answer
It specifies the language of the page, improving accessibility and SEO.
22. Why are CSS stylesheets linked inside the `<head>`?
Show the answer
To prevent a flash of unstyled content (FOUC) by allowing the browser to start styling the page immediately.
23. What is quirks mode?
Show the answer
A browser rendering mode triggered by a missing or incorrect `<!DOCTYPE html>` declaration, causing unpredictable layout behavior.
24. How many `<html>`, `<head>`, and `<body>` elements should a valid HTML document have?
Show the answer
Exactly one of each.
25. What is the purpose of the `<meta charset="UTF-8">` tag?
Show the answer
It ensures proper text encoding for special characters.
26. Why are `<script>` tags often placed at the end of the `<body>`?
Show the answer
To improve page load performance by allowing the visible content to render before JavaScript downloads and executes.
27. What is the relationship between `<head>` and `<body>`?
Show the answer
They are sibling elements, both nested directly inside the `<html>` element.
28. What happens if you place `<title>` inside the `<body>`?
Show the answer
It is technically invalid and can cause validation errors or unexpected behavior, though the page might still work.
29. What does the browser process first: `<head>` or `<body>`?
Show the answer
The `<head>` is processed first, as the browser reads the HTML file top-to-bottom.
30. What is the purpose of metadata in the `<head>`?
Show the answer
It helps search engines understand and display page information in results, and provides instructions to the browser.
31. What is an HTML tag?
Show the answer
An HTML tag is a keyword surrounded by angle brackets, e.g., `<tagname>`. Most tags come in pairs: an opening tag and a closing tag with a forward slash.
32. What is the difference between an opening tag and a closing tag?
Show the answer
An opening tag looks like `<tagname>`, while a closing tag has a forward slash before the tag name: `</tagname>`. The closing tag marks where the element ends.
33. What is an HTML element?
Show the answer
An HTML element consists of an opening tag, the content inside, and a closing tag. For example, `<p>Hello</p>` is a paragraph element.
34. What is a self-closing tag (void element)?
Show the answer
A self-closing tag does not have a closing tag because it doesn't wrap content. Examples include `<br>` for line breaks and `<img>` for images.
35. What is nesting in HTML?
Show the answer
Nesting means placing one HTML element inside another, creating a parent-child structure. For example, `<ul><li>Item</li></ul>` nests a list item inside an unordered list.
36. What is semantic HTML?
Show the answer
Semantic HTML uses meaningful tags like `<nav>`, `<article>`, and `<footer>` to describe the purpose of content, improving accessibility, SEO, and code readability.
37. What happens if you forget a closing tag in HTML?
Show the answer
Forgetting a closing tag can cause the browser to misinterpret the page structure, leading to layout and rendering issues. The browser may treat subsequent content as part of the unclosed element.
38. What is the convention for writing tag names in HTML?
Show the answer
Tag names are conventionally written in lowercase for consistency and readability, even though HTML is case-insensitive.
39. What do `<h1>` to `<h6>` tags represent?
Show the answer
They define headings with decreasing importance. `<h1>` is the most important (top-level) heading, and `<h6>` is the least important.
40. What is the purpose of the `<a>` tag?
Show the answer
The `<a>` tag creates hyperlinks to other pages or resources. It requires an `href` attribute to specify the link destination.
41. What is the purpose of the `<img>` tag?
Show the answer
The `<img>` tag embeds images in a webpage. It is self-closing and requires a `src` attribute to specify the image file path.
42. What do `<ul>` and `<ol>` tags create?
Show the answer
`<ul>` creates an unordered (bulleted) list, and `<ol>` creates an ordered (numbered) list. Both use `<li>` tags for each list item.
43. What is the `<p>` tag used for?
Show the answer
The `<p>` tag defines a paragraph of text. It is one of the most common block-level elements in HTML.
44. What is the tree structure of HTML elements?
Show the answer
HTML elements form a tree structure (the DOM tree) where each element can contain child elements. Browsers use this tree to render the page correctly.
45. What are the HTML tags for headings and what do they represent?
Show the answer
Headings are defined with `<h1>` (most important) to `<h6>` (least important), creating a hierarchy of titles and subtitles.
46. What HTML tag defines a paragraph?
Show the answer
The `<p>` tag defines a paragraph, a block-level element that automatically adds margins for readability.
47. How many `<h1>` tags should you use per page and why?
Show the answer
Only one `<h1>` per page to clearly indicate the main topic and avoid confusing search engines and screen readers.
48. Why should heading levels not be skipped?
Show the answer
Skipping levels (e.g., `<h1>` to `<h3>`) breaks the logical hierarchy, confusing screen readers and harming accessibility.
49. What is the purpose of headings in terms of accessibility?
Show the answer
Screen readers rely on heading hierarchy to navigate content, so correct usage is essential for users with visual impairments.
50. How do headings impact SEO?
Show the answer
Search engines use headings to understand page content; a well-structured hierarchy with relevant keywords can improve search rankings.
51. Can you use headings just to make text larger?
Show the answer
No. Headings are for structure, not visual styling. Use CSS `font-size` for appearance.
52. Is it okay to nest a heading inside a `<p>` tag?
Show the answer
No. Headings are block-level elements and should be separate from paragraphs, not nested inside them.
53. Do paragraphs have a hierarchy like headings?
Show the answer
No. All paragraphs are equal in importance; they do not have levels like headings do.
54. What is the best practice for using multiple `<h2>` tags?
Show the answer
Multiple `<h2>` tags are fine and commonly used for major sections under the `<h1>`.
55. What happens if you use headings solely for visual appearance?
Show the answer
It misleads screen readers and search engines, breaking the structural meaning and harming accessibility and SEO.
56. How do browsers display paragraphs by default?
Show the answer
Browsers automatically add space (margin) before and after each `<p>` element for readability.
57. What is the relationship between headings and paragraphs in a well-structured page?
Show the answer
Headings introduce sections, and paragraphs provide the detailed content under each heading, forming a clear, scannable structure.
58. When would you use `<h4>` to `<h6>` tags?
Show the answer
They are used for deep nesting within subsections, though they are less common than `<h1>` to `<h3>`.
59. Do you need a heading before every paragraph?
Show the answer
No. Many paragraphs can follow a single heading; the heading introduces the section, and paragraphs fill it in.
60. What HTML tag creates hyperlinks?
Show the answer
The `<a>` (anchor) tag.
61. What does the `href` attribute specify in an anchor tag?
Show the answer
The destination URL the link goes to.
62. What happens if an anchor tag has no `href` attribute?
Show the answer
The link is not clickable and does nothing.
63. What happens if an anchor tag has no text content between `<a>` and `</a>`?
Show the answer
The link is invisible and useless to users.
64. Why should you avoid using 'click here' as link text?
Show the answer
It is vague and forces users to guess the destination; it also harms accessibility for screen reader users.
65. What attribute opens a link in a new tab or window?
Show the answer
`target="_blank"`
66. How do you create an email link using an anchor tag?
Show the answer
Use `href="mailto:email@example.com"`
67. What is a jump link and how is it created?
Show the answer
A jump link scrolls to a specific section on the same page. It is created using `href="#section-id"`.
68. What is the default display type of an anchor tag?
Show the answer
Inline element.
69. How does a browser handle a relative URL in an `href` attribute?
Show the answer
The browser resolves it against the current page's URL.
70. What is the purpose of descriptive link text?
Show the answer
It improves usability by telling users where the link goes and enhances accessibility for screen reader users.
71. Name three types of destinations an anchor tag can link to.
Show the answer
Other web pages, files (like PDFs), email addresses, or sections within the same page.
72. What HTML element is used to create a form?
Show the answer
The `<form>` element is used to create a form.
73. What attribute of `<input>` determines the kind of input field?
Show the answer
The `type` attribute determines the kind of input (e.g., text, password, email).
74. Why is the `name` attribute important on an input field?
Show the answer
The `name` attribute is required for the input's value to be sent on form submission; without it, the data is ignored.
75. What does `<input type="password">` do?
Show the answer
It creates a password field that masks the user's input for security.
76. Which input type creates a button that submits a form?
Show the answer
`<input type="submit">` creates a button that submits the form.
77. What happens if you use `<input type="button">` without JavaScript?
Show the answer
It does nothing; it does not submit the form and requires JavaScript to function.
78. What is the purpose of `<input type="email">`?
Show the answer
It provides basic email validation and shows a mobile-friendly keyboard with an '@' symbol.
79. What does `<input type="number">` do?
Show the answer
It restricts input to numbers and shows a numeric keypad on mobile devices.
80. Is the `<form>` element visible on the page?
Show the answer
No, the `<form>` element is invisible; it only groups inputs and controls submission.
81. What are two common uses of forms on websites?
Show the answer
Forms are used for login, search, registration, checkout, and data entry.
82. What input type allows multiple selections from a list?
Show the answer
`<input type="checkbox">` allows multiple selections.
83. What input type allows only one selection from a group?
Show the answer
`<input type="radio">` allows only one selection from a group.
Your notes can be a kit like these
Every kit here was made from real study material. Point Veda at a chapter, a PDF, a photo or a link and get notes, flashcards, practice MCQs, games and a scored test — free, in 42 languages.
- Chapter notes
- Flashcards
- Practice MCQs
- Scored tests
- Exam prep
Get Veda free See what students get
Free to start · No ads · Works in 42 languages