 |
VOOZH | about |
|
VOOZH | about |
HTML (HyperText Markup Language) is the standard language used to structure content on the web. It tells the browser how to display text, images, and other elements on a webpage.
Here are some beginner-friendly HTML questions to help you get started.
HTML tags are special keywords enclosed in angle brackets (< >) that tell a web browser how to structure and display content on a webpage.
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 |
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.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.
<p>This is an **element**.</p> <!-- <p> and </p> are **tags** -->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.
<div> is a generic container for styling or layout, <section> groups thematically related content, and <article> represents self-contained, independent content like blog posts or news items.
<div> | <section> | <article> |
|---|---|---|
| Generic container, no semantic meaning. | Groups related content thematically. | Self-contained content that stands independently. |
| Used for grouping elements. | Usually includes a heading (<h1>–<h6>). | Suitable for blog posts, news articles, comments. |
| Mainly for styling or layout purposes. | Helps structure content logically on the page. | Can be reused or syndicated. |
Example: <div class="card"><p>Styled content box</p></div> | Example: <section><h2>Services</h2><p>Web development and design</p></section> | Example: <article><h2>Blog Post</h2><p>This is a blog article</p></article> |
A hyperlink is created using the <a> (anchor) tag and an href attribute that says where the link goes. The text inside the tag is what people click on to visit another page or resource.
<a href="https://example.com/">Go 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.
<a href="https://www.example.com/about.html">About Us</a>Relative URL: A relative URL specifies the path to the resource relative to the current page’s location. It is used when linking to resources within the same website/project.
<a href="/about.html">About Us</a>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 alt text also helps Google understand your image, which is great for SEO.
<img src="mountain.jpg" alt="A beautiful **mountain** scene">Block-level and inline elements act differently on a web page:
HTML lets you create three types of lists:
For ordered and unordered lists, each item goes in an <li> (list item) tag.
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.
method attribute: Defines how the form data will be sent to the server.
This form asks for a name and sends it to /submit.
The <br> tag adds a line break, moving content to the next line without starting a new paragraph.
123 **Main St**<br>**New York**, NYTo 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.
<a href="https://example.com/" target="_blank" rel="noopener">Open in a **New Tab**</a>The <title> tag sets the name of your web page that appears in the browser tab and helps people and search engines know what your page is about.
<head> <title>My Awesome **Website**</title></head>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.
<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** -->
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.
An email link uses the <a> tag with a mailto: in the href attribute. When clicked, it opens the user’s email app with a new message to the email address you specify.
<a href="mailto:hello@example.com">Send an **Email**</a>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.
<p>I <em>**love**</em> to **code**!</p>A checkbox uses <input type="checkbox"> to let users select multiple options. Use a unique id for each checkbox and connect it to a <label> for accessibility. Use the same name to group them and checked to pre-select.
<input type="checkbox" id="news" name="news" checked><label for="news">Get the **Newsletter**</label>The <label> tag provides a text description for a form input. Using for (on <label>) and id (on the input) links them so clicking the label focuses the input, and screen readers announce them together—greatly improving accessibility.
How for and id work together:
They create a direct connection between a label and its input, improving usability and accessibility.
<label for="name">**Name**:</label><input type="text" id="name" name="name">A dropdown list uses the <select> tag, with options inside <option> tags. The name attribute sends the chosen value, and value sets what goes to the server. Pair it with a <label> for accessibility.
The <blockquote> tag is for long quotes from somewhere else, often shown with indentation. You can add a cite attribute 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.
<blockquote cite="https://example.com/"> A really **inspiring quote**.</blockquote>HTML provides the structure and content of a webpage, while CSS controls its design and visual layout.
HTML | CSS |
|---|---|
Defines the structure and content of a webpage | Styles and formats the appearance of the webpage |
Uses tags to add elements like text, images, and links | Uses selectors and properties to control colors, fonts, spacing, etc. |
Forms the backbone of any webpage | Enhances visual appeal and layout |
Determines what appears on the page | Determines how it appears |
These questions go beyond the basics, focusing on HTML5 features, semantics, forms, and attributes that improve accessibility, SEO, and user experience.
Semantic HTML elements clearly describe their purpose (e.g., <header>, <nav>, <article>, <footer>), making code readable, improving accessibility, and helping SEO.
HTML5 <video> tag lets you embed videos without extra software. Use controls for play/pause buttons, <source> for the video file, and fallback text if unsupported.
The alt attribute in <img> describes what the image is about. It’s a big deal because:
<img src="cat.jpg" alt="A cute **cat** on a couch"><fieldset> groups related form elements, and <legend> adds a title for the group, improving form clarity and accessibility.
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.
To add an external JavaScript file, use the <script> tag with a src attribute 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.
<script src="mycode.js"></script>You can add CSS styling in three ways: inline, internal, or external, to style HTML elements and control their appearance.
<p style="color: blue; font-size: 16px;">Hello!</p><head>
<style>
p { color: blue; font-size: 16px; }
</style>
</head>
<head>
<link rel="stylesheet" href="styles.css">
</head>
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.
<b>**Bold** for looks</b><strong>**Important** stuff</strong>The <textarea> tag lets users type longer text, like a comment. You set its size with rows and cols attributes, and name sends the data when the form is submitted. You can add default text inside the tags.
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.
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.
The enctype attribute determines how form data is encoded when sent to the server, usually with method="post". Here are the main types:
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.
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.
<input type="hidden" name="userID" value="12345">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.
The lang attribute 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.
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.
<div contenteditable="true">Click to **edit** this **text**.</div>Both the tags (<div> and <span>) are used to represent the part of the web page. The <div> tag is used as the block component, and the <span> tag is used as an inline component.
<div>
A Computer Science Portal for Geeks
<span>
GeeksforGeeks
<span>
</div>
<div> tag<span> tag<ol>
<li>First **item**</li>
<li>Second **item**</li>
</ol>
<ul>
<li>**Bullet** point</li>
<li>Another **point**</li>
</ul>
<dl>
<dt>**HTML**</dt>2. Differences between <div> & <span> tag:
<dd>**HyperText Markup Language**</dd>
</dl>
<div> tag | <span> tag |
|---|---|
The <div> tag is a block level element. | The <span> tag is an inline element. |
It is best to attach it to a section of a web page. | It is best to attach CSS to a small section of a line on a web page. |
It accepts align attribute. | It does not accept aligned attributes. |
This tag should be used to wrap a section, for highlighting that section. | This tag should be used to wrap any specific word that you want to highlight on your webpage. |
Both the tags (<div> and <span>) are used to represent the part of the web page. The <div> tag is used as the block component, and the <span> tag is used as an inline component.
<div>
A Computer Science Portal for Geeks
<span>
GeeksforGeeks
<span>
</div>
<div> tag: The div tag is known as the Division tag. It is a block-level tag & is used in HTML to make divisions of content on the web page (text, images, header, footer, navigation bar, etc). Div tag has both openings (<div>) and closing (</div>) tags, and it is mandatory to close the tag.
<span> tag: The HTML span element is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes). A better way to use it is when no other semantic element is available.
id Attribute: The id attribute is a unique identifier that is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using the # symbol followed by id.
Syntax:
<element id="id_name">
In CSS Stylesheet:
#id_name {
// CSS Property
}
class Attribute: The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name can be represented by using the “.” symbol.
Syntax:
<element class="class_name>
In CSS Stylesheet:
.class {
// CSS Property
}
The only difference between them is that “id” is unique on a page and can only apply to at most one element, while the “class” selector can apply to multiple elements.
When the content of one completely different webpage is embedded into another webpage, it is called a nested webpage. The nested webpage can be created using the following 2 methods:
The <head> element is like a container for metadata i.e. data about data and it also lies between the <html> tag and the <body> tag. Metadata is the data about the HTML document and is not displayed on the webpage. It defines the document title, style, script, and other meta information.
The HTML <head> element is a container for the following elements:
The metadata means information about data. The <meta> tag in HTML provides information about HTML Document or in simple words, it provides important information about a document. These tags are basically used to add name/value pairs to describe properties of HTML documents, such as expiry date, author name, list of keywords, document author, etc. This tag is an empty element because it only has an opening tag and no closing tag, but it carries information within its attributes. A web document can include one or more meta tags depending on information, but in general, it doesn’t affect the physical appearance of the document.
Syntax:
<meta attribute-name="value">Page layout is the part of graphic design that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.
Page Layout Information:
Semantic Elements have meaningful names which tell about the type of content. For instance header, footer, table, … etc. HTML5 introduces many semantic elements as mentioned below which make the code easier to write and understand for the developer as well as instruct the browser on how to treat them.
HTML entities provides some method to display reserved characters. Reserved characters are those characters that are either reserved for HTML or those which are not present in the basic keyboard.
For Example: '<' is already reserved in HTML language. Sometimes this character needs to display on the web page which creates ambiguity in the code. Along with these are the characteristics which are normally not present in basic keyboard ( £, ¥, €, © ), etc. HTML provides some Entity names and Entity numbers to use these symbols. Entity number is easy to learn.
There are some characters in HTML that are reserved, & have special meaning when they are used in an HTML document. Like if you used less than or greater than sign in your HTML document then the browser will treat them differently. So we will use HTML entities to insert HTML symbols in a webpage.
Special Symbols | Syntax |
|---|---|
©:copyright | © |
®:registered trademark | ® |
™:trade mark | ™ |
@: at | @ |
¶: paragraph | ¶ |
§: section | § |
ℂ: double-struck capital c | 𝕔 |
℅: care of | ℅ |
A Uniform Resource Locator (URL) is simply the address of a website to access the website content like www.geeksforgeeks.org. But there are certain characters allowed to use in the URL like alphabets A-Z and a-z, numbers 0-9, and a few special characters. They can be used as it is but the rest of the characters that are not in this list are used after encoding them to a suitable form.
URL Encoding is the process of converting the URL into a valid format that is accepted by web browsers. URL Encoding takes place by replacing all the characters that are not allowed with a % sign followed by two hexadecimal digits. These two hexadecimal values represent the numerical values of the character in the ASCII character set. For example, a space is not acceptable in a URL and is replaced by ‘%20’ or a ‘+’ sign while encoding. Similarly, a $ sign is replaced by ‘%24’.
Reserved Characters: There are certain characters that sometimes have special meanings in the URL and they can be used in both ways. For example, the ‘/’ character is a reserved character and it has a special meaning when being used as a delimiter to separate the paths of a URL. Here it is used by encoding it to ‘%2F’. Else when it has no special purpose it can be used normally.
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a client and server. There are 2 HTTP request methods ie., GET & POST
The HTML “canvas” element is used to draw graphics via JavaScript.The “canvas” element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Example: The canvas would be a rectangular area on an HTML page. By default, a canvas has no border and no content. An id attribute has been specified to refer to it in a script, and a width and height attribute to define the size of the canvas. The style attribute is used to add a border.
Output:
SVG stands for Scalable Vector Graphics. It basically defines vector-based graphics in XML format. SVG graphics do NOT lose any quality if they are zoomed or resized. Every element and every attribute in SVG files can be animated.
Advantages of SVG: Advantages of using SVG over other image formats (like JPEG and GIF) are:
Multimedia files have formats and different extensions like .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Geo-location in HTML5 is used to share the location with some web site and aware of the exact location. It is mainly used for local businesses, restaurants, or to show locations on the map. It uses JavaScript to give the latitude and longitude to the backend server. Most of the browsers support Geolocation API. Geo-location API uses a global navigator object which can be created as follows:
var loc = navigator.geolocationDisplaying Location using HTML Geolocation: The following code is displaying the current location with the help of latitude and longitude via HTML Geolocation.
SessionStorage and LocalStorage are known as the web storage API. Data can be stored on the client-side by using these APIs.
SessionStorage:
HTML Form is a document that stores information of a user on a web server using interactive controls. An HTML form contains different kinds of information such as username, password, contact number, email id, etc.
The elements used in an HTML form are check box, input box, radio buttons, submit buttons, etc. Using these elements the information of a user is submitted on a web server. The form tag is used to create an HTML form.
Output:
These questions cover modern and specialized HTML features—like <canvas>, <dialog>, Web Components, ARIA, and SEO-friendly practices
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.
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()
Using close()
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.
This draws a red circle.
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.
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.
The rel attribute 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.
<link rel="stylesheet" href="styles.css"><link rel="icon" href="favicon.ico">Use <link> with rel="alternate" and hreflang to point to versions of your page in other languages. The hreflang attribute uses a language code (like fr for French) to tell search engines which version to show users.
<link rel="alternate" href="example.fr.html" hreflang="fr"><link rel="alternate" href="example.es.html" hreflang="es">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.
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.
The defer and async attributes make JavaScript files load smarter to speed up your page:
Web Components are a way to create custom HTML elements that you can reuse, with their own styles and behavior hidden away. They use:
They’re awesome for building modular pieces that work without needing a big framework.
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.
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.
<img src="photo.jpg" alt="Nice **view**" loading="lazy">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.
Microdata adds structured data to your HTML with attributes like itemscope, itemtype, and itemprop, using standards like Schema.org. 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.
To make your HTML shine for SEO, so search engines love your page, try these:
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 fallback <img> tag, so browsers pick the best image.
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.
<iframe src="https://example.com/" width="600" height="400" title="**Embedded** Page"></iframe>The tabindex attribute controls how elements get focused when users navigate with a keyboard. Here’s how it works:
<div tabindex="0">**Focusable** div</div><button tabindex="1">First **button**</button>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.
This checks for a valid email and makes it required.
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.
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.