DEV Community

Raj
Raj

Posted on

HTML & CSS Mock Interview Questions & Answers Part 3

21. What is the tag?

The tag, or anchor element, is the fundamental HTML element used to create hyperlinks that connect web pages, documents, files, and external web locations together. It allows users to jump across the web by clicking text, buttons, or images wrapped inside the anchor tag. Anchors require the href attribute to specify the destination URL, page fragment, email address (mailto:), or telephone number (tel:). Beyond basic navigation, anchors support accessibility and performance parameters such as rel="noopener noreferrer" and downloading triggers using download.

22. What is the href attribute?

The href (Hypertext Reference) attribute is the critical property required on anchor tags () that specifies the target URL destination of the link. Without an href attribute, an tag functions merely as a placeholder anchor rather than an active clickable hyperlink. The value of href can be an absolute web address (https://...), a relative local path (/about.html), a page section ID anchor (#section-id), or a protocol link (mailto: or tel:). It tells the browser exactly where to route the user when the element is clicked.

23. How do you open a link in a new tab?

You open a link in a new tab by adding the target="_blank" attribute to the anchor () tag. Whenever a user clicks a link configured with target="_blank", the browser opens the destination URL in a brand-new tab or window instead of replacing the current page. For security and performance reasons, you should always combine target="_blank" with rel="noopener noreferrer". This prevents the newly opened external page from accessing your origin page's window.opener object, protecting your website from potential tab-nabbing security vulnerability attacks.

24. What is the tag?

The tag is a self-closing void element used to embed raster or vector graphics directly into an HTML page document. Rather than inserting image pixels directly into the code, it creates an inline visual frame that fetches and renders the visual asset from an external path. It requires the mandatory src attribute to locate the image and an alt attribute to provide alternative text for accessibility. Modern tags also support high-resolution responsive switching using srcset and performance optimizations like loading="lazy".

25. What is the purpose of the src attribute?

The src (source) attribute defines the exact file path or URL location of the media asset that an , , <iframe>, or <audio>/<video> element should fetch and render. If the path provided in the src attribute is broken, invalid, or blocked by CORS security policies, the browser will fail to display the asset and fall back to alternative content. The src path can be an absolute web address pointing to an external domain or a relative file directory path pointing to your local web server storage.</p>

<p><strong>26. What is the purpose of the alt attribute?</strong></p>

<p>The alt (alternative text) attribute provides a plain-text description of an image for accessibility, performance, and SEO purposes. If an image fails to load due to a poor network connection or broken src path, the browser displays the alt text in place of the image. More importantly, screen readers read the alt attribute aloud to visually impaired users, allowing them to comprehend the visual content. Including descriptive alt text also helps search engine crawlers index your image content for relevant web search queries.</p>

<p><strong>27. What is the difference between an absolute URL and a relative URL?</strong></p>

<p>An absolute URL specifies the complete, full web address of a resource, including the protocol, domain name, and file path (e.g., <a href="https://example.com/images/logo.png"&gt;https://example.com/images/logo.png&lt;/a&gt;). A relative URL, on the other hand, specifies a path relative to the current working document&#39;s directory without including protocol or domain names (e.g., ../images/logo.png). Absolute URLs are used when linking to external websites across different servers, while relative URLs are preferred for linking internal pages within the same website because they remain functional regardless of domain or hosting changes.</p>

<p><strong>28. What is an HTML list?</strong></p>

<p>An HTML list is a structured set of tags used to group related items together in an organized, readable list format. HTML provides three primary types of lists: Unordered Lists (<ul>) for bulleted items, Ordered Lists (<ol>) for numbered/sequential items, and Description Lists (<dl>) for key-value terms and definitions. Each list container holds individual list items defined by <li> tags (or <dt>/<dd> tags for description lists). HTML lists help organize content logically, improve visual scannability, and provide structured semantic trees for screen readers.</p>

<p><strong>29. What is the difference between <ul> and <ol>?</strong></p>

<p>The key difference between <ul> and <ol> lies in the semantic order and default styling of their list items. A <ul> (Unordered List) is used when the chronological order of items does not matter, and browsers display bullet points by default. An <ol> (Ordered List) is used when sequence, step-by-step priority, or ranking is important, and browsers automatically precede items with incrementing numbers, letters, or roman numerals. Both use <li> tags for their items, but <ol> implies that altering the item sequence changes the actual meaning of the content.</p>

<p><strong>30. What is the <li> tag?</strong></p>

<p>The <li> (List Item) tag is used to wrap every individual item or entry inside an unordered list (<ul>), an ordered list (<ol>), or a menu (<menu>). It must always be nested as a direct child inside a list container to maintain valid HTML markup and accessibility tree structure. Inside an <li> tag, you can place raw text, inline formatting, links, images, or even nest an entirely new sub-list to create multi-level menus. Its visual bullet or numeric marker is automatically rendered by the parent list container type.</p>

Top comments (0)