Basic Questions
25 questions
1. What is HTML?
HTML, or HyperText Markup Language, is the standard language used to structure content on the web. It tells the browser what a heading is, what a paragraph is, where an image belongs, and how links, lists, forms, and tables are organized on a page.
HTML does not control visual design or business logic by itself. CSS handles presentation and JavaScript handles behavior, but HTML provides the document structure both of those layers depend on. The core idea is that HTML defines meaning and structure, not just how something should look on screen.
2. What is the difference between HTML and HTML5?
HTML is the broader markup standard, while HTML5 refers to the modern version that introduced semantic tags, native audio and video support, better forms, and browser APIs such as Canvas, Geolocation, and local storage. HTML5 also simplified the doctype and encouraged cleaner, more meaningful markup.
The practical difference is that HTML5 reduced dependence on plugins and made it easier to build modern, accessible, media-rich websites using native browser features. It is best explained as an evolution of HTML rather than a completely separate technology.
| Aspect | HTML | HTML5 |
|---|---|---|
| Version Scope | General markup standard | Modern major revision of HTML |
| Semantics | More generic structure | Adds elements like header, main, and article |
| Media Support | Often relied on plugins | Native audio and video support |
| Browser APIs | Limited | Adds Canvas, Storage, Geolocation, and more |
3. Explain the basic structure of an HTML document.
A standard HTML document starts with <!DOCTYPE html>, followed by the root html element. Inside that root, the head section contains metadata such as the page title, character encoding, viewport settings, and linked resources. The body section contains the visible content users interact with.
This structure matters because browsers, search engines, and assistive technologies all depend on it. A clean document structure helps rendering, SEO, accessibility, and maintainability. A complete explanation should cover not only the tags themselves, but also why separating metadata from visible content is important.
4. What are tags, elements, and attributes?
A tag is the markup keyword wrapped in angle brackets, such as p, img, or a. An element is the complete HTML unit, which can include an opening tag, content, and a closing tag. An attribute provides extra information about an element, such as href on a link or src and alt on an image.
This distinction matters because attributes modify behavior or meaning, while elements define structure. A concise explanation becomes much clearer when it includes a small example, such as an image element with src and alt attributes.
5. What is the difference between block-level and inline elements?
Block-level elements usually start on a new line and expand to take the available width of their container. Examples include div, p, and heading tags. Inline elements stay within the normal text flow and only take the space their content needs, such as span, a, and strong.
This matters when structuring content and styling layouts. CSS can change how elements behave visually, but their default semantic purpose still matters when choosing the right tag.
| Aspect | Block Elements | Inline Elements |
|---|---|---|
| Default Flow | Start on a new line | Flow within surrounding text |
| Width Behavior | Typically stretch across available width | Only use needed content width |
| Examples | div, p, h1 | span, a, strong |
| Best Use | Page structure and sections | Text-level meaning or inline content |
6. What are semantic HTML elements and why should you use them?
Semantic HTML elements describe the role of the content they contain. Tags such as header, nav, main, article, section, aside, and footer help explain the document structure beyond simple visual grouping.
They should be used because they improve accessibility, SEO, and maintainability. Screen readers can better understand page landmarks, search engines can better interpret content structure, and developers can read the markup more easily. Semantic HTML usually makes a page easier to reason about than a layout built entirely with generic div elements.
7. What is the purpose of `<!DOCTYPE html>`?
The <!DOCTYPE html> declaration tells the browser to render the document in standards mode. Without it, some browsers may fall back to quirks mode, where older and inconsistent layout behavior can appear.
Although it looks simple, it is important because it helps ensure modern rendering rules are used consistently. It is not just a version label. It prevents legacy browser behavior from affecting layout and interpretation.
8. What are HTML entities? Give some examples.
HTML entities are special character codes used when a character would otherwise be interpreted as markup or when a reserved or non-keyboard-friendly symbol needs to be displayed. For example, < represents the less-than symbol, > the greater-than symbol, & the ampersand, and © the copyright sign.
They are useful when writing examples, showing symbols safely, or preserving specific characters in content. Their purpose is to help HTML display characters without confusing them with actual tags.
9. How do you create hyperlinks? What is the difference between absolute and relative URLs?
Hyperlinks are created with the a element and an href attribute. The href value points to the destination, while the link text tells users what they are clicking. You can also use attributes like target and rel when needed, especially for external links or security-related behavior.
An absolute URL contains the full address, such as https://example.com/about, while a relative URL points from the current site structure, such as /about or images/logo.png. Relative URLs are common for internal navigation because they are shorter and easier to maintain across environments.
The most complete explanation also mentions when each style is appropriate. Absolute URLs are clearer for external destinations, while relative URLs are usually cleaner for internal site links and easier to move across staging and production setups.
| Aspect | Absolute URL | Relative URL |
|---|---|---|
| Format | Full URL including protocol and domain | Path relative to current site or document |
| Best Use | External destinations and canonical references | Internal navigation and local assets |
| Portability | Always points to one exact address | Adapts more easily across environments |
10. What are the main types of lists in HTML?
HTML provides ordered lists with ol, unordered lists with ul, and description lists with dl. Ordered lists are useful when sequence matters, unordered lists are used when order is not important, and description lists work well for term-and-definition style content.
Choosing the correct list type is part of writing meaningful markup. It helps accessibility tools and search engines understand the content pattern instead of treating everything as generic text blocks. The key is to match the list type to the meaning of the content, not just to its visual appearance.
11. What is the purpose of the `head` element and which meta tags are commonly used there?
The head element stores metadata and supporting information about the document rather than user-facing content. Common items inside it include the title, character encoding, viewport settings, page description, canonical URL, CSS links, scripts, and social sharing metadata.
Frequently used meta tags include charset, viewport, and description. In practice, the head section has a strong impact on SEO, performance, device rendering, and browser behavior even though it is not directly visible in the page body.
12. What is the difference between the `title` tag and an `h1` tag?
The title tag appears in the browser tab and is primarily used by search engines, browser history, and bookmarks. The h1 tag is the main visible heading within the page content and introduces the primary topic to users.
A page usually needs both, but they serve different purposes. The title helps external systems and click-through context, while the h1 helps on-page structure and readability. They can be closely related without needing to be identical.
| Aspect | `title` | `h1` |
|---|---|---|
| Location | Inside the head | Inside visible page content |
| Primary Use | Browser tab and SEO context | Main on-page heading |
| Visibility | Not shown in body content | Visible to users on the page |
| Typical Quantity | One per document | Usually one primary heading |
13. How do you add images in HTML?
Images are added with the img element using the src attribute for the image path and the alt attribute for alternative text. Additional attributes such as width, height, loading, and srcset can improve performance and layout stability.
Images are not only about displaying visuals. They also affect accessibility, SEO, and performance. Providing meaningful alt text and predictable dimensions is part of writing production-ready HTML.
14. What is the purpose of the `alt` attribute?
The alt attribute provides alternative text for an image when the image cannot be seen or loaded. Screen readers rely on it to explain meaningful images to users with visual impairments, and browsers can display it when the resource fails to load.
Its purpose is not to repeat filenames or fill space. Good alt text should describe the meaning or function of the image in context. Decorative images can use an empty alt so assistive tools do not read unnecessary noise.
15. What are empty elements in HTML?
Empty elements are tags that do not wrap content and therefore do not need a closing tag in HTML. Common examples include img, br, hr, meta, link, and input. Their job is usually to embed something, break flow, or provide metadata instead of surrounding visible text.
These elements still matter structurally because they provide behavior or metadata even without inner text. For example, an img element depends on attributes like src and alt, and a meta tag can affect encoding, viewport, or SEO without showing anything in the page body.
They are best understood as purpose-driven tags whose meaning comes from attributes and browser behavior rather than from content placed between opening and closing tags.
16. How do you add comments in HTML?
HTML comments are written using <!-- comment text -->. Browsers ignore them when rendering the page, which makes them useful for developer notes, temporary reminders, or marking sections during development.
Comments should be used carefully. They are visible in page source and developer tools, so they should never contain secrets or sensitive implementation notes. In production code, comments are most useful when they clarify intent rather than repeating what is already obvious from the markup.
17. What is the difference between `b` and `strong`, and between `i` and `em`?
The b tag is mainly a stylistic offset without strong semantic meaning, while strong communicates importance. Similarly, i is often used for an alternate voice or stylistic distinction, while em indicates emphasis that can affect meaning when spoken by assistive tools.
In modern HTML, semantic meaning should usually guide the choice. If the goal is emphasis or importance, em and strong are the better options. If the change is purely presentational, CSS is often a cleaner solution.
| Aspect | `b` / `i` | `strong` / `em` |
|---|---|---|
| Primary Role | Visual or stylistic distinction | Semantic importance or emphasis |
| Accessibility Meaning | Limited by default | More meaningful to assistive tools |
| Best Use | Stylistic offset or alternate voice | Content where meaning should be emphasized |
18. What is the `form` element and what are its key attributes?
The form element groups inputs that collect user data and prepares that data for submission or processing. Common attributes include action, which defines where data is sent, method, which defines how it is sent, and attributes like autocomplete, novalidate, or enctype for specific behaviors.
Forms are central to user interaction on the web, so both structure and submission behavior matter. In real applications, forms also depend on proper labels, validation, and accessibility to work well.
19. What are some common input types in HTML?
Common input types include text, email, password, number, checkbox, radio, file, date, and submit. Each type gives the browser more information about the expected data and can trigger better keyboards, built-in validation, or native UI behaviors.
Using the correct input type improves usability and semantics. For example, email helps validate format, number suggests numeric input, and checkbox is more appropriate than forcing a text field to capture a true-or-false choice.
20. What is the difference between `id` and `class` attributes?
The id attribute uniquely identifies a single element in a document, while class can be shared across multiple elements. An id is often used for fragment links, JavaScript targeting, labels, or unique page landmarks, while class is mainly used for styling groups of elements or attaching reusable behavior.
Classes are generally better for styling because they are reusable, whereas IDs are better reserved for unique structural or behavioral purposes.
| Aspect | `id` | `class` |
|---|---|---|
| Uniqueness | Should be unique per page | Can be reused across elements |
| Common Use | Anchors, labels, scripting targets | Styling and reusable grouping |
| Multiplicity | One primary value per element | Multiple classes allowed |
21. How do you create tables in HTML?
HTML tables are built with table, tr, th, and td, and can be organized further with thead, tbody, and tfoot. The structure should reflect real tabular relationships such as rows, columns, and headers rather than being used for general layout.
Accessible tables need proper header associations so screen readers can understand the meaning of each cell. The most important point is that tables are appropriate when the content is truly tabular, not simply when the layout looks grid-like.
22. What is an `iframe` and when would you use it?
An iframe embeds another HTML document inside the current page. It is commonly used for external content such as maps, videos, payment widgets, dashboards, or sandboxed third-party tools that need isolation from the main page.
It should be used carefully because it can introduce performance, accessibility, responsive design, and security concerns. It is useful for isolation and embedding, but it also reduces control compared with native content integration.
23. What is the difference between the `link` tag and the `a` tag?
The a tag creates a clickable hyperlink within the visible content, while the link tag is placed in the head to connect external resources such as stylesheets, icons, or canonical URLs to the document. One is part of the user-facing document flow and the other is part of document metadata and resource relationships.
Even though both relate to connections, they serve very different roles. Users click an a tag to navigate, but a link tag is interpreted by the browser or search engines to load or describe related resources.
The important distinction is that the names sound similar but the purposes are not. The a tag is for navigation in visible content, while link mainly supports document setup and external resource hints.
| Aspect | `a` tag | `link` tag |
|---|---|---|
| Location | Inside visible page content | Usually inside the head |
| Primary Purpose | Clickable navigation | Resource linking and metadata |
| User Interaction | Yes | No direct interaction |
| Common Example | Page link or button-style link | Stylesheet, favicon, canonical URL |
24. How do you embed audio and video in HTML5?
HTML5 provides native audio and video elements that allow media playback without third-party plugins. These elements support attributes such as controls, autoplay, muted, loop, and preload, and can include multiple source tags for format fallbacks.
Native media support improved performance, accessibility, and maintainability compared with plugin-based approaches. It is also good to mention captions, transcripts, and fallbacks for users who cannot access media directly.
25. What is the purpose of the `label` element in forms?
The label element gives a human-readable name to a form control and improves both usability and accessibility. When a label is properly associated with an input, users can click the label to focus or activate the input, and screen readers can announce the control more clearly.
This is one of the simplest but most important parts of accessible forms. A field without a proper label may still look usable visually, but it becomes much harder to understand for assistive technology users.