LEARN HTML 🌐 Elevate Your Skills Learn more about HTML5!
Basic Concepts & Definitions
1. What does HTML stand for?
HTML stands for HyperText Markup Language. It is the standard markup language used for creating web pages and web applications.
- HyperText: Refers to links that connect web pages to one another, either within a single website or between websites.
- Markup Language: A way of coding a document that, along with the text, incorporates tags to define elements.
Example:
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
2. Which of the following is NOT a semantic element in HTML5?
Semantic elements in HTML5 are those that clearly describe their meaning to both the browser and the developer. Examples include <form>, <table>, and <article>. Non-semantic elements, like <div> and <span>, do not tell anything about their content.
- Semantic Elements: <header>, <footer>, <article>, etc.
- Non-Semantic Elements: <div>, <span>, etc.
Tip: Use semantic elements for better readability and accessibility. They help screen readers and search engines to better understand the content of your website.
3. What is the purpose of the lang attribute in an HTML5 document?
The lang attribute specifies the primary language of the document’s content. It’s crucial for accessibility, as screen readers use this attribute to provide correct pronunciation. It also helps search engines return language-specific results.
Example:
<head>
<title>Document Title</title>
</head>
<body>
<p>This document is in English.</p>
</body>
In this example, lang=”en” indicates that the document is in English.
Tip: Always set the lang attribute in your HTML document for better accessibility and SEO.
4. What does the viewport meta tag do in HTML5?
The viewport meta tag is used to control the layout on mobile browsers. Without it, mobile devices will render pages at typical desktop screen widths, and then scale the pages down, making them difficult to read.
Example:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
This viewport tag sets the width of the page to follow the screen-width of the device (which varies depending on the device), and sets the initial zoom level when the page is first loaded by the browser.
Tip: Always use the viewport meta tag in an HTML5 document to ensure your site is mobile-friendly.
HTML5 Elements and Tags
1. Footer for a Document or Section: <footer>
The <footer> element specifies a footer for a document or section. It often contains authorship information, contact information, copyrights, and links to related documents.
Example:
<footer>
<p>Copyright © 2021 Company Name</p>
</footer>
2. Drawing Graphics (via JavaScript): <canvas>
The <canvas> element is used to draw graphics on a web page, typically via JavaScript.
Example:
<canvas id=”myCanvas”></canvas>
<script>
var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(‘2d’);
ctx.fillStyle = ‘green’;
ctx.fillRect(10, 10, 100, 100);
</script>
3. Navigation Links: <nav>
The <nav> element is used to define a set of navigation links.
Example:
<nav>
<a href=”/”>Home</a> |
<a href=”/about”>About</a> |
<a href=”/contact”>Contact</a>
</nav>
4. Playing Audio Files: <audio>
The <audio> element is used to embed sound content (audio files) in documents.
Example:
<audio controls>
<source src=”audiofile.mp3″ type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>
5. Thematic Break: <hr>
The <hr> element represents a thematic break between paragraph-level elements, like a scene change in a story or a shift of topic.
Example:
<p>First topic…</p>
<hr>
<p>Second topic…</p>
6. Introductory or Navigational Aids: <header>
The <header> element represents a container for introductory content or navigational links.
Example:
<header>
<h1>Website Title</h1>
<p>Welcome to my website</p>
</header>
7. Independent, Self-Contained Content: <article>
The <article> element holds content that makes sense on its own and can be independently distributed or reused (e.g., a forum post, magazine or newspaper article).
Example:
<article>
<h2>Article Title</h2>
<p>Article content…</p>
</article>
8. Section Linking to Other Documents: <section>
The <section> element defines a section in a document, often used for chapters, headers, footers, or any other sections of the document.
Example:
<section id=”chapter1″>
<h2>Chapter 1: Introduction</h2>
<p>Chapter content…</p>
</section>
9. List of Commands: <menu>
The <menu> element represents a list of commands or options.
Example:
<menu type=”toolbar”>
<li><button type=”button”>Home</button></li>
<li><button type=”button”>Products</button></li>
</menu>
10. Container for External Applications/Content: <embed> or <object>
The <embed> or <object> elements are used to embed external applications or interactive content.
Example:
<embed src=”file.swf” width=”500″ height=”300″>
<!– or –>
<object data=”movie.swf” width=”500″ height=”300″></object>
11. Header for a Document or Section: <header>
The <header> element represents a container for introductory content or a set of navigational links.
Example:
<header>
<h1>Welcome to My Blog</h1>
<p>Your source for news and articles.</p>
</header>
12. Tangentially Related Content (Sidebar): <aside>
The <aside> element is used for content that is tangentially related to the content around it, often used for sidebars.
Example:
<aside>
<h2>Related Articles</h2>
<ul>
<li>Article 1</li>
<li>Article 2</li>
</ul>
</aside>
13. Unordered List: <ul>
The <ul> (unordered list) element represents a list of items where the order of the items is not important.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
14. Section in a Document: <section>
The <section> element is used to define a specific section within a document.
Example:
<section>
<h2>About Us</h2>
<p>Information about the company…</p>
</section>
15. Introductory Content or Navigational Links: <header>
The <header> element is used for introductory content or navigational links within a website.
Example:
<header>
<h1>My Website</h1>
<nav>
<a href=”/”>Home</a> |
<a href=”/about”>About</a>
</nav>
</header>
16. Independent Self-Contained Content: <article>
The <article> element is used for self-contained content, such as a blog post or news article.
Example:
<article>
<h2>Blog Post Title</h2>
<p>Blog post content…</p>
</article>
17. Group of Media Content: <source>
The <source> element is used with <audio> or <video> elements to specify multiple media sources.
Example:
<video controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
18. Quoted Block of Text: <blockquote>
The <blockquote> element is used to define a block of text that has been quoted from another source.
Example:
<blockquote cite=”http://source.com”>
<p>This is a quoted text from a source.</p>
</blockquote>
These HTML5 elements and tags are essential for structuring and enriching web content, ensuring it is semantically meaningful and accessible. They play a crucial role in the overall design and functionality of web pages.
HTML5 Form Elements and Attributes
1. Invalid <input> Type in HTML5
In HTML5, types like text, number, email, and date are valid for <input>. An invalid type would be something that is not recognized by HTML5 standards, such as slider.
Example:
<!– Valid input type –>
<input type=”text” name=”name”>
<!– Invalid input type –>
<input type=”slider” name=”slider”>
2. Purpose of the <datalist> Element in HTML5
The <datalist> element provides a list of pre-defined options to an <input> element. It is useful for suggesting possible values for a text input, thus aiding in auto-completion.
Example:
<input list=”browsers” name=”browser”>
<datalist id=”browsers”>
<option value=”Chrome”>
<option value=”Firefox”>
<option value=”Safari”>
<option value=”Edge”>
</datalist>
3. Function of the pattern Attribute in an HTML5 Input Field
The pattern attribute specifies a regular expression that the input element’s value is checked against. It is used for validating the form data.
Example:
<!– pattern for a simple email format –>
<input type=”text” name=”email” pattern=”[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$” title=”Enter a valid email address”>
4. Role of the placeholder Attribute in an Input Field
The placeholder attribute provides a short hint that describes the expected value of an input field. It is displayed inside the input field before the user enters a value.
Example:
<input type=”text” name=”name” placeholder=”Enter your name”>
5. Purpose of the maxlength Attribute in an <input> Element
The maxlength attribute specifies the maximum number of characters allowed in an input field.
Example:
<!– Accepts up to 10 characters –>
<input type=”text” name=”username” maxlength=”10″>
6. Function of the form Attribute of the <button> Element in HTML5
The form attribute of the <button> element specifies the ID of the form the button belongs to, allowing the button to be associated with a form even if it is not inside the form element.
Example:
<form id=”loginForm”>
<!– form content –>
</form>
<button form=”loginForm” type=”submit”>Submit</button>
7. Function of the placeholder Attribute in HTML5 Input Elements
The placeholder attribute in HTML5 input elements shows a hint or guide text inside the input field before the user enters a value. It’s used to give users an example of what the input should look like.
Example:
<input type=”email” placeholder=”example@domain.com”>
8. Purpose of the formaction Attribute in an <input type=”submit”> Element
The formaction attribute in an <input type=”submit”> element overrides the action attribute of the form it belongs to. It specifies a different URL to which the form’s data will be sent when this submit button is pressed.
Example:
<form action=”/default-action”>
<input type=”submit” value=”Submit to Default”>
<input type=”submit” formaction=”/different-action” value=”Submit to Different”>
</form>
9. Function of the nowrap Attribute in a <td> Element in HTML5
The nowrap attribute in a <td> element prevents the text inside the table cell from wrapping. This attribute is not part of HTML5 (it’s obsolete) and should be avoided in favor of CSS for such styling.
Example:
<td style=”white-space: nowrap;”>This text will not wrap.</td>
Note: For nowrap, it’s recommended to use CSS (white-space: nowrap;) rather than the HTML attribute.
HTML5 Media and Graphics
1. Embedding Video Files with the <video> Element
The <video> element in HTML5 is used to embed video files in a web page, offering built-in controls for playback.
Example:
<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
Tips:
- Always include multiple source files for cross-browser compatibility.
- Add a text message inside the <video> tag for browsers that do not support it.
2. Drawing Graphics with the <canvas> Element
The <canvas> element is used for drawing graphics on the fly via scripting (usually JavaScript). It’s particularly useful for rendering graphs, game graphics, or other visual images dynamically.
Example:
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000;”>
</canvas>
<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.fillStyle = “blue”;
ctx.fillRect(0, 0, 200, 100);
</script>
Tips:
- The <canvas> element itself is just a container. You need to use JavaScript to actually draw the graphics.
- Set a fallback message for browsers that don’t support <canvas>.
3. Embedding Audio Files with the <audio> Element
The <audio> element allows you to embed audio files that users can play directly on the website. Like the <video> tag, it supports multiple sources and includes built-in controls.
Example:
<audio controls>
<source src=”sound.mp3″ type=”audio/mpeg”>
<source src=”sound.ogg” type=”audio/ogg”>
Your browser does not support the audio element.
</audio>
Tips:
- Provide multiple audio formats to ensure compatibility with different browsers.
- Include a message for browsers that don’t support the <audio> element.
4. Using Scalable Vector Graphics (SVG)
SVG is an XML-based markup language for describing two-dimensional vector graphics. SVG is used for icons, logos, and complex drawings. Being vector graphics, SVG images are scalable without loss of resolution.
Example:
<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
</svg>
Tips:
- SVG is great for high-quality graphics that need to scale for different device sizes.
- You can style SVG elements with CSS and make them interactive with JavaScript.
5. Embedding External Media with the <embed> and <object> Elements
The <embed> and <object> elements are used to embed external applications and interactive content, like Flash animations or PDF readers.
Example of <embed>:
<embed src=”file.swf” width=”400″ height=”50″>
Example of <object>:
<object data=”file.swf” width=”400″ height=”50″>
<embed src=”file.swf” width=”400″ height=”50″>
</object>
Tips:
- Use <embed> for external multimedia like videos, images, or audio.
- The <object> tag can also be used for embedding multimedia, and it’s more versatile.
Advanced HTML5 Features
1. async Attribute in a <script> Tag
The async attribute is used in a <script> tag to load the script asynchronously with the rest of the page. This means the script will be executed as soon as it’s downloaded, without blocking HTML parsing.
Example:
<script async src=”script.js”></script>
Tips:
- Use async for scripts that don’t depend on other scripts.
- It helps improve the loading performance of web pages.
2. Purpose of the <output> Element
The <output> element is used to represent the result of a calculation or user action.
Example:
<form oninput=”result.value=parseInt(a.value)+parseInt(b.value)”>
<input type=”range” id=”a” value=”50″>+
<input type=”number” id=”b” value=”50″>
<output name=”result” for=”a b”>100</output>
</form>
3. Purpose of the <article> Element
The <article> element represents a self-contained composition in a document, page, or site, which is intended to be independently distributable or reusable.
Example:
<article>
<h2>Article Heading</h2>
<p>Article content…</p>
</article>
Tips:
- Use it for blog posts, news articles, user comments, or other items of independent content.
4. Required Attribute for Input Fields
The required attribute is used to specify that an input field must be filled out before submitting the form.
Example:
<input type=”text” name=”name” required>
5. ContentEditable Attribute
The contenteditable attribute specifies whether the content of an element is editable or not.
Example:
<div contenteditable=”true”>You can edit this text.</div>
6. Purpose of the <figure> Element
The <figure> element represents self-contained content, often with an optional caption, which is specified using <figcaption>.
Example:
<figure>
<img src=”image.jpg” alt=”Image description”>
<figcaption>Caption for the image.</figcaption>
</figure>
7. defer Attribute in a <script> Tag
The defer attribute delays the execution of a script until after the document has been parsed.
Example:
<script defer src=”script.js”></script>
Tips:
- Use defer for scripts that need the DOM to be fully parsed.
8. kind Attribute of the <track> Element
The kind attribute in the <track> element specifies the kind of text track (subtitles, captions, descriptions, chapters, or metadata).
Example:
<video controls>
<source src=”movie.mp4″ type=”video/mp4″>
<track src=”subtitles_en.vtt” kind=”subtitles” srclang=”en” label=”English”>
</video>
9. cols Attribute of the <textarea> Element
The cols attribute specifies the visible width of a text control (in average character widths).
Example:
<textarea name=”message” rows=”10″ cols=”30″></textarea>
10. Role of the alt Attribute for Images
The alt attribute provides alternative text for an image if it cannot be displayed.
Example:
<img src=”image.jpg” alt=”Descriptive text about the image”>
Tips:
- Always use the alt attribute to improve accessibility.
11. download Attribute in the <a> Tag
The download attribute in the <a> tag suggests that the link is to be downloaded rather than navigated to.
Example:
<a href=”path/to/file” download>Download File</a>
12. Purpose of the <figcaption> Element
The <figcaption> element represents a caption or legend for the rest of the contents of its parent <figure> element.
Example:
<figure>
<img src=”image.jpg” alt=”…”>
<figcaption>Caption goes here.</figcaption>
</figure>
13. Default Value of the type Attribute for a <button> Element
The default value of the type attribute for a <button> element is submit.
Example:
<button type=”button”>Click Me!</button> <!– Not a submit button –>
14. Element for Displaying the Result of a Calculation
The <output> element is used for displaying the result of a calculation.
Example:
<output name=”result”></output>
15. Specifying Character Encoding with charset Attribute
The charset attribute in a <meta> tag specifies the character encoding for the HTML document.
Example:
<meta charset=”UTF-8″>
16. Caption for a Figure Element
The <figcaption> element is used to define a caption for a <figure> element.
Example:
<figure>
<img src=”image.jpg” alt=”…”>
<figcaption>This is a caption.</figcaption>
</figure>
17. Indicating a New Article Element
The <article> element is used to indicate a new article element.
Example:
<article>
<h2>New Article</h2>
<p>Content of the new article…</p>
</article>
18. Specifying Metadata with <meta> Element
The <meta> element is used to specify metadata about the HTML document that is not represented by other HTML elements.
Example:
<meta name=”description” content=”Description of the page”>
19. Control for Generating a Public-Private Key Pair
The <keygen> element (deprecated and should be avoided) was used to represent a control for generating a public-private key pair.
Example:
<keygen name=”key” challenge=”challenge string”>
Note: It’s recommended to use more modern and secure methods for key generation.
20. href Attribute in the <a> Tag
The href attribute in the <a> tag specifies the URL of the page the link goes to.
Example:
<a href=”https://www.example.com”>Visit Example.com</a>
21. Marking Up a Time-Stamp
The <time> element is best suited for marking up a time-stamp in HTML5.
Example:
<time datetime=”2020-01-01″>January 1, 2020</time>
22. Purpose of the autofocus Attribute
The autofocus attribute is used in HTML5 to specify that an element should automatically get focus when the page loads.
Example:
<input type=”text” autofocus>
23. Specifying an Ordered List
The <ol> tag is used to specify an ordered list in HTML5.
Example:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
24. Defining Emphasized Text
The <em> element is used in HTML5 to define emphasized text.
Example:
<p>This is <em>emphasized</em> text.</p>
25. disabled Attribute in HTML5
The disabled attribute is used to specify that an input element should be disabled.
Example:
<input type=”text” disabled>
26. Representing a Scalar Value within a Range
The <input type=”range”> element is used to represent a scalar value within a known range, such as a volume control.
Example:
<input type=”range” min=”1″ max=”10″>
27. multiple Attribute in an <input> Element
The multiple attribute in an <input> element allows the user to select or enter more than one value.
Example:
<input type=”file” multiple>