HTML Deck 4 Flashcards
What are the different types of lists in HTML?
A list is a record of short pieces of related information used to display the data or any information on web pages in the ordered or unordered form. HTML offers 3 ways for specifying lists of information. All lists must contain one or more list elements. The types of lists that can be used in HTML are:
Unordered List: It will list the items using plain bullets.
Ordered List: It will use different schemes of numbers to list your items.
Definition List: It arranges your items in the same way as they are arranged in a dictionary.
The Basic Skeleton of HTML:
<html>
<head>
<title> Interviewbit </title>
</head>
<body>
..........................
....Body contents here....
..........................
</body>
</html>
Root Element in HTML
<html>...</html>
: The root (top-level element) of an HTML page is represented by the <html> element or the <html> tag. This element must be the ancestor of all other elements. The structure of any HTML file showing the usage of the <html> element is shown below:
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
HTML Meta Tag
<head>...</head>
: Machine-readable information (metadata) about the document, such as its title, scripts, and style sheets, is contained in the HTML <head> element. The <head> element This is used for setting the title and various other information that is not displayed.
<link></link>
…</link>: The HTML External Resource Link <link></link> element establishes a connection between the current content and an external resource. This element is most typically used to connect to stylesheets, but it can also be used to create site icons (both “favicon” style icons and icons for the home screen and apps on mobile devices).
<meta></meta>
: Metadata that cannot be represented by other HTML meta related elements such as <base></base>, <link></link>,
, <style>, or <title> is expressed by the HTML <meta></meta> element.</title></style>
<style>
...</style>
: The HTML <style> element specifies the style of a document or a section of a document.</style>
<title>...</title>
: The HTML Title element <title> specifies the document title that appears in the title bar or tab of a browser. This is what is bookmarked when we bookmark pages.</title>
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title> HTML Cheatsheet </title>
<link></link>
<style>
h1 {colour:green;}
p {colour:yellow;}
</style></head>
</html>
HTML Elements: Adding Scripting
<script> … </script>
: The HTML
element is used to embed or refer to executable code; for example, JavaScript code is generally embedded or referred to using this element. An example which shows the usage of theelement is given below:
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.
Why do we use a style sheet in HTML?
A style sheet helps in creating a well-defined template for an HTML webpage that is both consistent as well as portable. We can link a single style sheet template to various web pages, which makes it easier to maintain and change the look of the website.
What is semantic HTML?
Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content.
For example: In semantic HTML <b> </b> tag is not used for bold statement as well as <i> </i> tag is not used for italic. Instead of these we use <strong></strong> and <em></em> tags.
What is SVG in HTML?
HTML SVG is used to describe the vector or raster graphics. SVG images and their behaviors are defined in XML text files.
We mostly use it for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.
<svg>
<circle></circle>
</svg>
How do you add CSS styling in HTML?
Inline CSS: It is used when less amount of styling is needed or in cases where only a single element has to be styled. To use inline styles add the style attribute in the relevant tag.
External Style Sheet: This is used when the style is applied to many elements or HTML pages. Each page must link to the style sheet using the <link></link> tag:
What hierarchy do the style sheets follow?
If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.
How do you add JavaScript to an HTML webpage?
JavaScript is used for making HTML web pages more interactive, and user-friendly. It is a scripting language that allows you to interact with certain elements on the page, based on user input. As with CSS, there are three major ways of including JavaScript:
Inline:
You can add JavaScript to your HTML elements directly whenever a certain event occurs. We can add the JavaScript code using attributes of the HTML tags that support it. Here is an example that shows an alert with a message when the user clicks on it:
Script block:
You can define a script block anywhere on the HTML code, which will get executed as soon as the browser reaches that part of the document. This is why script blocks are usually added at the bottom of HTML documents.
External JavaScript file:
You can also import the JavaScript code from a separate file and keep your HTML code clutter-free. This is especially useful if there is a large amount of scripting added to an HTML webpage.
What is the ‘class’ attribute in HTML?
The ‘class’ attribute in HTML defines a class for an HTML element. It can be used to apply a specific style to a group of elements on a web page.
What is the difference between the ‘id’ and ‘class’ attributes of HTML elements?
The ‘id’ attribute defines a unique identifier for an HTML element, while the ‘class’ attribute defines a class for a group of elements. An ‘id’ can only be used once on a page, while a ‘class’ can be used multiple times.
What is the difference between HTML and XHTML?
HTML and XHTML are both markup languages used to create web pages. However, XHTML is stricter than HTML and requires developers to write well-formed code that adheres to specific rules and guidelines. XHTML also requires all tags to be closed and all attributes to be quoted.
