HTML Q&A

What does DOCTYPE mean? What’s one main result if you do not specify a doctype in an HTML page?

It is an introduction to the web browser about what version of HTML the page is written.
In HTML4, all <!DOCTYPE> declearations require a reference to a Document Type Definition.
Whereas HTML5 does not require that. Without the <!DOCTYPE>, you are forcing the browsers to render in Quirks Mode.

What is Metadata in HTML? Why is it useful?

Metadata is used to describe the HTML. Metadata is typically used to specify the page description, keyword, author of the document, viewport, and other information.
Metadata can be used by browsers(how to display content, reload page), search engines(keyword), and other web services.
HTML5 introduced Viewport metadata, which is very useful for page dimensions and scaling. This is useful for high-resolution devices.

How do you serve a page with content in multiple languages?

To change the language, just simply set the lang attribute. We can define it anywhere in the document, such as in the body, in the paragraph, in the heading, or in the span tag.
<HTML lang="en">

What should you be wary of when designing multilingual sites?

use lang attribute in your HTML.

Directing users to their native language - Allow users to change their country/language easily without hassle.

When translating image text, each string of text will need to have a separate image created for each language.

Formatting dates and currencies - Calendar dates are sometimes presented in different ways.

Do not concatenate translated strings - Do not do anything like "The date today is " + date. It will break in languages with different word orders. Use a template string with parameters substitution for each language instead.

Language reading direction - In English, we read from left-to-right, top-to-bottom, in traditional Japanese, text is read up-to-down, right-to-left.

What are data- attributes good for?

data-* attributes allow us to store extra information on standard, semantic HTML elements.
Say you have an article and you want to store some extra information that doesn't have any visual representation.

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?

The CSS files are placed in the "head" so that they load and the page is seen as it should be.

HTML is loaded line by line. We put the JS file at the bottom of the pages so that the file will be executed after page content is loaded.

Currently there is an alternative most recent browsers implemented called async.
<script src=”main.js” async></script>

By adding the async attribute you are telling the browser to load the file asynchronously. This means it is loaded as a “background task” and will not block the page from continuing to load.

How to add CSS?

External CSS
External style are defined within the <link> element, inside the <head> section of an HTML page. With an external style sheet, you can change the look of the entire page by changing just on file.
<link rel="stylesheet" href="mystyle.css">

Internal CSS
Internal style are defined within the <style> element, inside the <head> section of an HTML page.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

Inline CSS
Inline style are defined within the "style" attribute of the relevent element.
An inline style may be used to apply a unique style for a single element.
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Difference between inline elements and block elements. Give some examples.

A block element always starts on a new line and takes up the full width available.
Here are some block-level elements:
<p>, <div>, <ul>, <ol>, <table>, <h1>

An inline element does not start on a new line, it only takes up as much width as necessary.
Here are some inine-level elements:
<span>, <image>, <button>, <a>, <li>, <ul>

List HTML5 new features you uesd.

I used new tags like: header, footer, main, nav.
I also used new input types like email, range, number, date, color, time, and etc.
LocalStorage（web applications can store data locally within the user’s browser.） is also used to store user preference data and logging information. I also applied new geolocation API to ask for user's location.

What is SVG? Benefits of using SVG?

SVG stands for scalable vector graphics. It is used to display graphics on the page.
SVG graphics do not lose any quality if they zoom or resize. Every element and every attribute in SVG files can be animated.

local storage vs session storage vs cookie

local storage and session storage are both APIs introduced in HTML5 to save website data.

local storage stores data with no expiration date, and gets cleared only through Javascript, or clearing the Browser's cache.

Session storage is similar to local storage, but data expires when the browser closed.

Cookie stores data that has to be sent back to the server with subsequent requests. Its expiration varies based on the type, and the expiration duration can be set either on the server-side or client-side.

Have you used web worker? How did you use it?

Web worker is introduced in HTML5 to execute Javascript in the background. I uesd web worker to prefetch data from API for later use.

Tell something about <iframe>. How did you use it and what does it bring?

An inline frame is used to embed another document within the current HTML document. I used <iframe> to include an application developed by another team.
Since iframe loads entire HTML and creates new document, it brings both javascript and CSS encapsulation.

Syntax: <iframe src = "URL"></iframe>.

Which element should I use to display quoted text?

We can use <backquote>

How to upload files to website using HTML?

We can use <input type="file">to upload files.

Describe the difference between <script>, <script async> and <script defer>.

Async and defer are basically two boolean attributes for the <script> tag. Async allows the execution of scripts asynchronously as soon as they're downloaded. Defer allows execution only after the whole document has been parsed.

Both attributes don’t have any effect on inline scripts.

What are Semantic Elements?

A semantic element describe its meaning to both browser and developer. It's more friendly to search engine other than using div/span. And it's also good for accessibility.

non-semantic element: <div>, <span>

semantic element: <form>, <table>, <article>, <header>, <footer>, <aside>

Which attribute should we set on <a> in order to open the link in a new tab/window?

target = "_blank"

What is singleton tag in HTML?

A singleton tag is also called self-closing tag, which doesn't need a closing tag to be valid.

<br/>
<hr/>
<img/>
<input/>
<link/>
<col/>

What is the difference between HTML Tag and HTML Element?

An element is a set of opening and closing tags in use. For example <h1>Some Text</h1>, or <input/>
HTML Tags are like <h1>, <p>

What is the difference between <pre></pre> and <p></p>?

The <pre> tag defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font, and it preserves both spaces and breaks.
The <p> tags won't revere spaces and breaks.

What is the difference between src and href?

The href attribute specifies the location (URL) of a resource, that an anchor element points to, or the location of a linked resource, like a stylesheet. While the src attribute is used to embed a resource - usually URLs - into a document, think embedded images (<img>) and <script> tags.

What is a URL fragment?

Any URL with a hash symbol (#) is a fragment URL. A fragment is usually the right portion of the # symbol. It is an internal page reference, sometimes called a named anchor.
In HTML documents, the browser looks for an anchor tag <a> with an id attribute matching the fragment, and scroll the page to display that section.
Changing the URL fragment will not reload the page.

Consider HTML5 as an open web platform. What are the building blocks of HTML5?

Semantics — Allowing you to describe more precisely what your content is.
Connectivity — Allowing you to communicate with the server in new and innovative ways.
Offline and storage — Allowing webpages to store data on the client-side locally and operate offline more efficiently.
Multimedia — Making video and audio first-class citizens in the Open Web.
2D/3D graphics and effects — Allowing a much more diverse range of presentation options.
Performance and integration — Providing greater speed optimization and better usage of computer hardware.
Device access — Allowing for the usage of various input and output devices.
Styling — Letting authors write more sophisticated themes.

What is progressive rendering?

Progressive Rendering is the technique of sequentially rendering portions of a webpage in the server and streaming it to the client in parts without waiting for the whole page to render.

What is an XSS attack?

XSS(cross-site scripting) attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser-side script, to a different end-user. It occurs anywhere a web application uses input from a user, within the output it generates without validating or encoding it.

An attacker can use XSS to send a malicious script to an unsuspecting user. The end user’s browser has no way to know that the script should not be trusted, and will execute the script. Because it thinks the script came from a trusted source.