HTML Concepts

1. What is HTML?

HTML stands for HyperText Markup Language. It is a markup language used to

structure text and multimedia documents on the web. HTML consists of a series of
elements that are used to describe the content and structure of a web page. The
elements are represented by tags, which are enclosed in angle brackets.

2. What do you mean by a markup language?

A markup language is a set of instructions that are used to annotate or "mark up" a
document in a way that specifies how it should be formatted and displayed. Markup
languages use a specific syntax, or set of rules, to define the different elements in
the document and how they should be formatted.
Markup languages are used to create documents that can be displayed in a web
browser or other types of software that can interpret the markup. In addition to
HTML, other examples of markup languages include XML (Extensible Markup
Language) and LaTeX (a markup language used for typesetting scientific documents)

3. Can you share examples of other markup languages and how they differ from
HTML?

Few examples of markup languages that are different from HTML:

XML (Extensible Markup Language): XML is a markup language that is similar to

HTML, but it is designed to be more flexible and extensible. While HTML is used to
structure and display content in a web browser, XML is used to store and transport
data. XML is often used to exchange data between different systems, or to store
data in a structured format.

LaTeX: LaTeX is a markup language that is commonly used in the scientific and
technical fields to create high-quality documents. It is known for its ability to typeset
complex mathematical equations and symbols, as well as for its support for cross-
referencing and bibliographies.

Markdown: Markdown is a simple markup language that is designed to be easy to

read and write. It uses a set of special characters to format text, such as asterisks for
bold text and underscores for italic text. Markdown is often used to format readme
files, documentation, and other types of text that need to be easily readable in plain
text.
4. What version of HTML do you use in your projects? How is HTML 5 different from
HTML 4?
HTML5.
HTML5 was released in 2014 and it introduced a number of new features and
improvements compared to HTML4. Some of the main differences between HTML5
and HTML4 include:

• New Elements: HTML5 introduced a number of new elements, such as

<header>, <footer>, and <nav>, which are used to structure the content of a
web page.
• Improved Multimedia Support: HTML5 introduced new elements, such as
<audio> and <video>, that allow you to embed audio and video files directly
into a web page without the need for third-party plugins.
• Improved Form Controls: HTML5 introduced new form controls, such as the
date and range input types, which make it easier to create more interactive
and user-friendly forms.
• Improved Semantic Markup: HTML5 introduced new elements that are
designed to improve the semantic meaning of a web page. This makes it
easier for search engines and other software to understand the content and
structure of a page.
• Overall, HTML5 represents a significant improvement over HTML4, and it is
the recommended version to use for modern web development.

5. What are attributes in HTML?

In HTML, an attribute is a property of an element that provides additional
information about that element. Attributes are specified in the opening tag of an
element, and they usually consist of a name and a value.
For example, the href attribute is used to specify the destination of a hyperlink in an
<a> element:
<a href="https://www.example.com">Click here</a>
In this example, the href attribute specifies the URL that the link should point to
when clicked. The value of the href attribute, "https://www.example.com", is the
actual URL that the link will take the user to.
There are many different attributes that you can use in HTML, and each element can
have its own set of attributes. Some attributes are required for certain elements,
while others are optional.
 For example, the src attribute is required for the <img> element, which is used to
embed an image in a web page. The src attribute specifies the location of the image
file that should be displayed.
Code:
<img src="image.jpg" alt="A description of the image">
In this example, the src attribute specifies the location of the image file, and the alt
attribute provides a text description of the image for users who are unable to view it.
6. What are data- attributes good for?
The data- attributes are a set of attributes that are used to store custom data private
to the page or application on an HTML element. These attributes are used to store
data that is not related to the element's content or style, and they are not intended
to be displayed to the user.

One common use for data- attributes is to store data that is used by JavaScript to
manipulate the element in some way. For example, you might use a data- attribute
to store the id of a database record that is associated with the element, and then use
JavaScript to retrieve and update the record when the element is clicked.

Here is an example of a data- attribute being used to store a custom data value:

Code
<div data-record-id="123">This element is associated with record 123</div>

In this example, the data-record-id attribute is used to store the id of a record that is
associated with the div element. The value of the attribute, "123", is the id of the
record. This attribute could then be accessed and used by JavaScript to retrieve and
update the record as needed.

data- attributes are a useful way to store custom data on an HTML element in a way
that is private to the page or application. They can be used to store data that is used
by JavaScript or other client-side scripts, or to store data that is used by the server
when the page is submitted.

7. Describe the difference between &<script>, <script async> and <script defer>.
The <script> element is used to include a script in an HTML document. The script can
be a JavaScript file, or it can contain JavaScript code directly inline in the element.
 There are several attributes that can be used with the <script> element to control
how the script is loaded and executed. These attributes include:

async: If the async attribute is present, the script is executed asynchronously,

meaning that it will be loaded in parallel with the rest of the page. This can improve
the performance of the page, since the script does not have to be loaded before the
page can continue rendering.
defer: If the defer attribute is present, the script is executed after the page has
finished loading. This can be useful if the script depends on the page being fully
loaded, or if you want to make sure that the script is executed after other elements
on the page have been initialized.
Here is an example of how these attributes can be used:
Code
<script src="myscript.js"></script>
<script src="myscript.js" async></script>
<script src="myscript.js" defer></script>
In the first example, the script is loaded and executed immediately, as it is not
marked with either the async or defer attribute. In the second example, the script is
loaded and executed asynchronously, meaning that it will be loaded in parallel with
the rest of the page. In the third example, the script is loaded, but it is not executed
until after the page has finished loading.

Using the async or defer attributes can improve the performance of your page, since
it allows the browser to load and execute the script in a way that does not block the
rendering of the page. However, you should be careful when using these attributes,
as they can also change the order in which your scripts are executed, which may
affect the behavior of your page.

8. Why is it generally a good idea to position CSS <link>s between <head></head&>

and JS <script>s just before </body>? Do you know any exceptions?
It is generally a good idea to include your CSS <link> elements in the <head> of your
HTML document, and to include your JavaScript <script> elements just before the
closing </body> tag. There are a few reasons for this:
CSS files should be loaded before the content of the page, so that the styles are
applied as soon as the page is rendered. If the CSS files are placed at the bottom of
the page, the content may be displayed to the user before the styles are applied,
which can result in a "flash" of unstyled content.
JavaScript files can block the rendering of the page if they are placed in the <head>
of the document, since the browser has to wait for the script to be downloaded and
executed before it can continue rendering the page. By placing the script elements
just before the closing </body> tag, you can ensure that the page is mostly rendered
before the scripts are executed, which can improve the performance of the page.
There are a few exceptions to this rule:
If your JavaScript files are small and do not block the rendering of the page, you may
be able to include them in the <head> of the document without any significant
performance impact.
If your JavaScript files are required to be loaded and executed as soon as possible,
you may need to include them in the <head> of the document, even if it means that
the page will be blocked while the scripts are loaded and executed.
Overall, it is a good idea to follow the general practice of including CSS <link>
elements in the <head> of the document and JavaScript <script> elements just
before the closing </body> tag, unless you have a specific reason to do otherwise.
This can help to ensure that your pages are loaded and rendered efficiently.