HTML Question and Answer

HTML stands for HyperText Markup Language. It is used to create and structure sections, paragraphs, and links on web pages.

The <head> tag contains metadata about the HTML document, including the title, character set, styles, links to external files, and more.

<div> is a block-level element used to group larger sections, while <span> is an inline element used to style small parts of text or inline elements.

By using the tag with the href attribute. Example: <a href="https://www.onlinetpoint.com">Visit Example</a>

The alt attribute provides alternative text if the image fails to load and is important for accessibility and SEO.

<ul> defines an unordered (bulleted) list.
<ol> defines an ordered (numbered) list.
<li> defines a list item in both.

Semantic elements clearly describe their meaning in a human- and machine-readable way. Examples: <header>, <footer>, <article>, and <section>.

<!DOCTYPE html> tells the browser which version of HTML is being used, ensuring proper rendering.

Using the <br> tag.

id is a unique identifier and is used only once in a page.
class can be used multiple times for similar elements and is mainly used for styling.

Use the <img> tag with the src attribute for the image path and alt for alternative text.
Example: <img src="image.jpg" alt="Description">

Inline elements do not start on a new line and only take up as much width as necessary (e.g., <span>, <a>).
Block-level elements start on a new line and take up the full width (e.g., <div>, <p>).

Use the <table> tag with nested <tr> (table row), <th> (table header), and <td> (table data) tags.
Example:
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>25</td></tr>
</table>

The <meta> tag provides metadata like charset, viewport, description, and keywords, which are used by browsers and search engines.

HTML comments are written as:
<!-- This is a comment -->

The <form> element is used to collect user input. It can include form controls like <input>, <textarea>, <button>, <select>, etc.

action defines the URL where form data will be sent.
method defines how the data will be sent: GET (visible in URL) or POST (hidden in the body).

Using the <select> tag with nested <option> tags.
Example:
<select>
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>

<strong> gives importance and semantic emphasis to text.
<b> only makes the text bold without any semantic meaning.

The <input> tag is used to create input fields. It can have types like text, password, checkbox, radio, submit, etc.

<em> is used to emphasize text semantically (e.g., screen readers give it stress).
<i> is used for italic styling without semantic emphasis.

It opens the linked page in a new browser tab or window.
Example: <a href="https://example.com" target="_blank">Visit</a>

Void elements are HTML tags that do not have closing tags.
Examples: <img>, <br>, <hr>, <input>, <meta>

<fieldset> groups related form elements together.
<legend> provides a caption/title for the fieldset group.

<input type="checkbox" id="subscribe" name="subscribe"> <label for="subscribe">Subscribe to newsletter</label>

It provides a hint to the user about what to enter in the field.
Example: <input type="text" placeholder="Enter your name">

Use the same name attribute for radio buttons to make them mutually exclusive.
Use the same name[] format for checkboxes to send multiple values.

Data attributes allow embedding custom data in elements. They start with data-. Example: <div data-user-id="123">Hello</div>

<progress> shows a task’s progress (e.g., file upload).
<meter> shows a scalar measurement (e.g., battery level).

Add the contenteditable="true" attribute to the element. Example: <div contenteditable="true">Edit me</div>

The <canvas> element is used to draw graphics on a web page using JavaScript—for animations, charts, games, etc.

<article> is used for self-contained content (like a blog post).
<section> is used to define thematic groups within content (like chapters or grouped content).

It makes the video start playing automatically as soon as it's ready. Example: <video src="file.mp4" autoplay></video>

Use the <audio> tag with the src attribute or nested <source> tags. Example: <audio controls> <source src="sound.mp3" type="audio/mpeg"> </audio>

ARIA (Accessible Rich Internet Applications) is a set of attributes that improve accessibility for users with disabilities, especially screen readers.

Both link a label to an input, but using for="id" allows label and input to be separate. Nesting them is useful for inline layouts.

It makes the field mandatory. The form won’t submit unless the field is filled.

It defines a regular expression the input must match for the form to be submitted.
Example: <input type="text" pattern="[A-Za-z]{3,}">

<input type="number" min="1" max="10">

The <nav> tag defines navigation links in a website like menus, sidebars, or footer links.

<details> creates a collapsible section.
<summary> defines the visible heading that can be clicked to expand/collapse the details.
Example:

<details>
<summary>Click to learn more</summary>
<p>This is hidden text revealed on click.</p>
</details>

GET appends form data to the URL (visible, less secure, used for fetching).
POST sends data in the body of the request (not visible, more secure, used for submitting).

It specifies how form data should be encoded when submitting it to the server.
Example: multipart/form-data is used for file uploads.

Use the readonly attribute.
Example: <input type="text" value="Hello" readonly>

Use the disabled attribute.
Example: <input type="text" disabled>

Custom data attributes store extra information on HTML elements.
Syntax: data-*
Example: <div data-product-id="12345"></div>

It highlights or marks text, usually for reference or search results.
Example: <p>Search for <mark>keyword</mark></p>

It defines the tab order for keyboard navigation.
0 includes in order,
-1 makes it focusable but not tabbable,
1+ sets custom tab order.

Use mailto: in the href.
Example: <a href="mailto:info@example.com">Email Us</a>

Use <input type="file">
Example:
<form>
<input type="file" name="resume">
</form>

The default form method is GET.

Yes. Each section or article can have its own <header> and <footer> in addition to the global ones.

By using the <link> tag inside the <head>: <link rel="stylesheet" href="styles.css">

Relative URL points to a file within the same site (e.g., about.html).
Absolute URL includes the full path with domain (e.g., https://example.com/about.html).

Visually impaired users using screen readers may miss the context, and it may also impact SEO negatively.

It sets the base URL for all relative links on the page. Example: <base href="https://example.com/">

Yes, by triggering submission via JavaScript using form.submit() or pressing Enter in a text field.

value is the pre-filled content that will be submitted.
placeholder is a hint text that disappears once the user types something.

It loads the JavaScript file without blocking the HTML parsing and executes it after the document is fully parsed.

It provides alternative content for users whose browsers don’t support or have disabled JavaScript.

Yes, HTML tags can be nested but must be properly closed in reverse order. Example: <p>This is <strong>important <em>and styled</em></strong>.</p>

It specifies the character encoding for the HTML document, ensuring proper rendering of characters including symbols and international text.

Using the <textarea> tag. Example: <textarea rows="5" cols="30"></textarea>

<select>
<option disabled selected>Select an option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>

It stores data in the form that users can’t see or modify, useful for session IDs or tokens.

Use the same name attribute for all radio buttons.
Example:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

required

min, max, maxlength, minlength

pattern

type="email", type="url"

These attributes trigger built-in browser validation.

<input type="file" name="files[]" multiple>

It embeds another HTML page inside the current one. Example: <iframe src="https://example.com" width="600" height="400"></iframe>

<div>, <p> are block elements

<span>, <a>, <strong> are inline elements

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.