Scribd
Upload
7 views17 pages

Understanding HTML Structure and Elements

Uploaded by

Mansi Patel
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views17 pages

Understanding HTML Structure and Elements

Uploaded by

Mansi Patel
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages.
It structures content on the web using elements and tags.

HTML (Hypertext Markup Language) is a standard markup language used to create the
structure and content of web pages.

Explain the structure of an HTML document.

DOCTYPE declaration

This statement declares the document type and is included at the beginning of every
HTML document.

<!DOCTYPE html> <!-- Declares the document type -->

<html> <!-- Root element -->

<head> <!-- Metadata and external resources -->

<title>Page Title</title>

</head>

<body> <!-- Visible content -->

<h1>Hello, World!</h1>

</body>

</html>

<html> root element

This element contains all other elements in the document.

<head> element

This element contains metadata, such as the page title, links to external files, and
other information.

<body> element

This element contains the main content of the document, such as text, images, links,
and other HTML elements.

What is the difference between <div> and <span>?

<div>: A block-level element used for layout and grouping content.

<span>: An inline element used for styling small parts of text or inline content.
What is the use of the <meta> tag?

The <meta> tag provides metadata about the HTML document, such as character set,
viewport settings, and SEO keywords.

Metadata is structured data that describes other data


Example: <meta name="viewport" content="width=device-width, initial-scale=1.0">

What are semantic HTML elements ?

Semantic tags provide meaningful information about the content inside them. They
help with readability and accessibility. Examples include:

<header>: Represents the header section of a webpage.

<article>: Denotes a self-contained piece of content.

<section>: Groups related content.

<footer>: Represents the footer of a webpage.

Non-semantic tags (like <div> and <span>) do not convey this meaning.

What is the purpose of the alt attribute in images?

The alt attribute provides alternative text for images, improving accessibility and SEO.

What are the differences between inline, block, and inline-block elements?

Inline: Does not start on a new line (e.g., <span>).

Block: Occupies the full width and starts on a new line (e.g., <div>).

Inline-block: Behaves like inline but respects width and height (e.g., <button>).

What is the difference between id and class attributes?

The main difference between the ID and class attributes in HTML is that an ID is
unique to a single element, while a class can be applied to multiple elements:

 id: Unique identifier for a single element.

 class: Reusable identifier for styling or scripting multiple elements.

Explain the <form> element and its attributes.

The <form> element is used to collect user input.


The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.

What are the elements and attributes?

HTML element holds the content. HTML attributes are used to describe the
characteristic of an HTML element in detail.

What is the difference between <script> and <noscript>?

<script>: Contains JavaScript code.

<noscript>: Renders content if JavaScript is disabled in the browser.

How do you make a website SEO-friendly with HTML?

Use semantic elements.

Add descriptive <title> and <meta> tags.

Use alt attributes for images.

What is the role of the <link> tag?

Used to link external resources, such as stylesheets and icons.


Example: <link rel="stylesheet" href="[Link]">

Can you explain the difference between relative, absolute, and root-relative paths in
URLs?

Relative: Relative to the current location ([Link]).

