Kit Library / Computer Science / Web Development
⚡ Topic Learning KitShared by a Veda learner · Generated with Veda AI
Veda Bites are swipeable micro-lessons — each one teaches exactly one idea. The bites below come from this kit — swipe through them in the app.
💡 Key Idea
The backbone of all web content.
HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to structure content like headings, paragraphs, links, and images. Think of HTML as the skeleton of a webpage — it defines the bones, while CSS and JavaScript add style and behavior.
↳ HTML provides the fundamental structure for all web content.
📖 Definition
The building blocks of HTML.
An HTML tag is a keyword surrounded by angle brackets, like `<p>` for paragraph. Tags usually come in pairs: an opening tag `<p>` and a closing tag `</p>`. The content between them is what the tag affects.
↳ Tags define the structure and meaning of content on a webpage.
💡 Key Idea
Opening tag, content, closing tag.
An HTML element consists of an opening tag, the content, and a closing tag. Some elements are empty, like `<br>` (line break), and don't have a closing tag. Attributes can be added to the opening tag to provide extra information.
↳ Elements are the core units of HTML, with tags and content working together.
⚙️ Process
Every page follows this skeleton.
A standard HTML document has a specific structure that browsers expect. It starts with `<!DOCTYPE html>` and includes `<html>`, `<head>`, and `<body>` sections.
↳ The doctype, html, head, and body tags form the mandatory structure of any HTML page.
💡 Key Idea
Structure your content hierarchy.
HTML provides six levels of headings, from `<h1>` (most important) to `<h6>` (least important). They help organize content and improve accessibility and SEO. Use only one `<h1>` per page for the main title.
↳ Headings create a clear outline of your content, from most to least important.
✏️ Example
Text blocks made easy.
The `<p>` tag defines a paragraph. Browsers automatically add space before and after paragraphs. For a simple line break without starting a new paragraph, use `<br>`.
↳ Use <p> for paragraphs and <br> for line breaks within a paragraph.
💡 Key Idea
Connect the web together.
The anchor tag `<a>` creates hyperlinks. The `href` attribute specifies the destination URL. Links can point to other pages, files, or email addresses.
↳ The <a> tag with an href attribute is how users navigate between web pages.
✏️ Example
Add visuals to your page.
The `<img>` tag embeds an image. It is an empty element (no closing tag) and requires at least the `src` (source) and `alt` (alternative text) attributes.
↳ The <img> tag uses src and alt attributes to display images and provide accessibility.
💡 Key Idea
Organize items neatly.
HTML supports unordered lists (`<ul>`) with bullet points and ordered lists (`<ol>`) with numbers. Each list item is wrapped in `<li>`.
↳ Use <ul> for unordered lists and <ol> for ordered lists, with <li> for each item.
⚖️ Comparison
How elements flow on a page.
HTML elements are either block-level or inline. Block elements start on a new line and take full width; inline elements flow within text and only take necessary width.
↳ Block elements structure the page, while inline elements style content within lines.
💡 Key Idea
Meaningful tags for better structure.
Semantic HTML uses tags that clearly describe their purpose, like `<header>`, `<nav>`, `<main>`, `<article>`, and `<footer>`. This improves accessibility, SEO, and code readability compared to generic `<div>` tags.
↳ Semantic tags give meaning to your content, benefiting users and search engines.
⚠️ Common Mistake
A tiny error, big impact.
A common mistake is forgetting to close tags like `<p>` or `<li>`. This can cause the browser to render content incorrectly, nesting elements unintentionally.
↳ Always close your tags to avoid rendering issues.
🎯 Exam Tip
A guaranteed exam question.
In exams, you'll often be asked to identify the correct basic HTML structure. Remember the order: `<!DOCTYPE html>`, `<html>`, `<head>` (with `<title>`), and `<body>`. Practice writing it from memory.
↳ Knowing the skeleton by heart is a quick win on any HTML test.
HTML is the foundational markup language for creating web pages, using tags to structure content. This quick kit covers the essential elements: document structure, headings, paragraphs, links, images, lists, and the impo…
Full explanation, worked examples & memory tricks in the app
All 19 questions, laddered from warm-up to topper-level, each with its answer and the reasoning behind it.
Q1. Which HTML tag is used to define the root element of an HTML document?
BeginnerC · <html>
The element is the root of an HTML document, containing all other elements.
Q2. Which of the following is a semantic element in HTML5?
BeginnerA · <article>
is a semantic element that represents a self-contained composition, while and are non-semantic.
Q3. What is the purpose of the <head> element in an HTML document?
BeginnerC · To contain metadata and document title
The element contains metadata like the title, character set, and links to stylesheets, not visible content.
Q4. Which tag is used to create a hyperlink in HTML?
BeginnerD · <a>
The (anchor) tag is used to create hyperlinks, with the href attribute specifying the destination.
Q5. What is the correct way to write a comment in HTML?
BeginnerC · <!-- comment -->
HTML comments are written between , and they are not displayed in the browser.
Q6. Which of the following is the correct structure for an HTML document?
BeginnerB · <html><head></head><body></body></html>
The standard structure is as root, containing and in that order.
Q7. What is the purpose of the <footer> element?
BeginnerB · To define a footer for a section or page
typically contains information about the section, like author, copyright, or related links.
Q8. What does the <title> element do?
BeginnerD · Defines the title of the document, shown in the browser tab
The element sets the document's title, which appears in the browser tab and is used for bookmarks.
Q9. Which of the following is a valid HTML tag for a top-level heading?
BeginnerC · <h1>
is the highest-level heading tag, used for the main heading of a page.
Q10. What is the correct way to specify a paragraph in HTML?
BeginnerD · <p>Text</p>
The tag is used to define a paragraph.
Q11. The <div> element is a semantic element that provides meaning to its content.
BeginnerB · False
is a generic container with no semantic meaning; it is used for styling or layout purposes.
Q12. Which element is used to define the main content area of a webpage, which should be unique to the page?
IntermediateB · <main>
is used for the primary content of the page, and it should not appear more than once per document.
Q13. What does the <nav> element represent?
IntermediateB · A section of navigation links
is a semantic element intended for major navigation blocks, such as menus.
Q14. Which attribute is used to specify the character encoding for an HTML document?
IntermediateB · charset
The tag with the charset attribute, like , specifies the document's character encoding.
Q15. Which of the following is NOT a semantic element?
IntermediateD · <div>
is a generic container with no semantic meaning, unlike the others which convey structural meaning.
Q16. Which element is used to define a self-contained piece of content that could be distributed independently, like a blog post?
IntermediateC · <article>
is meant for content that is independently distributable or reusable, such as a forum post or article.
Q17. What does the <aside> element typically contain?
IntermediateB · Content tangentially related to the main content
is used for content that is indirectly related to the main content, like sidebars or pull quotes.
Q18. Which element is used to define a section of a document, such as a chapter or a group of related content?
IntermediateA · <section>
is a semantic element that groups related content, typically with a heading.
Q19. The <header> element can be used multiple times in a single HTML document.
IntermediateA · True
The element can be used for the page header as well as for section or article headers, so it can appear multiple times.
18 flashcards in this kit — the app reviews them with spaced repetition so the right card returns on the right day.
Every game is built from this kit's own content — scores feed your mastery, so playing counts as studying.
Word Match
Built from this kit's own content
True False
Built from this kit's own content
Memory Match
Built from this kit's own content
Flashcard Battle
Built from this kit's own content
Speed Quiz
Built from this kit's own content
Sequence Builder
Built from this kit's own content
Revision Battle
Built from this kit's own content
Playable in the app
The full Veda Bites deck, complete notes, spaced-repetition flashcards, leveled MCQs, tests and games for this kit — plus Daily Facts and the Arena, every day.