html-faq

Posted on Edited on In
Frequent HTML questions

FAQ

Html attribute vs CSS property

HTML attribute defines the information about html, Tags are different, some are for img, some for text,so the attributes are grouped into two parts, one is global attributes, the other is tag related,you can set global attributes for any tag, while tag related is only valid for that kind of tag, let’s say you can’t set href attribute for a h1, browser thinks it’s invalid.

CSS property is different thing, it’s defined by CSS, every html element can set any CSS property for itself, CSS property is inside style attribute of CSS tag for inline style, see below example

CSS property’s value if not set could be

  • default value
  • inherited from its parent

Tag attribute value is empty if not set.

1
2
<!--style is tag attribute while color, text-algin are css properties-->
<h1 class='h1' style="color:blue;text-align:center">This is a header</h1>

custom tag

There are two ways to create a custom tag, one is by js, the other is in html directly

1
2
3
4
5
6
7
8
9
10
11
<style>
s_tag[test_attr]{
  color: green;
  display: block;
}
</style>
<div style="color:red">
  <s_tag style="color: blue">hi1</s_tag>
  <s_tag>hi2</s_tag>
  <s_tag test_attr="cool">h3</s_tag>
</div>

How browser renders a custom tag
Browser first checks the global attributes as every element can set it and browser knows how to handle such attributes, for other custom attributes, browser does NOT know how to use it, it’s totally used by user, then browser checks the CSS style for the custom element, property value if not set use default value or inherited from its parent.

Note: custom tag with display:inline by default, it’s inline element

custom attribute to built-in tag

The data-* attributes is used to store custom data private to the page or application, the data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page’s JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).
The data- attributes consist of two parts:*

  • The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
  • The attribute value can be any string

Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent.

object vs embed vs video/audio

The HTML <video> element is used to show a video on a web page by browser built-in player, it’s new feature by HTML5, same thing for <audio> as well.

But <object> and <embed> calls plugins to display them, supported long time, hence for a video, we should write in this way

1
2
3
4
5
6
7
 <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <!--fallback to old way-->
  <embed type="video/webm" src="movie.mp4">
Your browser does not support the video tag.
</video>

select vs datalist

The <select> element defines a drop-down list, used for selecting pre-defined data

1
2
3
4
5
6
7
8
9
10
11
<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <!-- data list for select element -->
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit">
</form>

The <datalist> element specifies a list of pre-defined options for an <input> element, used for show search history

1
2
3
4
5
6
7
8
9
10
11
12
<form action="/action_page.php">
  <!--data list for input element with list attribute-->
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

AJAX vs SSE vs WebSocket

AJAX
An AJAX request is built around the typical HTTP model(HTTP request/response Restful API). A request is made by a client and a response is generated by a server, it’s client driven, Each request creates a new HTTP request in the background

Data is transmitted o each HTTP connection based on HTTP protocol.

WebSocket
WebSockets are based around an event model. The client and server can emit events and send data to each other whenever they need to, Bi-direction communication, lets say there are 3 users working on a project together; user A, B, and C. User A can update the project by emitting an event to the server. The server can in turn emit an event to user B, and C, informing them that a change has happened and at the same time sending them data about the change. Their browser can then use that data to update their web page.

WebSockets have to establish a connection to a server for data to flow. WebSockets only establish this connection once, then all data is sent over this open WS protocol connection. This means each event being send takes very little resources from both the server and the client because a new connection never has to be established, and ws protocol is small.

It uses HTTP protocol to setup the connection, then switch to WS protocol for data transmission. hence it’s faster.