Absolute: Full path ([Link]

Root-relative: Starts from the root directory (/[Link]).

What is a marquee in HTML?

Marquee is used for scrolling text on a web page. It automatically scrolls the image or
text up, down, left, or right. You must use </marquee> tags to apply for a marquee.

Define the list types in HTML.

The list types in HTML are as follows:

Ordered list–The ordered list uses <ol> tag and displays elements in a numbered
format.
Unordered list–The unordered list uses <ul> tag and displays elements in a bulleted
format.

Definition list–The definition list uses <dl>, <dt>, <dd> tags and displays elements in
definition form like in a dictionary.

Differentiate between an Ordered list and an Unordered list.

An unordered list uses <ul> </ul> tags, and each element of the list is written
between <li> </li> tags. The list items are displayed as bullets rather than numbers.

An ordered list uses <ol> </ol> tags, and each element of the list is written between
<li> </li> tags. The list items are displayed as numbers rather than bullet points.

What is an element in HTML?

An element in HTML is a set of tags that define a specific part of a web page. It
consists of a start tag, content, and an end tag.

What is the difference between HTML and CSS?

HTML creates a web page's structure and content, while CSS defines its appearance
and layout.

Are the HTML tags and elements the same thing?

No, HTML tags define the structure of a web page, while HTML elements are made up
of a set of tags that define a specific part of a web page.

What are void elements in HTML?

Void elements in HTML are tags that do not require a closing tag. They are used to
insert images, line breaks, and other content that does not require additional
information.

What are HTML Entities?

HTML Entities are special characters used to represent characters that cannot be
typed on a keyboard. They are often used to display special symbols and foreign
characters.

How do you display a table in an HTML webpage?

The HTML <table> tag displays data in a tabular format. It is also used to manage the
layout of the page, for example, the header section, navigation bar, body content, and
footer section. Given below is the list of HTML tags used for displaying a table on an
HTML webpage:

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup It specifies a group of one or more columns in a table for


> formatting.

It is used with <colgroup> element to specify column properties for


<col>
each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

What is white space in HTML?

An empty sequence of space characters is called white space in HTML. It is considered


a single-space character.

White space helps the browser merge multiple spaces into one space, making
indentation easier. It also helps better organize the content and tags, making them
readable and easily understood.

What are HTML attributes?

HTML attributes provide additional information about an element. They are written
inside the opening tag. For example:

<a href="[Link] target="_blank">Click Here</a>


href: Specifies the link's URL.

target: Defines how the link should open.

What are empty elements in HTML?

Empty elements do not have closing tags and cannot contain content. Examples
include:

<br>: Line break.

<img>: Image tag.

<input>: Input field.

What is the difference between <link> and <style>?

<link>: Links an external CSS file to the document. Used in the <head> section.

<style>: Contains internal CSS directly in the HTML document.

What is the difference between <head> and <body>?

<head>: Contains metadata, styles, and links to external resources.

<body>: Contains visible content on the webpage.

What is the <title> tag used for?

Defines the title of the webpage displayed in the browser tab.

What is the <iframe> tag?

An iframe tag, or inline frame tag, is an HTML element that allows you to embed
another HTML document within an existing web page.

iFrame embeds another HTML document within a web page.

iFrame is used to display content like videos, maps, advertisements, and social media
feeds

What is the difference between <strong> and <b>?

<strong> adds importance semantically, while <b> only styles the text as bold.

What is the purpose of the action attribute in a form?


Action attribute specifies the URL where form data is sent.

What is the placeholder attribute?

Placeholder attribute displays a hint inside an input field.

What is the <canvas> element?

Used to draw graphics using JavaScript.

What is the <article> tag?

Article tag represents self-contained content, such as blog posts or news articles.

What is the <nav> tag?

Nav tag defines navigation links for the website.

How do you add captions to a video?

Using the <track> tag inside a <video> element.

What is the purpose of the <template> tag?

Declares HTML fragments that are not rendered until used via JavaScript.

What is lazy loading?

Lazy loading in HTML is a technique that delays the loading of resources, like images,
until they are needed.

How it works

Lazy loading waits to load resources until the user interacts with the page, such as
scrolling or navigating. For example, if a web page has an image at the bottom, the
browser will wait to load it until the user scrolls to that section.

How to implement

You can use the img loading attribute to lazy load images in HTML. The default value
is eager, which loads an image immediately. To lazy load an image, you can set the
value to lazy
What is the <blockquote> tag?

The <blockquote> tag in HTML is used to indicate a section of a document that is a


quotation from another source.

Purpose of the rel attribute in <link>.

The rel attribute in HTML specifies the relationship between a linked document and
the current document.

What is the difference between name and id attributes?

The main difference between the name and id attributes in HTML is that the name
attribute is used for submitting form elements to the server, while the id attribute is
used for uniquely identifying elements:

Name attribute

Used for submitting form elements to the server. Multiple elements can share the
same name, such as radio buttons within a set.

Id attribute

Used for uniquely identifying any element, not just form elements. The id attribute
must be unique throughout the entire document.

What are fieldsets in HTML?

The <fieldset> tag is used to group related elements in a form. The <fieldset> tag
draws a box around the related elements.

What is the <progress> tag?

The <progress> tag is an HTML element that displays a progress bar to show the
status of a task or process.

What is the purpose of the tabindex attribute?

The tabindex attribute in HTML allows to Make HTML elements focusable.

The tabindex attribute takes an integer (whole number) as a value.

What is a content delivery network (CDN)?

A content delivery network (CDN) is a network of interconnected servers that speeds


up webpage loading for data-heavy applications.

How can you reduce the size of an HTML file?


Remove unnecessary comments.

Minify the code.

Use external CSS and JavaScript files.

What is a favicon? How do you add it?

A favicon is a small icon displayed in the browser tab. Add it using:

<link rel="icon" href="[Link]">

difference between html and html5 ?

HTML5 is the latest version of HTML and supports new markup language
functionalities such as multimedia, new tags and elements as well as new APIs. HTML5
also supports audio and video.

What is the purpose of the <address> tag?

Address tag defines contact information for the author or owner of the document.

What is the difference between HTML and XHTML?

HTML is less strict about syntax.

XHTML follows stricter XML syntax rules, such as closing all tags and case sensitivity.

What is the purpose of the <br> tag?

Creates a line break in the content.

What is the difference between <em> and <i>?

Answer:

<em>: tag indicates that the enclosed text is emphasized and screen readers will often
pronounce it with a verbal stress.
<i>: Italicizes text without semantic meaning. I tag is used to mark text that is
intended to be in an alternate voice or mood, such as a foreign language word or a
scientific term.

What are data attributes in HTML?


Custom attributes prefixed with data-, used to store extra information. Example:

<div data-user-id="12345">John Doe</div>

What is the difference between <main> and <section>?

<main>: Represents the main content of the document.

<section>: Groups related content but is not limited to being the primary content.

What is the purpose of the <address> tag?

Answer:
Defines contact information for the author or owner of the document.

What is the difference between <q> and <blockquote>?

<q>: Inline quotation with optional citation.

<blockquote>: Block-level quotation.

What does the <label> tag do?

Associates a text label with an input element for accessibility:

<label for="email">Email:</label>

<input type="email" id="email" name="email">

What is the difference between GET and POST methods?

Answer:

GET: Appends data to the URL, suitable for retrieving data.

POST: Sends data in the request body, suitable for sensitive or large data.

Difference between HTML Tag & HTML Element:

HTML Tag HTML Element

Either opening or closing is used to mark Collection of a start tag, end tag, and
the start or end of an element. its attributes.
HTML Tag HTML Element

Used to hold the HTML element. Holds the content.

Whatever is written within an HTML


Starts with < and ends with >.
tag are HTML elements.

What is the ‘class’ attribute in HTML?

The class attribute is used to specify the class name for an HTML element. Multiple
elements in HTML can have the same class value. Also, it is mainly used to associate
the styles written in the stylesheet with the HTML elements.

Describe HTML layout structure.

Every web page has different components to display the intended content and a
specific UI. But still, there are few things which are templated and are globally
accepted way to structure the web page, such as:

<header>: Stores the starting information about the web page.

<footer>: Represents the last section of the page.

<nav>: The navigation menu of the HTML page.

<article>: It is a set of information.

<section>: It is used inside the article block to define the basic structure of a page.

<aside>: Sidebar content of the page

How to optimize website assets loading?

To optimize website load time we need to optimize its asset loading and for that:

CDN hosting - A CDN or content delivery network is geographically distributed servers


to help reduce latency.

File compression - This is a method that helps to reduce the size of an asset to reduce
the data transfer

File concatenation - This reduces the number of HTTP calls

Minify scripts - This reduces the overall file size of js and CSS files
Parallel downloads - Hosting assets in multiple subdomains can help to bypass the
download limit of 6 assets per domain of all modern browsers. This can be configured
but most general users never modify these settings.

Lazy Loading - Instead of loading all the assets at once, the non-critical assets can be
loaded on a need basis

How can we club two or more rows or columns into a single row or column in an HTML
table?

HTML provides two table attributes “rowspan” and “colspan” to make a cell span to
multiple rows and columns respectively

What is the difference between “display: none” and “visibility: hidden”, when used as
attributes to the HTML element.

When we use the attribute “visibility: hidden” for an HTML element then that element
will be hidden from the webpage but still takes up space. Whereas, if we use the
“display: none” attribute for an HTML element then the element will be hidden, and
also it won’t take up any space on the webpage

What do you mean by Tags in HTML?


Tags in HTML are the building blocks used to define and structure content on a webpage.
They are enclosed in angle brackets (< >) and usually come in pairs: an opening tag (e.g., <p>)
and a closing tag (e.g., </p>).
Tags tell the browser how to interpret and display the content within them.

What is the difference between the <link> and the <a> tag?
The <link> tag is used to define a link between the given URL and the HTML document, whereas
the <a> tag is used to add a hyperlink to the webpage.

How do you create an email link using a hyperlink in HTML?


To create an email link in HTML, use the <a> tag with the mailto: protocol in the href attribute.
Example:
<a href="[Link] an Email</a>

What exactly are applets?


Applets are small programs that can be embedded within web pages to accomplish specific tasks
such as computations, animations, and data processing. The Java programming language is used
to create applets.

What is the difference between inline, block, and inline-block elements?


Comparison of inline, block, and inline-block elements in HTML:
Property Inline Block Inline-Block

Elements take up the full Elements are displayed on the same


Display Elements are displayed on the same width of their container, line like inline elements but can
Behavior line as other inline elements. breaking onto a new have width and height like block
line. elements.

Width and Cannot set width or height (height Can set width and
Can set width and height.
Height is based on content). height.

<div>, <p>, <header>, <img>, <button>, <input> (with


Example <span>, <a>, <strong>
<footer> display:inline-block)

Always starts on a new Does not cause a line break, but


Does not cause a line break; stays
Line Break line, pushing subsequent respects width/height properties
within the flow of content.
content below. like block elements.

Used for elements that need to


Used for elements that are part of Used for larger structural
behave like inline elements but
Usage text or content flow (e.g., links, elements like sections,
need block-like properties (e.g.,
small pieces of text). divs, and headers.
buttons, form inputs).

Cannot have margin/padding on the


Can have margins and paddings on
left and right to affect layout; Can have margins and
Alignment all sides, and elements align inline
alignments are often controlled paddings on all sides.
like text.
with text-align.

Example Usage:
<!-- Inline element (no line break) -->
<span>This is an inline element</span> with more text.
<!-- Block element (new line starts) -->
<div>This is a block element</div>
<!-- Inline-block element (same line, but can have width/height) -->
<button style="display:inline-block; width: 100px; height: 50px;">Click Me</button>

What is the distinction between progress and a meter tag?


Feature <progress> <meter>
Represents progress of a task or Represents a scalar measurement or value
Purpose
operation. within a range.
Used for ongoing tasks (e.g., file Used for static values (e.g., temperature,
Value Context
download). score).
Typical Use File downloads, task completion,
Battery level, test scores, sensor readings.
Case loading states.
Typically ranges from 0 to 1 (0% to Typically has a defined min and max range
Range
100%). (e.g., 0-100).
Displays data but may be used in some
Interactive Usually doesn't accept user input.
interactive contexts.
How does the browser handle invalid or poorly written HTML? Explain
the concept of error tolerance in HTML parsers.
HTML browsers are designed with error tolerance to handle invalid or poorly written HTML. When
an HTML document contains errors or is not well-formed, the browser doesn't typically stop
rendering the page. Instead, it tries to "fix" the errors by making assumptions to display the
content as correctly as possible. This includes:
 Missing closing tags: The browser will infer where tags should close.
 Mismatched or incorrect attributes: Browsers may ignore or adjust them.
 Improper nesting of elements: Browsers will adjust the structure to display the page.
This error tolerance helps ensure that users still see content even if there are issues in the code,
but it can sometimes lead to unexpected behavior or layout problems.

What is the difference between the defer and async attributes in the
<script> tag?
The defer and async attributes in the <script> tag are both used to control the loading and
execution behavior of external JavaScript files, but they work differently.
Key Differences:
Attribute defer async

Scripts are executed as soon as they are


Execution Scripts are executed in order after the document
downloaded, without waiting for the
Timing has been fully parsed.
document to finish parsing.

Scripts are downloaded in parallel and


Script Scripts are downloaded in parallel but executed
executed as soon as they are ready, possibly
Loading after the HTML parsing completes.
interrupting HTML parsing.

Order of Scripts are executed in the order they appear in the Scripts can execute out of order, depending on
Execution document. which one finishes downloading first.

Ideal for scripts that depend on the DOM being fully Best for independent scripts that do not
Use Case loaded but need to be non-blocking (e.g., analytics, depend on DOM or other scripts, like tracking
UI enhancements). or ad scripts.

How do ARIA (Accessible Rich Internet Applications) roles work in


HTML?
ARIA (Accessible Rich Internet Applications) roles and attributes are used to enhance web
accessibility, especially for users with disabilities who rely on assistive technologies like screen
readers. ARIA attributes provide additional semantic information to elements, helping assistive
technologies interpret and interact with complex UI components such as dynamic content, widgets,
and controls.
How ARIA Roles Work:
 ARIA roles provide meaning to an element that may not have native semantic meaning in
HTML (e.g., a custom button).
 ARIA attributes give additional context, such as states or properties, to improve user
interaction and accessibility.
Common ARIA Roles:
1. role="button": Specifies that an element behaves like a button.
2. role="navigation": Denotes a navigation section.
3. role="alert": Specifies an important, dynamic message.
4. role="dialog": Indicates a dialog box or modal window.
5. role="main": Denotes the primary content of the document.

How do you include a JavaScript file in HTML?


To include a JavaScript file in an HTML document, use the <script> element with the src attribute
to specify the file's path. The script tag can be placed in either the <head> or <body> section,
depending on when you want the script to load.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Include JavaScript</title>
<!-- Include JavaScript in the head -->
<script src="[Link]" defer></script>
</head>
<body>
<h1>Hello, World!</h1>
<!-- Include JavaScript at the end of the body -->
<script src="[Link]"></script>
</body>
</html>

What is the difference between placing the <script> tag in the <head> and
the <body>?
The placement of the <script> tag in the <head> or <body> can affect the loading and execution
behavior of the script and the overall performance of the webpage.
Aspect In <head> In <body>

The script is loaded after the page


Loading Order The script is loaded before the page content.
content.

Can delay rendering as the browser stops to load Allows the page content to load before
Page Rendering
and execute the script. executing the script.

Suitable for small scripts or scripts that configure Ideal for scripts that interact with page
Use Case
the page (e.g., analytics). elements.

Performance May slow down page loading if not deferred or Improves initial page rendering and
Impact asynchronous. perceived speed.

Use the defer attribute to prevent blocking the page Place at the end of <body> for scripts
Best Practices
load. without defer.
➡What is the box model in CSS?
The CSS box model is a container that contains multiple properties including
borders, margin, padding, and the content itself. It is used to create the design
and layout of web pages.

Can we give width and height to the inline element ?

No, you cannot directly apply width and height to inline elements, because inline elements do not respect
those properties. By default, inline elements only take up as much width as their content requires and their
height is determined by the line height of the text.

Difference Between inline and inline-block

Feature inline inline-block


Default Elements sit inline with surrounding text and Behaves like an inline element but allows
Behavior other inline elements. block-level features like width and height.
Width and You can set width and height, and they
Cannot set width or height; they are ignored.
Height will be respected.
Horizontal padding/margin works, but vertical
Padding and Both horizontal and vertical
padding/margin may not affect layout as
Margin padding/margin are respected.
expected.
Content Content cannot wrap below; it will overflow
Content can wrap inside the element.
Wrapping horizontally.
Inline-block elements flow inline but
Inline elements flow within a line, do not break
Flow behave like a block element, allowing size
onto a new line.
control.
Examples <a>, <span>, <em>, <strong> Styled <span>, <img> with custom sizing.

How we implement responsive design ?


Implementing responsive design ensures that a website or application adjusts seamlessly across various devices and
screen sizes, providing an optimal user experience.

What is a Media Query in CSS?

A media query is a CSS technique used to apply styles based on the characteristics of the user's device or
viewport. It enables responsive design by adapting the layout and styling of a webpage to different screen
sizes, resolutions, orientations, and other device features.

➡What is the difference between inline and block elements?


The main difference between inline and block elements in HTML is where they appear
on a page and how much width they take up:
 Block elements
Start on a new line and take up the full width of the page. They are often used as
containers for other elements. Examples
include <div>, <nav>, <header>, <section>, <footer>, and <ul>.
 Inline elements
Do not start on a new line and only take up as much width as needed. They are used
to mark up parts of a text or document. Examples
include <span>, <input>, <label>, <select>, and <anchor>.

You might also like