Crack That Interview: Advanced HTML Concepts Quiz Quiz

1. HTML Doctype and Versions

   Which declaration is correct to specify an HTML5 document and what is its main role in rendering pages?

   1. u003C!DOCTYPE htmlu003E; It ensures the browser uses the latest HTML standard.
   2. u003CDOCTYP htmlu003E; It defines a custom HTML schema.
   3. u003CDOCTYPE 5.0u003E; It applies HTML5 styles only.
   4. u003C!DOCHTMLu003E; It loads external CSS files.
   5. u003CDOCTYPEhtml5u003E; It triggers legacy browser mode.

2. Attributes and Elements Distinction

   Given the tag u003Ca href='page.html' target='_blank'u003E, what do 'href' and 'target' represent in this scenario?

   1. They are attributes that provide extra information about the anchor element.
   2. They are special HTML comments.
   3. They are block-level HTML elements.
   4. They are JavaScript event functions.
   5. They are part of the file path syntax.

3. Block-Level vs. Inline Elements

   When would you use a u003Cspanu003E tag over a u003Cdivu003E tag if you want to color only one word in a paragraph?

   1. Use u003Cspanu003E because it’s an inline element suitable for styling part of text.
   2. Use u003Cdivu003E because it merges with the text seamlessly.
   3. Use u003Cdivu003E because it's an inline-level element.
   4. Use u003Cspanu003E because it creates a new block on the page.
   5. Use u003Cdivu003E because u003Cspanu003E cannot add color.

4. Creating Forms and Input Fields

   To collect a user's email and submit it, which is the correct minimal HTML structure?

   1. u003Cformu003Eu003Cinput type='email'u003Eu003Cbutton type='submit'u003Eu003C/buttonu003Eu003C/formu003E
   2. u003Cformu003Eu003Cdiv type='email'u003Eu003Csubmitu003Eu003C/submitu003Eu003C/divu003Eu003C/formu003E
   3. u003Cformsu003Eu003Cinput email='text'u003Eu003Csubmit/u003Eu003C/formsu003E
   4. u003Cformu003Eu003Cinput type='mail'u003Eu003Cinput type='button'u003Eu003C/formu003E
   5. u003Cinput type='email'u003Eu003Cformu003Eu003Cbuttonu003Eu003C/buttonu003Eu003Cformu003E

5. Image Tag and Accessibility

   Why should every u003Cimgu003E tag always include an 'alt' attribute, and how does it help?

   1. It provides text for screen readers and displays if the image fails to load.
   2. It speeds up image downloading.
   3. It sets the image’s CSS class.
   4. It doubles as a link destination.
   5. It enlarges the image automatically.

6. Ordered vs. Unordered Lists

   What is the main difference between the u003Colu003E and u003Culu003E tags when displaying a list in HTML?

   1. u003Colu003E makes a numbered list; u003Culu003E makes a bulleted list.
   2. u003Colu003E only works with tables, u003Culu003E only with paragraphs.
   3. u003Colu003E is for images, u003Culu003E is for videos.
   4. u003Colu003E defines inline text, u003Culu003E defines block text.
   5. u003Colu003E is obsolete; u003Culu003E should only be used.

7. Semantic vs. Non-Semantic Tags

   Which of the following is a semantic HTML element, and what is its advantage?

   1. u003Carticleu003E; It describes the content’s meaning to browsers and developers.
   2. u003Cspanu003E; It always bolds the text automatically.
   3. u003Cbu003E; It represents block-level content.
   4. u003Cdivu003E; It is always used for navigation menus.
   5. u003Ccoloru003E; It specifies color semantics.

8. Table Structure and Headers

   Given the HTML code for a table, which tags correctly represent header cells and data cells in a proper table row?

   1. u003Ctru003Eu003Cthu003EHeaderu003C/thu003Eu003Ctdu003EDatau003C/tdu003Eu003C/tru003E
   2. u003Crowu003Eu003Cheaderu003EHeadu003C/headeru003Eu003Cdatau003ECellu003C/datau003Eu003C/rowu003E
   3. u003Ctableheadu003Eu003Cheadu003EHeaderu003C/headu003Eu003Ctabledatau003EDatau003C/tabledatau003Eu003C/tableheadu003E
   4. u003Ctru003Eu003Ctdu003EHeaderu003C/tdu003Eu003Cthu003EDatau003C/thu003Eu003C/tru003E
   5. u003Ctrhu003Eu003Cthdu003EHeaderu003C/thdu003Eu003Ctdtu003EDatau003C/tdtu003Eu003C/trhu003E

9. HTML Comments Syntax

   What is the correct syntax to write a comment in HTML so it will not be rendered by the browser?

   1. u003C!-- This is a comment --u003E
   2. // This is a comment //
   3. u003Ccommentu003EThis is a commentu003C/commentu003E
   4. /* This is a comment */
   5. [# This is a comment #]

10. Strong and Bold, Emphasis and Italics

    What is the key difference between using u003Cstrongu003E vs. u003Cbu003E and u003Cemu003E vs. u003Ciu003E tags in HTML?

    1. u003Cstrongu003E and u003Cemu003E communicate semantic meaning for accessibility, while u003Cbu003E and u003Ciu003E are only for visual styling.
    2. u003Cbu003E and u003Ciu003E never affect appearance; u003Cstrongu003E and u003Cemu003E always change color.
    3. u003Cstrongu003E and u003Ciu003E should only be paired; u003Cbu003E and u003Cemu003E cannot be.
    4. All four tags are used strictly for underlining text.
    5. u003Cbu003E means heading; u003Cstrongu003E means image.