HTML: Fundamentals & Structure Flashcards
HTML boilerplate structure Doctype and browser rendering Block vs inline elements Semantic HTML elements (, , , etc.) (20 cards)
What is the basic HTML boilerplate structure?
The basic HTML boilerplate includes <!DOCTYPE html>, <html>, <head> with meta tags and title, and <body> containing the content.
What is the purpose of the <!DOCTYPE html> declaration?
It tells the browser to render the page in standards-compliant mode rather than quirks mode.
How does the browser handle missing or incorrect DOCTYPE?
It may enter quirks mode, causing inconsistent layout and rendering behavior across browsers.
What is the difference between block and inline elements in HTML?
Block elements take up the full width and start on a new line (e.g., <div>), while inline elements stay in line and only take as much width as needed (e.g., <span>).</span>
What are semantic HTML elements?
Semantic elements like <header>, <main>, and <footer> clearly describe their purpose, improving accessibility and SEO.
Why does semantic HTML matter?
It improves readability for developers, aids screen readers, and enhances search engine understanding.
Compare <section>, <div>, and <article>.
<div> is a generic container, <section> represents a standalone section of content, and <article> represents self-contained content like a blog post.
</article></section></div>
What is a use case for using <main>?
To wrap the central content of a page, excluding navigation, headers, and footers.
What is the advantage of using semantic HTML?
Improved accessibility, SEO benefits, and better collaboration among developers and designers.
What are the disadvantages of non-semantic HTML?
Reduced accessibility, poor SEO, and harder-to-maintain codebases.
What is the best practice for nesting semantic tags?
Follow logical structure, e.g., place <article> inside <section> and avoid unnecessary nesting for clarity.
What are potential gotchas with using <div> everywhere?
It creates div soup, reducing semantic meaning and accessibility, and complicating maintenance.
What impact does semantic HTML have on system design?
It supports better separation of concerns, accessibility, and responsiveness, which are crucial in frontend architecture.
How does HTML performance relate to semantic tags?
Semantic tags can reduce reliance on JavaScript for structure, improving load time and rendering efficiency.
What are common interview questions on HTML fundamentals?
‘What is semantic HTML?’, ‘Compare block and inline elements.’, ‘What does <!DOCTYPE html> do?’
What are debugging tips for HTML structure issues?
Use browser dev tools to inspect element nesting, display types, and rendering mode.
What is a real-world tradeoff when choosing between <div> and semantic elements?
<div> offers flexibility and quick prototyping, but semantic elements provide long-term clarity and maintainability.
</div>
What is the architectural implication of proper HTML structure?
Clean, semantic HTML contributes to a well-structured frontend, easier integration with CSS and JavaScript, and future scalability.
How do screen readers benefit from semantic HTML?
They rely on semantic tags to understand and navigate content properly, improving accessibility for users with disabilities.
Why is it important to avoid deeply nested non-semantic containers?
It complicates the DOM, reduces readability, and makes styling and debugging harder.
