Questions - HTML

Posted on | In

Record some HTML questions.

What does a DOCTYPE do?

DOCTYPE means DOCument TYPE. A DOCTYPE is always associated with a Document Type Definition.A DTD defines how documents of a certain type should be structured, whereas a DOCTYPE declares what DTD a document supposedly respects.
For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects. Once a user agent has recognized a correct DOCTYPE, it will trigger the no-quirks mode matching this DOCTYPE for reading the document. Otherwise, it will trigger the quirks mode.
The DOCTYPE declaration for the HTML5 standards is <!DOCTYPE html>.

They are key-value storage mechanisms on the client-side. They are only able to store values as strings.

cookie localStorage sessionStorage
Initiator Client or server. Server can use Set-cookie header Client Client
Expiry Manually set Forever On tab close
Persistent across browser sessions Depends on whether expiration is set Yes No
Sent to server with every HTTP request Cookies are automatically being sent via cookie header No No
Capacity (per domain) 4kb 5MB 5MB
Accessibility Any window Any window Same tab

Note: If the user decides to clear browsing data via whatever mechanism provided by the browser, this will clear out any cookie, localStorage, or sessionStorage stored. It’s important to keep this in mind when designing for local persistence, especially when comparing to alternatives such as server-side storing in a database or similar.

What are data- attributes good for?

Before JavaScript frameworks became popular, front end developers used data- attributes to store extra data within the DOM itself. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
These days, using data- attributes is generally not encouraged. One reason is that users can modify the data attribute easily by using inspect element in the browser. The data model is better stored within JavaScript itself and stay updated with the DOM via data binding possibly through a library or a framework.

What is progressive rendering?

Progressive rendering is the name given to techniques used to improve the performance of a webpage to render content for display as quickly as possible.
Examples of such techniques:

  • Lazy loading of images - Images on the page are not loaded all at once. JavaScript will be used to load an image when the user scrolls into the part of the page that displays the image.
  • Prioritizing visible content - Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the user’s browser first to display as quickly as possible, you can then use deferred scripts or listen for the DOMContentLoaded/load event to load in other resources and content.
  • Async HTML fragments - Flushing parts of the HTML to the browser as the page is constructed on the back end.

Explain meta tags in HTML

  • Meta tags always go inside head tag of the HTML page
  • Meta tags are always passed as name/value pairs
  • Meta tags are not displayed on the page but intended for the browser
  • Meta tags can contain information about character encoding, description, title of the document etc.

What is the difference between span and div?

Div is a block element and span is an inline element.
It’s illegal to place a block element inside an inline element, and that while div can have a p tag, and a p tag can have a span, but span can’t have a div or p tag inside.

What is the difference between title and h1, b and strong, i and em ？

  • The title attribute has no clear meaning only to indicate a title, and H1 means a clear-cut title, which also has a great influence on the crawling of the page information;
  • Strong is the key content, with the meaning of tone enhancement, when using reading devices: strong will enhance, and b is to emphasize content.
  • i content is shown in italics, and em indicates emphasized text;

What’s new in HTML 5?

New Doctype

<!DOCTYPE html>

New Structure

  • <section> - to define sections of pages
  • <header> - defines the header of a page
  • <footer> - defines the footer of a page
  • <nav> - defines the navigation on a page
  • <article> - defines the article or primary content on a page
  • <aside> - defines extra content like a sidebar on a page
  • <figure> - defines images that annotate an article

New Inline Elements

These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time:

  • <mark> - to indicate content that is marked in some fashion
  • <time> - to indicate content that is a time or date
  • <meter> - to indicate content that is a fraction of a known range - such as disk usage
  • <progress> - to indicate the progress of a task towards completion

New Form Types

1
2
3
4
5
6
7
8
9
10
<input type="datetime">
<input type="datetime-local">
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="number">
<input type="range">
<input type="email">
<input type="url">

New Elements

There are a few exciting new elements in HTML 5:

  • <canvas> - an element to give you a drawing space in JavaScript on your Web pages. It can let you add images or graphs to tool tips or just create dynamic graphs on your Web pages, built on the fly.
  • <video> - add video to your Web pages with this simple tag.
  • <audio> - add sound to your Web pages with this simple tag.

You possibly still add the type attribute to your link and script tags.

1
2
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.

1
2
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

Make your content editable

The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.

1
2
3
4
5
6
<h2> To-Do List </h2>
<ul contenteditable="true">
  <li> Break mechanical cab driver. </li>
  <li> Drive to abandoned factory
  <li> Watch video of self </li>
</ul>

How to use Page Visibility API

1
2
3
4
5
6
7
8
9
10
document.addEventListener('visibilitychange', function () {
  // user leave current page
  if (document.visibilityState === 'hidden') {
    document.title = 'the page is invisible';
  }
  // user open or come back
  if (document.visibilityState === 'visible') {
    document.title = 'the page is visible';
  }
});

What kind of things must you be wary of when designing or developing for multilingual sites?

  • Use lang attribute in your HTML.
  • Directing users to their native language - Allow a user to change his country/language easily without hassle.
  • Text in images is not a scalable approach
  • Restrictive words/sentence length - Some content can be longer when written in another language. Be wary of layout or overflow issues in the design. It’s best to avoid designing where the amount of text would make or break a design.
  • Be mindful of how colors are perceived - Colors are perceived differently across languages and cultures.
  • Formatting dates and currencies - Calendar dates are sometimes presented in different ways.
  • Do not concatenate translated strings - Use a template string with parameters substitution for each language. Note that the position of the variable is different due to the grammar rules of the language.
  • 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.

Why is it generally a good idea to position CSS <link> between <head></head> and JS <script> just before </body>? Do you know any exceptions?

Putting <link> in the head is part of proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously; HTML creates the DOM and CSS creates the CSSOM. Both are needed to create the visuals in a website, allowing for a quick “first meaningful paint” timing. This progressive rendering is a category optimization sites are measured in their performance scores. Putting stylesheets near the bottom of the document is what prohibits progressive rendering in many browsers. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page. Other times there can be flashes of unstyled content, which can show a webpage with no styling applied.

Placing <script> just before </body>

<script> block HTML parsing while they are being downloaded and executed. Placing the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
An exception for positioning of <script> at the bottom is when your script contains document.write(), but these days it’s not a good practice to use document.write(). Also, placing <script> at the bottom means that the browser cannot start downloading the scripts until the entire document is parsed. This ensures your code that needs to manipulate DOM elements will not throw and error and halt the entire script. If you need to put <script> in the <head>, use the defer attribute, which will achieve the same effect of downloading and running the script only after the HTML is parsed.

What are defer and async attributes on a <script> tag?

If neither attribute is present, the script is downloaded and executed synchronously and will halt parsing of the document until it has finished executing. Scripts are downloaded and executed in the order they are encountered.
The defer attribute downloads the script while the document is still parsing but waits until the document has finished parsing before executing it, equivalent to executing inside a DOMContentLoaded event listener. defer scripts will execute in order.
The async attribute downloads the script during parsing the document but will pause the parser to execute the script before it has fully finished parsing. async scripts will not necessarily execute in order.
Note: both attributes must only be used if the script has a src attribute.

1
2
<script src="myscript.js" defer></script>
 <script src="myscript.js" async></script>

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.