1. What are HTML tags?
HTML tags are special keywords enclosed in angle brackets (< >) that tell a web browser how
to structure and display content on a webpage.
<h1>Hello!</h1> <!-- This makes a big **heading** -->
<p>A **paragraph** goes here.</p>
2. What’s the difference between HTML and HTML5?
HTML is the general name for HyperText Markup Language, and HTML5 is the latest
launched version in 2014. HTML5 added awesome features like:
Aspect HTML HTML5
Doctype Long & complex Simple: <!DOCTYPE html>
Multimedia Needs plugins (Flash) <audio>, <video>
Graphics No native support <canvas>, <svg>
Forms Basic inputs New inputs: email, date, etc.
Semantic Tags Uses <div> mostly <header>, <footer>, <article>
APIs None Geolocation, Web Storage, etc
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
3. What’s the basic structure of an HTML document?
Every HTML document needs a specific setup so browsers know how to read it. It’s like the
blueprint for your web page. Here’s what goes in it:
<!DOCTYPE html>: Tells the browser this is an HTML5 page.
<html>: The main container for everything else.
<head>: Holds behind-the-scenes info like the page title or links to CSS and JavaScript.
<body>: Where all the visible stuff goes, like text, images, or links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Cool **Website**</title>
</head>
<body>
<h1>Hey There!</h1>
<p>Welcome to my **page**.</p>
</body>
</html>
4. What’s the difference between a tag and an element?
A tag is just the code you write, like <p> or </p>, inside angle brackets. An element is the
whole package: the opening tag, the content inside, and the closing tag. Some tags,
like <img>, are self-closing and don’t need a closing partner. So, tags are the tools, and
elements are what you build with them.
Tag: <div> or </div>—just the code.
Element: <div>Hi there!</div>—the tag plus content.
Example:
<p>This is an **element**.</p> <!-- <p> and </p> are **tags** -->
5. What are attributes in HTML?
Attributes are extra details you add to an opening tag to give it more powers. They look
like name="value". For example, they can tell a link where to go or an image what picture to
show. Common ones are href for links, src for images, and id to give something a unique
name.
<a href="[Link] this **link**</a> <!-- **href** is an **attribute** -->
<img src="[Link]" alt="A cool photo"> <!-- **src** and **alt** are **attributes** -->
6. What is the difference between <section>, <article>, and <div>?
<div> <section> <article>
Generic container, Self-contained content
no semantic Groups related content thematically. that stands
meaning. independently.
Suitable for blog posts,
Used for grouping Usually includes a heading (<h1>–
news articles,
elements. <h6>).
comments.
Mainly for styling Helps structure content logically on the Can be reused or
or layout purposes. page. syndicated.
<div> <section> <article>
Example: <article><h2
Example: <div
Example: <section><h2>Services</ >Blog
class="card"><p>St
h2><p>Web development and Post</h2><p>This is a
yled content
design</p></section> blog
box</p></div>
article</p></article>
7. How do you create hyperlinks? What are absolute vs relative URLs?
A hyperlink is created using the <a> (anchor) tag and an hrefattribute that says where
the link goes. The text inside the tag is what people click on to visit
another page or resource.
Example:
<a href="[Link] to Example</a>
This makes a clickable link that says “Go to Example” and takes you to that website.
Absolute URL: An absolute URL specifies the full path to the resource, including the
protocol (http, https, etc.), domain, and file path. It works independently of the current page
location. For example:
<a href="[Link] Us</a>
No matter where the current page is hosted, this link always points to the full domain
Relative URL: A relative URL specifies the path to the resource relative to the current page’s
[Link] is used when linking to resources within the same website/project.
<a href="/[Link]">About Us</a>
If the current website is hosted at [Link] this link points
to [Link]
8. What’s the <img>tag for?
The <img>tag puts pictures on your web page. It’s a self-closing tag, so it doesn’t need a
closing part. You need two main attributes:
src: Tells the browser where to find the image file.
alt: Gives a description of the image for accessibility (like for people using screen
readers) or if the image doesn’t load.
The alttext also helps Google understand your image, which is great for SEO.
Example:
<img src="[Link]" alt="A beautiful **mountain** scene">
9. What’s the difference between block-level and inline elements?
Block-level and inline elements act differently on a web page:
Block-level elements: Take up the whole width of their space, start on a new line, and
stack like boxes (e.g., <div>, <p>, <h1>). They’re great for big sections
like paragraphs or headers.
Inline elements: Only use the space their content needs, stay on the same line, and flow
with text (e.g., <span>, <a>, <img>). They’re perfect for small bits
like links or images within a sentence.
<div>This **block** starts a new line.</div>
<div>Another **block**.</div>
<span>This **inline** stays here</span> <span>and so does this.</span>
10. What kinds of lists can you make in HTML?
HTML lets you create three types of lists:
1. Ordered List (<ol>): Shows items with numbers or letters (like 1, 2, 3).
2. Unordered List (<ul>): Uses bullets for items.
3. Description List (<dl>): Pairs terms (<dt>) with their descriptions (<dd>).
For ordered and unordered lists, each item goes in an <li> (list item) tag.
Examples:
<ol>
<li>First **item**</li>
<li>Second **item**</li>
</ol>
<ul>
<li>**Bullet** point</li>
<li>Another **point**</li>
</ul>
<dl>
<dt>**HTML**</dt>
<dd>**HyperText Markup Language**</dd>
</dl>
11. What is the <form> tag and what do action and method do?
The <form> tag in HTML is used to create a form that collects user input and sends it to a
server for processing. It acts as a container for input elements like text boxes, checkboxes,
radio buttons, and buttons.
action attribute: Defines where the form data should be sent once the user submits it.
Example: action="/[Link]" will send the form data to the [Link] file on the
server.
method attribute: Defines how the form data will be sent to the server.
GET: Appends the form data into the URL (visible in the address bar, suitable for non-
sensitive data, like search queries).
POST: Sends data in the request body (not visible in the URL, better for sensitive or large
data like passwords and file uploads).
<form action="/submit" method="post">
<label for="name">**Name**:</label>
<input type="text" id="name" name="name">
<input type="submit" value="**Send**">
</form>
This form asks for a name and sends it to /submit.
12. What does the <br> tag do and when should you avoid it?
The <br>tag adds a line break, moving content to the next line without starting a
new paragraph. It’s self-closing and handy for things like addresses or poems where you
want a quick line shift without extra space. It should not be used for layout or spacing.
Instead, use semantic HTML and CSS for better readability and maintainability.
Example:
123 **Main St**<br>**New York**, NY
13. How do you make a link open in a new tab safely?
To make a hyperlink open in a new tab, add target="_blank" to the <a>tag. This keeps
the current page open while the new page loads in a separate tab.
Adding rel="noopener" is a good idea for security, so the new tab can’t mess with your
original page.
Example:
<a href="[Link] target="_blank" rel="noopener">Open in a **New
Tab**</a>
Using target="_blank" alone exposes a security risk: the new page can access
the [Link] property and potentially manipulate the original page (phishing or
malicious redirects).
We add rel="noopener" to prevent the new page from accessing [Link]
14. What does the <title> tag do and why is it important for SEO?
The <title>tag goes in the <head> section and sets the name of your web page, which shows
up in the browser’s tab or title bar. It’s super important for SEO because search
engines use it to figure out what your page is about, and a clear, keyword-optimized title
helps improve rankings and click-through rates.
Example:
<head> <title>My Awesome **Website**</title></head>
16. What’s the <meta>tag?
The <meta>tag lives in the <head> and gives extra info about your web page, like
what character set it uses, a description for search engines, or settings for mobile screens.
It’s not visible to users but helps browsers and Google understand your page better.
Examples:
<meta charset="UTF-8"> <!-- Sets the **character encoding** --><meta name="description"
content="A cool **webpage**"> <!-- Helps with **SEO** --><meta name="viewport"
content="width=device-width, initial-scale=1.0"> <!-- Makes it **mobile-friendly** -->
Charset (<meta charset="UTF-8">): Defines the character encoding of the web page.
UTF-8 is the most widely used because it supports almost all characters and symbols
across different languages.
Viewport: It helps control how a page is displayed on mobile and tablet devices. Ensures
the website is responsive by setting the width of the page equal to the device’s screen
width.
Description: It provides a short summary of the web page’s content. This description
often appears in search engine results (SEO).
17. How do you make a table?
A table is built with the <table>tag. You use <tr> for rows, <th> for headers,
and <td> for data cells. Tables organize data in a grid, like for schedules or charts.
For accessibility, add <thead>, <tbody>, and <caption> to make it clear what the table is
about.
<table>
<caption>**Sales** Chart</caption>
<tr>
<th>**Item**</th>
<th>**Price**</th>
</tr>
<tr>
<td>**Book**</td>
<td>$10</td>
</tr>
</table>
18. What is the semantic difference between <strong> and <b>?
The <b> tag makes text bold only for visual effect, without adding meaning. The <strong> tag
also makes text bold, but it shows importance—screen readers read it with emphasis, and
search engines treat it as more meaningful content.
Example:
<p><strong>**Warning**:</strong> Follow these steps carefully.</p>
19. How do you make an email link?
An email link uses the <a>tag with a mailto: in the hrefattribute. When clicked, it opens
the user’s email app with a new message to the email address you specify.
Example:
<a href="[Link] an **Email**</a>
20. What’s the <em>tag?
The <em>tag emphasizes text, usually making it italic. Unlike <i>, which is just for
style, <em> has meaning—it tells screen readers to stress the text, helping
with accessibility and adding a bit of tone to your content.
Example:
<p>I <em>**love**</em> to **code**!</p>
21. How do you make a checkbox?
A checkbox comes from <input type="checkbox">. It lets users pick multiple options, like
signing up for newsletters. The nameattribute groups checkboxes together, and id connects
to a <label> for accessibility. Add checked to have it pre-selected. Each checkbox should
have a unique id that connects to a <label> for accessibility.
Each checkbox: unique id, meaningful value.
Label: <label for="..."> or wrap the input.
Group: <fieldset> + <legend> describes the set.
Same name for the group (e.g., name="hobbies").
Example:
<input type="checkbox" id="news" name="news" checked><label for="news">Get the
**Newsletter**</label>
22. What is the <label> tag and how does for/id improve accessibility?
The <label>tag gives a description for a form input, making it easier for users to know
what to type. It connects to an input with the forattribute (matching the input’sid), so
clicking the label focuses the input. This is super helpful for accessibility.
Without a label: Users must carefully click the small input box. Screen readers may also
have trouble conveying what the field is for.
With a label: Clicking the text automatically selects or focuses the input. Screen readers
announce the label along with the input, improving accessibility for visually impaired
users.
How for and id work together
Each form control (like <input>) has a unique id.
The <label> uses the for attribute with the same value as that id.
This creates a direct link between the text and the input.
Example:
<label for="name">**Name**:</label><input type="text" id="name" name="name">
23. How do you make a dropdown list?
A dropdown list uses the <select>tag, with options inside <option>tags.
The nameattribute sends the chosen value, and value sets what goes to the server. Pair it
with a <label> for accessibility.
<label for="fruits">Pick a **fruit**:</label>
<select id="fruits" name="fruits">
<option value="apple">**Apple**</option>
<option value="banana">**Banana**</option>
</select>
24. What is the <blockquote> tag and when should you use cite?
The <blockquote>tag is for long quotes from somewhere else, often shown
with indentation. You can add a citeattribute to note the source URL, though it’s not
visible. It’s semantic, so search engines know it’s a quote, which helps with SEO.
The optional cite attribute specifies the source URL of the quote. This is helpful for
accessibility, documentation, and SEO, even though browsers don’t display it directly. Screen
readers and crawlers can still detect it.
Example:
<blockquote cite="[Link] A really **inspiring quote**.</blockquote>
Intermediate HTML Questions
These questions go beyond the basics, focusing on HTML5 features, semantics, forms, and
attributes that improve accessibility, SEO, and user experience.
25. What are semantic HTML elements?
Semantic HTML elements have names that clearly say what they do,
like <header>, <nav>, <article>, or <footer>. Unlike plain tags like <div>, they make
your code easier to read, help screen readers understand the page for accessibility, and
boost SEO by telling search engines what’s important.
<header>
<nav>
<ul>
<li><a href="#home">**Home**</a></li>
</ul>
</nav>
</header>
26. How do you add a video in HTML5?
With HTML5, you can use the <video>tag to add videos without needing extra software
like Flash. Add controls to get play/pause buttons, and use <source> to point to the video
file and its format. If the browser can’t play it, you can show fallback text.
<video controls>
<source src="movie.mp4" type="video/mp4">
Your **browser** doesn’t support **videos**.
</video>
27. Why is the alt attribute important in <img>?
The altattribute in <img> describes what the image is about. It’s a big deal because:
Accessibility: Screen readers read it to visually impaired users.
SEO: Search engines use it to index images.
Backup: It shows up if the image doesn’t load.
Example:
<img src="[Link]" alt="A cute **cat** on a couch">
28. What’s the <fieldset>tag?
The <fieldset>tag groups form elements that go together, making your form easier to follow.
A <legend>tag adds a title for the group. This is great for accessibility because screen
readers can explain the group to users.
<fieldset>
<legend>**Personal** Details</legend>
<label for="name">**Name**:</label>
<input type="text" id="name" name="name">
</fieldset>
29. What does <noscript> do and why is it still relevant?
The <noscript> tag in HTML provides fallback content for users whose browsers do not
support JavaScript or have it disabled. Anything inside <noscript> is displayed only when
scripts can’t run.
Accessibility & graceful degradation – Some users disable JavaScript for speed,
privacy, or security. <noscript> ensures they don’t miss critical content.
SEO impact – Search engine crawlers may not fully execute scripts; fallback text
in <noscript> can improve discoverability.
Security environments – In corporate firewalls or browsers with JS
blocked, <noscript> ensures forms, links, or instructions are still visible.
<script>
[Link]("**JavaScript** is on!");
</script>
<noscript>**JavaScript** is off. Turn it on for the full experience.</noscript>
30. How do you add a JavaScript file?
To add an external JavaScript file, use the <script>tag with a srcattribute pointing to the
file. Put it in the <head> (with defer or async) or at the end of <body> so the page loads
faster without waiting for the script.
Example:
<script src="[Link]"></script>
31. When should you use <strong>/<em> vs <b>/<i>? (semantics vs presentation)
You should use <strong> and <em> when you want to give text semantic meaning, since they
signal importance or emphasis to browsers, screen readers, and search engines—
<strong> usually renders bold and <em> italic, but also carry meaning for accessibility
While <b> and <i> are purely presentational tags that only change the text’s style without
adding importance—<b> makes text bold and <i> italic, useful for things like UI elements,
foreign words, or stylistic highlights.
Example:
<b>**Bold** for looks</b><strong>**Important** stuff</strong>
32. How do you make a multi-line text input?
The <textarea>tag lets users type longer text, like a comment. You set
its size with rows and colsattributes, and name sends the data when the form is submitted.
You can add default text inside the tags.
<label for="comment">**Comment**:</label>
<textarea id="comment" name="comment" rows="4" cols="50">Type something
here</textarea>
33. What’s the action attribute in a form?
The action attribute in a <form> tells the browser where to send the form
data when submitted, like to a server address. If you don’t include it, the data goes to the
same page you’re on.
<form action="/send-data" method="post">
<input type="text" name="username">
<input type="submit">
</form>
34. What’s the <base>tag?
The <base> tag goes in the <head> and sets a default starting point for all relative
URLs on your page. It’s like saying, “All my links start from this address.” Be careful, as it
affects every link on the page.
<head>
<base href="[Link]
</head>
<a href="[Link]">**Link**</a> <!-- Goes to [Link] -->
35. What is enctype in forms? When to use multipart/form-data?
The enctype attribute decides how form data is packaged when sent to the server, used
with method="post". Here are the main types:
application/x-www-form-urlencoded: The default, turns data into URL-
friendly format.
multipart/form-data: Needed for uploading files.
text/plain: Sends data as plain text (not common).
You should use enctype="multipart/form-data" when your form involves file
uploads (via <input type="file">). Unlike the default encoding, this type splits the data into
separate parts (one per field), allowing binary files (like images, PDFs, or videos) to be sent
correctly along with text fields.
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit">
</form>
36. How do you make a hidden input field?
A hidden input field (<input type="hidden">) stores data that gets sent with the form but
isn’t shown to users. It’s great for things like user IDs or session tokens that
the server needs.
Example:
<input type="hidden" name="userID" value="12345">
37. What’s the <address>tag?
The <address>tag holds contact info for the person or group behind a page or section, like
an email, website, or street address. It’s semantic, so search engines recognize it,
and browsers often style it in italics. It is used to display the author’s or owner’s contact
details of a document or article.
<address>
**Jane Doe**<br>
<a href="[Link]
456 **Park Ave**, **USA**
</address>
38. What’s the lang attribute in <html>?
The langattribute in the <html>tag tells browsers and search engines the main language of
your page (like en for English). It helps screen readers read the content correctly and
improves SEO for targeting the right audience.
<html lang="en">
<head>
<title>My **English** Page</title>
</head>
<body>
<p>Hello, **world**!</p>
</body>
</html>
39. What’s the contenteditable attribute?
The contenteditable attribute, when set to true, lets users edit text or content right in
the browser. It’s cool for things like live editing tools, but you’ll need JavaScript to save the
changes.
Example:
<div contenteditable="true">Click to **edit** this **text**.</div>
Advanced HTML Questions
These questions cover modern and specialized HTML features—like <canvas>, <dialog>,
Web Components, ARIA, and SEO-friendly practices
40. What’s the <canvas>element?
The <canvas>element is like a blank drawing board for creating graphics, animations, or
even games with JavaScript (using the Canvas API). You set its size with width and height.
It’s often used for charts or fun visuals, with fallback text for browsers that don’t support it.
<canvas id="myCanvas" width="200" height="100">
Your **browser** doesn’t support **canvas**.
</canvas>
<script>
const ctx = [Link]('myCanvas').getContext('2d');
[Link](0, 0, 100, 50); // Draws a **rectangle**
</script>
41. What is the <dialog> element and how do showModal() / close() work?
The <dialog> element in HTML provides a native, accessible way to create modal and non-
modal dialogs. Unlike custom popups built with <div> and JavaScript, <dialog> comes with
built-in focus management, keyboard accessibility, and an optional backdrop for modals.
Using showModal()
Displays the dialog as a modal with a backdrop.
Focus automatically moves inside the dialog.
<dialog id="myDialog">
<p>This is a modal dialog.</p>
<button id="closeBtn">Close</button>
</dialog>
<button id="openBtn">Open Dialog</button>
<script>
const dialog = [Link]("myDialog");
[Link]("openBtn").onclick = () => [Link]();
[Link]("closeBtn").onclick = () => [Link]();
</script>
Using close()
Closes the dialog and removes the modal backdrop.
Can return a value (string) to indicate why it was closed.
[Link]("user-cancelled");
42. How do you add SVG to HTML?
SVG (Scalable Vector Graphics) uses the <svg>tag to create graphics that look sharp at any
size. They’re perfect for icons, logos, or charts because they’re lightweight and don’t get
pixelated.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red"/>
</svg>
This draws a red circle.
43. What are data attributes?
Data attributes (data-*) let you store custom info in HTML elements that JavaScript can use.
They start with data- and a name you choose, and you grab them with the dataset property.
They’re handy for passing data to scripts without messing up the age.
Example:
<div data-user-id="12345" data-role="admin">**User**</div>
<script>
const div = [Link]('div');
[Link]([Link]); // 12345
[Link]([Link]); // **admin**
</script>
44. What’s the <template>tag?
The <template>tag holds HTML content that doesn’t show up right away but can be used
later with JavaScript. It’s like a stash for reusable code, perfect for components or dynamic
content that you’ll add when needed.
<template id="my-template">
<div>Hello, **world**!</div>
</template>
<script>
const template = [Link]('my-template').content;
[Link]([Link](true));
</script>
45. What’s the relattribute in <link>?
The relattribute in <link> explains how the linked resource relates to your page. Common
ones are stylesheet for CSS, icon for favicons, or alternate for things like RSS feeds. It
helps browsers know what the link is for.
Example:
<link rel="stylesheet" href="[Link]"><link rel="icon" href="[Link]">
46. How do you show different language versions of a webpage?
Use <link> with rel="alternate" and hreflang to point to versions of your page in
other languages. The hreflangattribute uses a language code (like fr for French) to
tell search engines which version to show users.
Example:
<link rel="alternate" href="[Link]" hreflang="fr"><link rel="alternate"
href="[Link]" hreflang="es">
47. What’s the <output>tag?
The <output>tag shows the result of something a user does or a calculation, usually in
a form. It links to inputs with the forattribute and updates with JavaScript or
the oninputevent, great for live updates like a calculator.
<form oninput="[Link]=parseInt([Link])+parseInt([Link])">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0"> =
<output name="result" for="a b">0</output>
</form>
48. What’s the <datalist>tag?
The <datalist>tag gives a list of suggestions for an <input>field, like
an autocomplete dropdown. Connect it with the listattribute in <input> matching
the <datalist>’s id. Users can type or pick from the list.
<label for="browser">Choose a **browser**:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>
49. What’s the difference between defer and async in <script>?
The defer and asyncattributes make JavaScript files load smarter to speed up your page:
defer: Grabs the script while the page loads but waits until the HTML is fully ready to
run it, keeping scripts in order.
async: Runs the script as soon as it’s downloaded, which might mix up the order and
cause issues if it needs the page to be ready.
Example:
<script defer src="[Link]"></script> <!-- Runs after **HTML** is ready -->
<script async src="[Link]"></script> <!-- Runs as soon as it’s **downloaded** -->
50. What are Web Components?
Web Components are a way to create custom HTML elements that you can reuse, with their
own styles and behavior hidden away. They use:
Custom Elements: Make your own tags (like <my-cool-tag>).
Shadow DOM: Keeps styles and code separate from the rest of the page.
HTML Templates: Store code in <template> for later use.
They’re awesome for building modular pieces that work without needing a big framework.
Example:
<custom-element>Cool **stuff**</custom-element>
<script>
class CustomElement extends HTMLElement {
constructor() {
super();
[Link]({ mode: 'open' });
[Link] = '<p>My **Custom** Component</p>';
}
}
[Link]('custom-element', CustomElement);
</script>
51. What’s ARIA, and how do you use it?
ARIA (Accessible Rich Internet Applications) adds attributes to make dynamic or
tricky web content easier for screen readers to understand. ARIA roles (like role="alert")
and properties (like aria-label) give extra clues, especially for JavaScript-heavy pages.
<button aria-label="Close **dialog**">X</button> <!-- Explains what the **button** does -->
<div role="alert">**Error**: Bad **input**</div> <!-- Marks it as an **urgent** message -->
52. How do you lazy-load images and control loading priority?
Lazy loading waits to load images until they’re almost visible on the screen, making
your page load faster. Just add loading="lazy" to <img> or <iframe>.
Modern browsers support this, and it’s great for pages with lots of images.
Example:
<img src="[Link]" alt="Nice **view**" loading="lazy">
loading="lazy" → Loads only when close to being visible.
loading="eager" → Loads immediately, regardless of whether it’s in view.
loading="auto" → Lets the browser decide.
The problem: browsers don’t always know which images matter most to you. That’s why
attributes like fetchpriority and <link rel="preload"> exist—to give hints about resource
importance.
fetchpriority: This is a developer hint to tell the browser how urgent an image is relative
to others. For example, a hero image at the top should not be delayed behind thumbnail
images far below the fold.
<link rel="preload">: This is a stronger instruction—it asks the browser to start fetching
the resource as soon as possible, even before it’s needed in rendering. It’s often used
for critical images, fonts, or scripts.
53. What’s microdata, and how does it help SEO?
Microdata adds structured data to your HTML with attributes like itemscope, itemtype,
and itemprop, using standards like [Link]. It helps search engines understand
your content (like a product’s price or a person’s name), which can make your search
results pop with rich snippets.
<div itemscope itemtype="[Link]
<span itemprop="name">**John Doe**</span>
<span itemprop="jobTitle">**Developer**</span>
</div>
54. How do you make HTML better for SEO?
To make your HTML shine for SEO, so search engines love your page, try these:
Use semantic elements like <header> or <article> to organize content clearly.
Add <meta>tags like description to summarize your page.
Put alttext on images so Google can index them.
Use hreflang for multilingual sites to reach the right users.
Speed up loading with defer or async for scripts.
Example:
<head>
<meta name="description" content="Learn **web development** tips">
<title>**Web** Guide</title>
</head>
55. What’s the <picture>element?
The <picture>element lets you offer different images for responsive
design or formats like WebP. It uses <source>tags with rules (like screen size) and a
<picture>
<source media="(min-width: 800px)" srcset="[Link]">
<source srcset="[Link]" type="image/webp">
<img src="[Link]" alt="Cool **image**">
</picture>
56. How do you create an iframe?
An iframe (<iframe>) embeds another webpage or content inside your page.
Use attributes like src, width, and height to control it. It’s great for things
like maps, videos, or forms from other sites.
Example:
<iframe src="[Link] width="600" height="400" title="**Embedded**
Page"></iframe>
57. What’s the tabindex attribute?
The tabindex attribute controls how elements get focused when users navigate with a
keyboard. Here’s how it works:
0: Lets the element be focused in the normal order.
Positive numbers (like 1): Sets a custom focus order (use sparingly).
-1: Makes it focusable with code but skips it when tabbing.
Example:
<div tabindex="0">**Focusable** div</div><button tabindex="1">First
**button**</button>
58. How do you validate an HTML form?
HTML5 has built-in validation for forms using attributes like required, type, pattern,
or min/max. These check user input before the form is sent, saving server work. You can
also use JavaScript for fancier checks.
<form>
<label for="email">**Email**:</label>
<input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.
[a-z]{2,}$">
<input type="submit">
</form>
This checks for a valid email and makes it required.
59. What are the <figure> and <figcaption>tags?
The <figure>tag groups content like images or charts, and <figcaption> adds a caption to
explain it. They’re semantic, so they help accessibility (for screen readers) and SEO by
linking the caption to the content.
<figure>
<img src="[Link]" alt="**Sales** chart">
<figcaption>**Sales** data for 2024</figcaption>
</figure>
60. What are HTML Global Attributes? Give examples.
Global attributes are special attributes that can be used on any HTML element, not just
specific tags. They give elements extra functionality or metadata without changing the tag
itself.
Common Global Attributes:
1. id – Assigns a unique identifier to an element.
<p id="intro">Welcome to my page</p>
2. class – Assigns one or more classes for CSS styling or JavaScript.
<div class="card highlight">Content here</div>
3. title – Provides extra information shown as a tooltip on hover.
<abbr title="HyperText Markup Language">HTML</abbr>
4. hidden – Hides the element from display.
<p hidden>This text is hidden</p>
5. tabindex – Controls the order of keyboard focus on elements.
<button tabindex="1">Click Me</button>
6. contenteditable – Makes an element editable by the user in the browser.
<div contenteditable="true">Edit this text</div>
7. data- (custom data attributes) – Stores custom data that JavaScript can access.
<div data-user-id="123" data-role="admin">User Info</div>
Key Point: Global attributes can be applied to almost any HTML tag, making them
extremely versatile for styling, scripting, and accessibility.