Things to remember HTML

Question 1

What does HTTP stands for?

Answer 1

Hyper Text Transfer Protocol

Question 2

How to open links in new tabs.

Answer 2

With the target=_blank attribute.

e.g.:
<a href:”www.xyz.de” target=_blank>xyz</a>

Question 3

How to parse all HTML before executing java scripts?

Answer 3

defer (

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed

Question 4

What does the async attribute do?

Answer 4

The async attribute loads and executes the script asynchronously with the rest of the webpage.

Similar to the defer attribute, the HTML parser will continue parsing the rest of the HTML as the script is downloaded in the background.

However, with the async attribute, the script will not wait until the entire page is parsed: it will execute immediately after it has been downloaded.

Question 5

How do you create an input field that can be used in a form?

Answer 5

/form action=”restaurants”/
/label for=”name-input”/Name//label/
/input id=”name-input” type=”text” name=”name”/
/input type=”submit” value=”Submit”/
/form/

Question 7

Short for writing an ul with a class of “nav” with 3 li’s with class “item” and ankers with class “links?

Answer 7

ul.nav>(li.item>a.links)*3

Question 8

Which attribute can you use to indicate the current state of a collapsible element on the page?

Answer 8

The aria-expanded attribute:

• When aria-expanded=”true”, it means the content is visible.
• When aria-expanded=”false”, it means the content is hidden.

Question 9

What tag is used to create a form in HTML?

Answer 9

<form>

Question 10

How do you specify a text input field in an HTML form?

Answer 10

<input type="text" id="someId" name="someName">

Question 11

Which attribute is used for password fields in a form?

Answer 11

type=”password”

Question 12

What element is used to group radio buttons in a form?

Answer 12

<fieldset>

Question 13

What tag is used to label a group of related form elements within a <fieldset>?

Answer 13

<legend>

Question 14

How do you create a radio button in an HTML form?

Answer 14

<input type="radio" id="someId" name="someName" value="someValue">

Question 15

Which HTML attribute should be used to label form controls for better accessibility?

Answer 15

for in <label> tags, linking to the id of the input element.</label>

Question 16

How do you create a multi-line text input in an HTML form?

Answer 16

<textarea id="someId" name="someName" rows="5" cols="33"></textarea>

Question 17

What type of input should you use for collecting email addresses?

Answer 17

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

Question 18

What is the purpose of the name attribute in form elements?

Answer 18

To specify the name of the form data variable that will be sent to the server.

Question 19

How do you add a submit button to an HTML form?

Answer 19

<input type="submit" value="Send Request">

Question 20

What is the correct syntax for a self-closing input tag in HTML?

Answer 20

<input type="text" id="someId" name="someName">

Question 21

How can you group and label related input elements in a form?

Answer 21

Using the <fieldset> and <legend> tags

Question 22

Which tag is used to create labels for form elements?

Answer 22

<label>

Question 23

How do you create a form field for user addresses in an HTML form?

Answer 23

<textarea id="addr" name="addr" rows="5" cols="33"></textarea>

Question 24

How does the ‘type’ attribute help in form validation?

Answer 24

It specifies the type of data that must be entered, such as a number, an email address, or another specific preset type.

Question 25

How can you use the ‘pattern’ attribute for form validation with an example?

Answer 25

Example:
~~~
<input id=”choose” name=”i-like” required pattern=”[Bb]anana|[Cc]herry”
~~~
allows only “banana”, “Banana”, “cherry”, or “Cherry” as valid inputs.

Question 26

What API in JavaScript provides methods and properties for form validation?

Answer 26

The Constraint Validation API.

Question 27

Which DOM interfaces are available with the Constraint Validation API?

Answer 27

HTMLButtonElement, HTMLFieldSetElement, HTMLInputElement, HTMLOutputElement, HTMLSelectElement, HTMLTextAreaElement.

Question 28

What does the validationMessage property do?

Answer 28

Returns a localized message describing the validation constraints that the control doesn’t satisfy.

Question 29

What is the purpose of the validity property?

Answer 29

Returns a ValidityState object containing properties describing the validity state of the element.

Question 30

What does the patternMismatch property indicate?

Answer 30

Returns true if the value does not match the specified pattern.

Question 31

What does tooLong property signify in form validation?

Answer 31

Returns true if the value is longer than the maximum length specified by the maxlength attribute.

Question 32

Define the tooShort property.

Answer 32

Returns true if the value is shorter than the minimum length specified by the minlength attribute.

Question 33

What returns true if the value is greater than the maximum specified by the max attribute and less than the minimum?

Answer 33

rangeOverflow

rangeUnderflow

Question 34

What returns true if the value is not in the required syntax (e.g., email or URL).

Answer 34

the typeMismatch property.

Question 35

In custom form validation, why is the aria-live attribute used?

Answer 35

To ensure custom error messages are presented to all users, including those using screen readers.

Question 36

What attribute turns off automatic browser validation in forms?

Answer 36

The novalidate attribute.

Question 37

What is the purpose of setCustomValidity in JavaScript?

Answer 37

Allows setting custom error messages for form validation based on custom criteria beyond standard HTML attributes.

Question 38

How do you clear a custom error message set with setCustomValidity?

Answer 38

Call setCustomValidity(“”) on the form field.

Question 39

Example syntax for setting a media query in the picture element?

Answer 39

<picture>
  <source media="(min-width: 650px)" srcset="desktop-image.jpg">
  <img src="mobile-image.jpg" alt="Responsive image">
</picture>

Question 40

What is REST?

Answer 40

REST (Representational State Transfer) is an architectural style for building standards between computer systems on the web, making communication between systems easier. RESTful systems are stateless and separate the concerns of client and server.

Question 41

What does “Separation of Client and Server” mean in REST?

Answer 41

In REST, the client and server are implemented independently, allowing changes on one side without affecting the other. This modular separation improves flexibility, scalability, and allows both components to evolve separately.

Question 42

What does “stateless” mean in REST?

Answer 42

Statelessness in REST means that the server does not store any information about the client’s state. Every request from the client contains all the necessary information for the server to understand and process it without relying on prior interactions.

Question 43

How does communication between client and server work in REST?

Answer 43

In REST, clients send requests (e.g., GET, POST, PUT, DELETE) to retrieve or modify resources, and the server sends responses back with data or status codes. Standard HTTP verbs and headers are used for this communication.

Question 44

What are the four main HTTP verbs used in RESTful systems?

Answer 44

• GET: Retrieve a resource or collection of resources
• POST: Create a new resource
• PUT: Update a specific resource
• DELETE: Remove a resource

Question 45

What are MIME types in REST headers?

Answer 45

MIME types specify the type of content in HTTP requests and responses. Common MIME types include text/html, image/jpeg, application/json, and video/mp4. The client specifies the acceptable MIME types in the request’s “Accept” field.

Question 46

What is an example of an HTTP GET request in REST?

Answer 46

A GET request to fetch a specific resource:
GET /articles/23
Accept: text/html, application/xhtml
This requests the article with id 23, and the client can accept HTML or XHTML content.

Question 47

What does the header “Content-Type” indicate in a REST response?

Answer 47

The “Content-Type” header specifies the type of data the server is sending back in the response, which should match one of the acceptable MIME types listed in the client’s request.

Question 48

How are resource paths structured in RESTful APIs?

Answer 48

Resource paths should be hierarchical and descriptive, often using plural forms of resources (e.g., /customers/223/orders/12). Paths can refer to collections or specific resources by appending an ID to the path.