Try for free
DiscoverMobile appPricingFor schoolsHelpLogin
← Back to quizzesFree quiz

Fundamentals of HTML5

HTML5 is the backbone of modern web development. Mastering its essential tags, attributes, and semantics not only improves the accessibility of your pages but also boosts search‑engine…

10 questions~5 min
Fundamentals of HTML5 — Qwi
0 / 10
Score: 0%
1

Which attribute must be present in an tag to create a functional hyperlink?

2

What is the effect of setting target="_blank" on a hyperlink?

3

In HTML5, which tag is used to define a paragraph and must be closed with ?

4

Which of the following is a required attribute for the element?

5

If a developer wants to indicate that a piece of text is no longer relevant, which tag should they use?

6

Which HTML5 element is specifically intended to contain metadata such as character encoding and page title?

7

When using a relative URL in the href attribute, which of the following is a correct example?

8

Which tag should be used to group a block of code snippets for better semantics?

9

What is the purpose of the declaration in the document head?

10

Which of the following heading tags represents the lowest level of importance in HTML5?

Fundamentals of HTML5: Core Concepts and Best Practices

HTML5 is the backbone of modern web development. Mastering its essential tags, attributes, and semantics not only improves the accessibility of your pages but also boosts search‑engine visibility. This course breaks down the most frequently tested concepts, turning quiz questions into a comprehensive learning experience.

1. Creating Functional Hyperlinks

Hyperlinks are the connective tissue of the web. To make an <a> element work, the href attribute is mandatory. It tells the browser where to navigate when the link is activated.

  • Correct attribute: href="URL"
  • Common mistakes: using title, src, or alt – these attributes belong to other elements.

Example:

<a href="https://example.com">Visit Example</a>

2. Controlling Link Destination with target

The target attribute defines where the linked resource opens. The most used value, _blank, opens the link in a new browser tab or window, preserving the current page for the user.

  • _self – default, opens in the same tab.
  • _parent – opens in the parent frame (relevant for framesets).
  • _top – opens in the topmost frame.
  • _blank – opens in a new tab/window.

Example:

<a href="https://example.com" target="_blank">Open in new tab</a>

3. Paragraphs: The <p> Element

Paragraphs are the most basic block‑level element for textual content. In HTML5 you must open with <p> and close with </p>. Forgetting the closing tag can cause unexpected layout issues.

<p>This is a paragraph of text.</p>

4. Images and the Required src Attribute

Every <img> element needs a src attribute that points to the image file. Without it, the browser cannot display the image, and the element becomes meaningless.

  • Optional but recommended: alt – provides alternative text for accessibility and SEO.
  • Commonly confused attributes: rel (used with <link>) and href (used with <a>).
<img src="images/logo.png" alt="Company Logo">

5. Indicating Out‑of‑Date Text with <s>

When a piece of text is no longer relevant but you do not want to remove it from the document, use the <s> tag. It renders the text with a strikethrough, signalling that the information is obsolete.

  • <del> – marks content that has been deleted.
  • <ins> – marks newly inserted content.
  • <strike> – deprecated in HTML5; avoid using it.

Example:

<p>Price: <s>$99.99</s> $79.99</p>

6. Document Metadata: The <head> Section

The <head> element houses metadata that is not displayed directly on the page but is crucial for browsers and search engines. Inside <head> you typically find:

  • <meta charset="UTF-8"> – defines character encoding.
  • <title> – the page title shown in browser tabs and search results.
  • Other <meta> tags for description, viewport, and SEO.
<head>
  <meta charset="UTF-8">
  <title>Fundamentals of HTML5</title>
  <meta name="description" content="Learn the essential HTML5 tags and attributes for modern web development.">
</head>

7. Relative URLs: Keeping Links Portable

A relative URL points to a resource based on the current document’s location, without specifying the protocol or domain. This makes your site easier to move between environments (development, staging, production).

  • Correct example: href="hiperlinks/" – navigates to the hiperlinks folder relative to the current page.
  • Incorrect examples:
    • href="//cdn.example.com/lib.js" – protocol‑relative (still absolute).
    • href="javascript:alert('hi');" – JavaScript pseudo‑URL.
    • href="http://example.com/page" – fully absolute.

Tip: If the URL does not start with http, //, or javascript:, it is most likely relative.

8. Marking Up Code Snippets with <code>

When you need to display source code, the <code> element provides semantic meaning and improves accessibility. Pair it with <pre> for preserving whitespace and line breaks.

<pre>
  <code>
    function helloWorld() {
      console.log('Hello, world!');
    }
  </code>
</pre>

Remember:

  • <code> – inline code.
  • <pre> – block of pre‑formatted text.
  • <kbd> – keyboard input.
  • <samp> – sample output.

9. SEO‑Friendly HTML5 Structure

Search engines reward well‑structured, semantic markup. Use the following hierarchy to guide crawlers:

  • <header> – site‑wide navigation and branding.
  • <nav> – primary navigation links.
  • <main> – the core content of the page.
  • <section> – thematic grouping of related content.
  • <article> – self‑contained composition (blog post, news article).
  • <aside> – tangential content such as sidebars.
  • <footer> – footer information and links.

Combine these with proper heading tags (<h2>, <h3>, etc.) and descriptive alt attributes for images to maximize relevance and click‑through rates.

10. Quick Reference Cheat Sheet

  • Hyperlink: <a href="URL">Link text</a>
  • Open in new tab: add target="_blank"
  • Paragraph: <p>…</p>
  • Image: <img src="path" alt="description">
  • Out‑of‑date text: <s>…</s>
  • Metadata container: <head>…</head>
  • Relative link example: href="hiperlinks/"
  • Code snippet: <code>…</code> (often inside <pre>)

11. Practice Exercise

Write a small HTML5 page that includes:

  • A <head> with a UTF‑8 charset and a descriptive title.
  • A navigation bar with three links, one of which opens in a new tab.
  • A main section containing a paragraph, an image with proper src and alt, and a code block showing a simple JavaScript function.
  • A footer that uses the <s> tag to strike out an outdated price.

After completing the exercise, validate your markup with the W3C validator to ensure compliance.