html interview questions

HTML is a markup language that contains, a collection of elements, By using those HTML elements we can create the structure or skeleton of a web page. HTML will tell web browsers how to structure the web pages and content

HTML tags are the building blocks of web pages. They are instructions written in a special syntax that defines the structure and content of a webpage. These tags are essentially keywords surrounded by angle brackets (< and >).

Structure: An HTML tag typically consists of two parts:

Opening Tag

Closing Tag

Types of Tags:

Paired Tags

Unpaired Tags

Attributes

An Element is a combination of opentag, content, and closing tag

<p> HTML interview Questions </p>

We know that, all the HTML elements follow the pattern of an opening tag, content, and a closing tag

The HTML elements which contains only an open tag, and do not contain a closing tag are called Void elements.

Some of the HTML elements contain an open tag itself is a closing tag are also called Self Closing tags

Examples: <area>, <base>, <br>, <col>, <input>, <link>, <meta>, <embed>, <source>, <track>, <hr>, <img>, <wbr>

Attributes will provide additional information about elements. that won't appear in the content. Attributes are always added in the starting tag of an element.

Sometimes, we may add attributes to elements without assigning values. This practice is perfectly valid. Such attributes are known as Boolean attributes. Boolean attributes can only have one value, which is generally the same as the attribute name

checked: Used in <input> elements of type checkbox or radio to specify that the input should be pre-selected.
disabled: Disables the associated form control, making it unresponsive to user input.
readonly: Makes the associated form control read-only, preventing user modification.
required: Specifies that an input field must be filled out before submitting a form.
multiple: Used with <input> elements of type file, indicating that multiple files can be selected.
autofocus: Automatically focuses on the input element when the page loads.
selected: Marks an <option> element as selected by default within a <select> element.
autoplay: Starts media playback automatically when the page loads.
controls: Displays media controls (play, pause, volume, etc.) for audio or video elements.
loop: Specifies that media playback should loop indefinitely.
muted: Mutes audio playback for audio or video elements by default.
default: Specifies that a track element should be enabled by default for the media element.
download: Indicates that the linked resource should be downloaded when clicked.
formnovalidate: Specifies that a form should not be validated when submitted.
novalidate: Disables form validation for the associated <form> element.

<input type="text" disabled="disabled" />

<input type="checkbox" checked />

<input type="checkbox" required  />

<input type="checkbox" readonly  />

<!doctype html>
<html lang="en-US">
<head>
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>

<!DOCTYPE html> is an HTML document type declaration, also known as a doctype declaration. It is an instruction to the web browser about what version of HTML the page is written in, and how the browser should render it.

<html></html>: The root <html> element. This element wraps all the content on the page

<head> section is used to define the metadata and meta title of a web page. we can also add CSS to design the document, we can also add javascript to provide interactions on a web page

<title> is used to define the meta title of HTML document

<body> section is used to display the content in web page

By using the <meta> tag we can provide metadata about an HTML document. Metadata is nothing but data about a web page.

<meta> element contains two important attributes, they are: name and content

This content includes crucial information essential for browsers and search engines to comprehend the webpage's content, despite not being visible to the users.

some common usages of <meta> tag are:

<meta charset="UTF-8"> denotes the character encoding used in an HTML document, ensuring accurate display of special characters and symbols.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> allows control over the layout and scaling of webpages across various devices, aiding in responsive design implementation.

<meta name="keywords" content="keyword1, keyword2, keyword3"> and <meta name="description" content="A brief description of the page content"> assists in providing pertinent keywords and a concise overview of page content, facilitating indexing and ranking by search engines.

<meta name="robots" content="noindex, nofollow"> directs search engine robots to refrain from indexing the page or following its links.

The code <meta http-equiv="refresh" content="5;url=http://example.com"> can automatically refresh the page after a specified time or redirect users to another page.

Insert an image in HTML, you use the <img> (image) tag. The <img> tag is an empty, self-closing tag, and it requires the src attribute, which specifies the source (URL) of the image.

<img src="path/to/image1.jpg" alt="Some descriptive text about image" />

<img src="path/to/image2.png" alt="Some descriptive text about image" />

Below are impoprtant attributes of an <img /> tag:

src: Specifies the URL of the image file to display.
alt: Provides alternative text for the image, visible if the image fails to load or for accessibility with screen readers.
width: Sets the width of the image in pixels or as a percentage relative to the parent container.
height: Sets the height of the image in pixels or as a percentage relative to the parent container.
title: Adds a title or tooltip text visible when hovering over the image.
loading: Determines the image loading behavior, with options such as "auto", "lazy", or "eager".

We can also include multimedia in our web pages like: images, audios and videos

<img>: Used to embed images into web pages.

<img src="image.jpg" alt="Description of the image">

<audio>: Used to embed audio content into web pages.

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<video>: Used to embed video content into web pages.

<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

To embed external websites within a web page, we can use an <iframe>. An <iframe> is also called as inline frame.

By using <iframe> we can display content of a another webpage directly within our own webpage

