Function Up Tech Interview Prep Doc - HTML &
CSS - Session 1
HTML - Partha Roy
What is the DOCTYPE in HTML?
The HTML document type declaration, also known as DOCTYPE, is the first line
of code required in every HTML or XHTML document. The DOCTYPE declaration
is an instruction to the web browser about what version of HTML the page is
written in. This ensures that the web page is parsed the same way by different
web browsers.
Code -
<!DOCTYPE html>
Resource - What Is DOCTYPE In HTML?
What is the key difference between HTML Elements and
Tags?
The HTML tag is just an opening or closing entity.
For example: <p> and </p> are called HTML tags.
HTML element encompasses opening tag, closing tag, content (optional for
content-less tags)
Eg: <p>This is the content</p> ; This complete thing is called a HTML element
Resource - HTML Tags Attributes and Elements (with example)
What are attributes in HTML?
Elements in HTML have attributes; these are additional values that configure
the elements or adjust their behaviour in various ways to meet the criteria the
users want.
Code - <h1 class="intro">Header 1</h1>
The ‘class’ is an attribute here, whose value is ‘intro’.
Resource - HTML Attributes
What are id and class in HTML?
The class attribute specifies one or more class names for an element. The class
attribute is mostly used to point to a class in a style sheet. However, it can also
be used by JavaScript (via the HTML DOM) to make changes to HTML elements
with a specified class.
Code - <h1 class="intro">Header 1</h1>
The id attribute specifies a unique id for an HTML element (the value must be
unique within the HTML document). The id attribute is mostly used to point to
a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate
the element with the specific id.
Code - <h1 id="myHeader">Hello World!</h1>
Resource - HTML Classes And IDs | Introduction To Classes And IDs In HT…
What is the difference between a class and an ID?
In HTML
Each HTML element can have an id and a class attribute, however, the
differences are:
1. The id’s value must be unique in the whole document. As for the class,
the value can be the same for multiple elements.
2. The id’s value must not contain whitespace (spaces, tabs, etc.), while the
class attribute allows space-separated values
Code -
<h1 id="main-heading" class="text heading-text"></h1>
<p class="text"></p>
NOTE: both class and id can contain letters, numbers, dashes, and
underscores, but the first character should always be a letter.
In CSS
In CSS the minor difference between class and id is that they have special
characters preceding the name.
For id, it is pound “#” for class it is period “.”
Code -
#main-heading {
font-size: 45px;
}
.text {
color: #333;
}
The main difference between class and id in CSS is that they have different
selector specificity. The id has a higher specificity than a class.
E.g. looking at the following code, the id selector will override the class selector
styles, even if the class selector is cascading after the id selector.
#main-heading { color: #000; } .text { color: #333; }
It is considered a good practice to use classes to style elements, not the ids.
One of the reasons for this, is that it is easier to override a class selector than
an id.
In Javascript,
There’s not much difference between id and class in JavaScript. These are how
you are going to select DOM elements and how you’re going to access attribute
values.
In JavaScript, you can select elements by their class name or by id. There are
different ways how you can utilize classes and id to select DOM elements.
To select the element by id you can use:
document.getElementById('elementId') method;
document.querySelector('#elementId') method;
window.elementId or window['element-id'] if the id is using a dash.
To select the element by the class you can use:
document.querySelector('.elementClass') method;
document.getElementsByClassName('elementClass') method;
Resource - Learn CSS #2: The difference between ID and Class Selectors
HTML4 vs HTML 5
HTML stands for Hyper Text Markup Language. It is used to design web pages
using a markup language. HTML is the combination of Hypertext and Markup
language.
Hypertext defines the link between the web pages. A markup language is used
to define the text document within the tag which defines the structure of web
pages. This language is used to annotate (at the note for computer) text so that
a machine can understand it and manipulate text accordingly.
Most of the markup (e.g. HTML) languages are human-readable.
HTML HTML5
It didn’t support audio and video without the It supports audio and video controls with
use of flash player support. the use of <audio> and <video> tags.
It uses SQL databases and application
It uses cookies to store temporary data. cache to store offline data.
Allows JavaScript to run in background.
This is possible due to JS Web worker
Does not allow JavaScript to run in browser. API in HTML5.
Vector graphics are possible in HTML with
the help of various technologies such as Vector graphics is additionally an integral
VML, Silver-light, Flash, etc. part of HTML5 like SVG and canvas.
It does not allow drag and drops effects. It allows drag and drops effects.
Not possible to draw shapes like circles, HTML5 allows drawing shapes like
rectangles, triangles etc. circles, rectangles, triangles etc.
It is supported by the all-new browser like
It works with all old browsers. Firefox, Mozilla, Chrome, Safari, etc.
<HTML>,<Body> , and <Head> tags are These tags can be omitted while writing
mandatory while writing a HTML code. HTML code.
Older versions of HTML is less
mobile-friendly. HTML5 language is more mobile-friendly.
The doctype declaration is too long and The doctype declaration is quite simple
complicated. and easy.
Elements like nav and header were not New elements for web structure like nav,
present. header, footer etc.
Character encoding is long and complicated. Character encoding is simple and easy.
It is almost impossible to get the true
GeoLocation of users with the help of One can track the GeoLocation of a user
browser. easily by using JS GeoLocation API.
It is capable of handling inaccurate
It can not handle inaccurate syntax. syntax.
Being an older version, it is not fast, flexible, It is efficient, flexible and faster in
and efficient as compared to HTML5. comparison to HTML.
Attributes like charset, async and ping are Attributes of the charset, async and ping
absent in HTML. are a part of HTML 5.
Resource -
HTML vs HTML5 | Difference between HTML and HTML5 | HTML Tutorial…
What are new implementations in HTML5
Since some HTML4 elements were completely removed from HTML5, new ones
had to be created? In this section, we will list some of the most commonly used
elements introduced in HTML5. They are shown in the following bullet list:
<section> element
A section element is also considered a semantic element because it represents
a section of a document that is related to the same general concept. Since a div
has no semantic meaning, it is called a generic container element and should
only be used to group elements together for styling, or presentational,
purposes.
Code -
<section>
<h2>About Us</h2>
<p>the magazine collects stories, essays, and interviews about growing up.
</p>
</section>
<article> element
The article element represents a section of content that forms an independent
part of a document or site; for example, a magazine or newspaper article, or a
blog entry.
This is most often used in two contexts: On a page with a single piece of
content, a single <article> element can be used to contain the main content
and set it off from the rest of the page.
On a page with multiple pieces of content (a blog index page, a search results
page, a category page, a news feed), multiple <article> elements can be used to
contain each individual piece of content.
Either way, this is functionally similar to using <div> elements, and the display
and styling work the same. However, using the <article> element instead of
<div> provides more semantic information to screen readers, search engines,
and third-party applications.
<main> element
The main element represents the main content section of the body of a
document or application. The main content section consists of content that is
directly related to or expands upon the central topic of a document or central
functionality of an application.
Note: the main element is not sectioning content and has no effect on the
document outline The main content section of a document includes content
that is unique to that document and excludes content that is repeated across a
set of documents such as site navigation links, copyright information, site logos
and banners and search forms (unless the document or applications main
function is that of a search form).
● Authors MUST NOT include more than one main element in a document.
● Authors MUST NOT include the main element as a child of an article,
aside, footer, header or nav element.
<aside> element
The <aside> element is used to identify content that is related to the primary
content of the webpage but does not constitute the primary content of the
page. Author information, related links, related content, and advertisements
are examples of content that may be found in an aside element.
<header> element
The header element is used to contain the content that appears at the top of
every page of your website: the logo, tagline, search prompt, and possibly a
navigational menu. In most cases, the header element is best positioned as a
direct descendant of the body element, but it’s also ok to place it inside the
main element if you prefer.
<footer> element
The footer appears at the bottom of a section of a document. Typically, the
footer is a direct descendant of the body element, but it can also be used
within the main element, a section, or an article.
The most common use of the footer element is to place it at the bottom of an
HTML document to contain things like a copyright notice, links to related
content, address information about the owner of the website, and links to
administrative things like privacy policies and website’s terms of service.
You may also use the footer element within an article to provide metadata
about that particular article. For example, if article tags have been used to
wrap a forum post, it would be appropriate to wrap copyright information and
the date and time the post was made in a footer element and place it at the
bottom of the article.
<nav> element
Navigational menus are commonly placed at the top of a web page, in a
sidebar, or in the page footer. Wherever you happen to place a navigational
menu, wrap it in nav tags. Note that you don’t need to use nav tags for every
link, just for blocks of links that provide either sitewide navigation or navigation
for a specific part of a website.
<figure> element
The figure element represents a piece of self-contained content that's
commonly used to enclose images or graphics, charts, reference tables, videos,
poems, code snippets, etc.
These may have a legend or caption (figcaption element) that can be used to
reference the fragment from somewhere else in the document. Beside the
optional caption, a figure element can contain many other elements including
images (img), paragraphs (p), computer code (code), cites (cite), etc.
<template> element
The HTML <template> element represents a template in your markup. It
contains "template contents"; essentially inert chunks of cloneable DOM. Think
of templates as pieces of scaffolding that you can use (and reuse) throughout
the lifetime of your app.
Reference -
HTML5 new features | HTML5 Interview Questions | HTML5 for beginner…