Difference between Ajax and WebSocket

  • Web sockets are used to define full duplex communication between different servers and clients. It acts as a means of communication between both these sources and makes an exchange of data possible between them. Web sockets focus upon true concurrency and optimization of performance.

  • AJAX is an abbreviation for Asynchronous JavaScript and XML. Ajax can be considered as a technology which can be used to create better faster and more interactive applications using XML, HTML, CSS, and JavaScript. Ajax makes use of XHTML, CSS, Document Object Model and JavaScript for dynamic content display.

  • The distinguishing features of web sockets are as below:

    • The protocol that is being used by web sockets is standardized which enables real-time communication between the different clients and servers.
    • Web sockets help to transform the cross-platform standard for real-time communication between client and server.
    • As there is a pre-defined standard it enables to create new kind of applications. Businesses for real-time web applications can be created speedily. The biggest advantage is that it provides a two-way communication between client and server over a single TCP connection

  • Ajax Features

    • Ajax uses different technologies to create the best dynamic pages. It uses XHTML for content, CSS for making presentations look great, document object model and JavaScript for making pages dynamic.
    • With Ajax, once you submit a form JavaScript makes a request to the server, finds the result and updates the screen. It is never known to the user that there was information transmitted to the server but there actually is information being transmitted.
    • It also uses XML to format data from receiving server.
    • It can also be called a web browser which is independent of the web server technology being used. Also, a user can work continuously when a client program is requesting information from the server in the background.

  • When it comes to Web Socket events there are mainly four events. They are:

    • Open: acts as a handshake between client and server
    • Message: happens when the server sends some data. Messages can be plain text messages or binary data
    • Close: This marks the end of communication between server and client.
    • Error: When an error occurs, when a communication channel is opened then the error event occurs

  • Ajax also supports events and actions. The steps that happen when an event occurs are as below:

    • A XMLHttpRequest object is created.
    • This object is then configured.
    • The object then makes an asynchronous request to the webserver.
    • The web server returns results which contain the XML document.
    • The object calls the callback() function and processes the result.
    • Once all this is done the HTML DOM is updated.

  • AJax is more secure than Websocket.

So if you need bi-direction, low latency, real-time, use WebSocket, otherwise Ajax, but Ajax is driven by client, so server wants to notify update to client like upgrade notification, stock price etc, Ajax can’t do, hence SSE comes into play.

SSE
Server-Sent Events (SSE) allow a web page to get updates from a server. One-way Messaging
A server-sent event is when a web page automatically gets updates from a server.

This was also possible before, but the web page would have to ask if any updates were available(ajax poll). With server-sent events, the updates come automatically.

Suggestion: Traditional Way, AJAX + SSE, if need low latency, real-time, WebSocket which is new.

how dom event works

The event object is created when the event first happens; it travels with the event on its journey through the DOM. We can use this object to access a wealth of information about the event that has occurred:

  • type (string) This is the name of the event.
  • target (node) This is the DOM node where the event originated.
  • currentTarget (node) This is the DOM node that the event callback is currently firing on.
  • bubbles (boolean) This indicates whether this is a “bubbling” event.
  • preventDefault (function) This prevents any default behavior from occurring that the user agent (i.e. browser) might carry out in relation to the event (for example, preventing a click event on an <a> element from loading a new page).
  • stopPropagation (function) This prevents any callbacks from being fired on any nodes further along the event chain, but it does not prevent any additional callbacks of the same event name from being fired on the current node.
  • stopImmediatePropagation (function) This prevents any callbacks from being fired on any nodes further along the event chain, including any additional callbacks of the same event name on the current node.
  • cancelable (boolean) This indicates whether the default behavior of this event can be prevented by calling the event.preventDefault method.
  • defaultPrevented (boolean) This states whether the preventDefault method has been called on the event object.
  • isTrusted (boolean) An event is said to be “trusted” when it originates from the device itself, not synthesized from within JavaScript.
  • eventPhase (number) This number represents the phase that the event is currently in: none (0), capture (1), target (2) or bubbling (3). We’ll go over event phases next.
  • timestamp (number) This is the date on which the event occurred.

Event Phase
the event flows from the document’s root to the target (i.e. capture phase), then fires on the event target (target phase), then flows back to the document’s root (bubbling phase)

Event Phase

Capture Phase
The first phase is the capture phase. The event starts its journey at the root of the document, working its way down through each layer of the DOM, firing on each node until it reaches the event target. The job of the capture phase is to build the propagation path, which the event will travel back through in the bubbling phase.

Target Phase
An event reaching the target is known as the target phase. The event fires on the target node, before reversing and retracing its steps, propagating back to the outermost document level.

In the case of nested elements, mouse and pointer events are always targeted at the most deeply nested element. If you have listened for a click event on a <div> element, and the user actually clicks on a <p> element in the div, then the <p> element will become the event target.

Bubbling Phase
After an event has fired on the target, it doesn’t stop there. It bubbles up (or propagates) through the DOM until it reaches the document’s root. This means that the same event is fired on the target’s parent node, followed by the parent’s parent, continuing until there is no parent to pass the event onto.

Note: Most of callback are at Bubbling Phase

why $ is not defined in your script

Make sure load your script after jquery.

After move a button(negative margin), it can NOT be clicked

This is because after move, button and other tag overlaps, while other tag at the top, in order to make it clickable, change its z-index to high value

1
2
3
.button {
    z-index: 100;
}

Ref