<iframe src="https://www.example.com" width="600" height="400" frameborder="0" scrolling="auto"></iframe>

src: Specifies the URL of the external webpage you want to embed.
width and height: Defines the width and height of the iframe in pixels or percentages.
frameborder: Specifies whether or not to display a border around the iframe. Set it to "0" to remove the border.
scrolling: Specifies whether or not to display scrollbars within the iframe. Use "auto" to let the browser decide whether to display scrollbars based on content size.

Global attributes can be used on every HTML element:

id, class, style, title, lang, dir, tabindex, accesskey, data-*

custom attributes are attributes that are not predefined or recognized by the HTML specification but can be added to HTML elements to store extra information.

While it's generally recommended to use data attributes (prefixed with "data-") for custom data storage, some developers still refer to any non-standard attribute as a custom attribute.

However, it's crucial to note that using the "data-" prefix is the standardised and recommended way to create custom attributes in HTML.

<div id="codify" data-user-id="987" data-user-role="creator" data-status="true">

<h1>Hello Codify!</h1>

</div>

A table is a combination of collection of rows and columns

<table>	Defines a table.
<thead>	It is typically used to contain one or more <tr> (table row) elements that define the header row(s) of the table
<tbody>	The <tbody> element in HTML is used to group the body content of a table
<tfoot>	The <tfoot> element contains a single <tr> element that represents the footer row
<tr>	Defines a row in a table.
<td>	Defines a cell in a table.
<th>	It defines a header cell in a table
<caption>	This tag defines the table caption.
<col>	<colgroup> element It allows you to apply styling and attributes to entire columns rather than individual cells.
<colgroup>	<colgroup> is used to group a set of <col> (column) elements in a table.

The HTML Document Type.
It is a way to give information to the browser about what will be the document type to expect. In HTML5, the <! DOCTYPE> declaration is simple: <! DOCTYPE html>

<div> is a block-level element used for grouping and applying styles to a block of content.

while <span> is an inline element used for applying styles to a smaller portion of text or content.

Block Level Elements

All the block-level elements will occupy 100% width by default

block-level elements will start in a new line and append a line break

some of the block-level elements having the default margin

Examples:

h1 to h6, p, div, section, div, article, ul, ol, li

Inline Elements

inline elements will occupy as much as width they need

inline elements will NEVER starts in a new line and NEVER append a line break

inline elements Do not have any default margin

Examples:

a, img, b, i, u, string, input, textarea, select, label, table, tr, td

Semantic Elements in HTML

The HTML elements which are having meaning full tag names are called semantic elements

examples:

<section>, <header>, <footer> <nav>, <figure>, <table>, <form>, <input />, <select>, <option>, <figurecpation>, <main>, <aside>

Non-Semantic Elements In HTML

The HTML elements which are NOT having meaning full tag names are called non-semantic elements

Examples:

<ol>, <ul>, <li>, <a>, <b>, <i>, <u>, <tr>, <td>, <th>, <div>, <span>, <p>

The ‘alt’ attribute in the <img> (image) tag is used to provide alternative text for an image. It serves several important purposes, when the image is not loaded, in place of the image alternative text will displayed

Using the <a> (anchor) tag.

For example: <a href="https://www.codifynext.com">Visit Codify</a>.

HTML is more forgiving of syntax errors, while XHTML is more strict and requires well-formed documents. XHTML is an XML-based version of HTML.

	HTML	XHTML
Syntax	HTML has a more lenient syntax. It allows for certain deviations from well-formed XML, such as omitting closing tags for certain elements and not requiring self-closing tags for void elements (e.g., <br> instead of <br />)	XHTML follows stricter XML syntax rules. All tags must be properly nested, closed, and self-closed if applicable. XHTML documents must be well-formed XML, adhering to the rules of XML syntax
Document Structure	HTML documents have a more forgiving structure. Mistakes like unclosed tags or incorrectly nested tags may not cause errors, and browsers can still render the content	XHTML documents must be well-formed, and any syntax errors can cause the document not to render properly. Errors that may be overlooked in HTML can lead to issues in XHTML
Case Sensitivity	HTML is not case-sensitive. Tag and attribute names can be written in uppercase or lowercase, and they will be interpreted the same way.	XHTML is case-sensitive. All tags and attributes must be written in lowercase.
Attribute Quotation	HTML, attributes like class and id can be written without quotes, and it is common to see attributes without quotes	XHTML requires attribute values to be enclosed in quotes. For example, class="example" is the correct syntax
Self-Closing Tags	Void elements (elements with no content) like <img>	XHTML requires self-closing tags for void

href
target
download
rel
title
type

By using an anchor tag with target attribute

<a href="https://www.codifynext.com/all/html-interview-questions" target="_blank">Click Here</a>

Favicons in HTML reports can be included utilising:'

<link rel="icon" type="image/png" href="/favicon.png" />'.

We have to include the code in the area of our HTML code

By using <ol> tag

 <ol>
      <li>Item One</li>
      <li>Item Two</li>
       <li>Item Three</li>
       <li>Item Four</li>
 </ol>

Formatting elements are used to control the presentation and appearance of text and content within a webpage

<b>, <strong>, <em>, <i>, <u>, <mark>, <strike>, <sup>, <sub>, <small>

<form>
<input>
<output>
<label>
<button>
<fieldset>
<legend>
<select>
<option>
<optgroup>
<textarea>

type, name, value, placeholder, required, readonly disabled, autocomplete, autofocus, pattern, id, class

<input type="text" name="username" />

text
password
checkbox
radio
submit
button
reset
file
email
number
date
range
color
time

<head>
<title><title>
<meta />
<style></style>
<link />
<script></script>
<base />
</head>

<!--
<h1>Some Title</h1>
<p>Some Description</p>
-->
<!-- next section start -->

<form name="" method="" action="">
   <!-- form elements -->
</form>

form attributes are: name, method, action, novalidate, target, autocomplete, enctype and style

No, HTML can not communicate with a database, Only back-end technologies(java, .net, PHP, node) can communicate with the database.

So HTML can able to communicate with Back-end technology directly not with the database

By using <datalist> tag, we can display multiple options to the user as a dropdown

<label for="course">Choose Course:</label>
 <input list="courses" id="course" name="course">
<datalist id="courses">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="React">
  <option value="Angular">
</datalist>

Both the tags <select> and <datalist> are used to allow a user to select the options. But we have some key differences between them

In the <select> tag, users can only select options provided in the dropdown list. They cannot enter custom values

whereas in the <datalist> tag, users can select options from the suggestion list or enter custom values if needed

<select>: Suitable for scenarios where users need to choose one option from a list of predefined options.

<datalist>: Suitable for providing suggestions or autocomplete functionality for text input fields.

We can create multi-selection select box by using <select> tag with multiple attribute

<label>Select Course:</label>
<select multiple name="courses">
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>
  <option value="Bootstrap">Bootstrap</option>
  <option value="JavaScript">JavaScript</option>
  <option value="React">React</option>
</select>

By using checked attribute in <input /> element

<input type="radio" name="gender" value="male" checked>
<label for="male">Male</label>

<input type="radio" name="gender" value="female">
<label for="female">Female</label>

By using HTML entities, we can display special characters or symbols in your HTML

Generally, HTML entities are represented with &entity_name; and &entity_number;

Some of the examples for HTML entities

>	> or >
<	< or &#60
©	© or ©
®	® or ®
₹	₹
€	€ or €

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

The <meta> tag you provided is commonly used in HTML documents to control the layout and scaling of web pages on different devices

width=device-width: This sets the width of the viewport to the width of the device's screen.

initial-scale=1.0: This sets the initial zoom level when the webpage is first loaded. A value of 1.0 means that the webpage will be displayed at its original size without any zooming applied.

<canvas> element is used to draw graphics, on the fly, with the help of JavaScript.

<svg> element is a container for SVG graphics.

<form action="/" method="GET">
    <!-- form elements -->
</form>

<form action="/" method="POST">
    <!-- form elements -->
</form>

The GET method is not secured. beacuase it will append the form data URL. if the form is dealing with sensitive data, we can not use GET method.

POST method is always secured. It does not append the data in URL. It will transfer the data to the server securely,

GET method transfers a limited amount of data only i.e. around 2KB

The POST method can transfer an unlimited amount of data

<dl> - description list

<dd> - description definition

<dt> - description term

<dl>
  <dt>HTML</dt>
  <dd>
     HTML, or Hypertext Markup Language, is the standard markup language used to create and design web pages
  </dd>
  <dt>CSS</dt>
  <dd>
    CSS, or Cascading Style Sheets, is a style sheet language used to describe the presentation of a document written in HTML
  </dd>
  <dt>JavaScript</dt>
  <dd>
    JavaScript is a high-level programming language commonly used in web development for adding interactivity and dynamic behavior to web pages.
  </dd>
</dl>

We can use superscript and subscript when marking up items like dates, chemical formulae, and mathematical equations so they have the correct meaning

<p>My birthday is on the 17<sup>th</sup> of March 2024.</p>
<p>
  Caffeine's chemical formula is
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

<code>: For marking up generic pieces of computer code.
<pre>: For retaining whitespace (generally code blocks) — if you use indentation or excess whitespace inside your text, browsers will ignore it and you will not see it on your rendered page. If you wrap the text in <pre></pre> tags however, your whitespace will be rendered identically to how you see it in your text editor.
<var>: For specifically marking up variable names.
<kbd>: For marking up keyboard (and other types of) input entered into the computer.
<samp>: For marking up the output of a computer program.

HTML is an interpreted language. There is no compilation involved in HTML code execution.

Both Interpreters and compilers are built-in tools of browsers, which are used in the execution of programming languages, but they have some differences in how they process and execute code:

Interpreter

Interpreter will execute the code line by line and execute it immediately
It will convert high-level code into machine-readable code on the fly
Interpreted languages are slow in performance

Compiler

Compilation involves multiple steps
compiler translates the entire source code into machine-readable code before execution.
Compiled languages are better in performance because the code is optimized before execution.