[html & css] Some extraordinary things i've seen on Internet #html #css

html-and-css.md

Differences between innerHTML, innerText and textContent

<p>This element has extra spacing and containes <span>a span element</span>.</p>

• innerHTML: the text content of the element, including spaces and inner HTML tags. Output: This element has extra spacing and contains <span>a span element</span>.

• innerText: the text content of the element and its children, without spaces* and without tags. Output: This element has extra spacing and contains a span element.

• textContent: the text content of the element and its descendants, with spaces, but without tags.

Note: children and descendents are very different!

Note 2: innerHTML can lead to SQL injection, it's like eval of HTML, very dangerous.

rel attribute in tag

You can specify multiple attribute value by spaces e.g. <link rel="shortcut icon"/>

target attribute in tag

_blank: open in new window or tab _self: open in the same frame as it was clicked (default), used to navigate to different heading inside the page

tag

Used to group and apply CSS styles to small pieces of text or other inline elements, without affecting the structure or layout of the surrounding content. E.g. <h1>about <span>us</span></h1>

Inside index.css:

h1 span {
	color: red;
}

HTML Symbols

©: copyright symbol

HTML Entities

Display reserved words  : non-blocking space, use to:

• seperate two words, but don't break them into newline.
• avoid truncating spaces automatically.

Focus on a non-focusable element

Heading elements like h1, h2, ... aren't usually focusable.

=> Adding the attribute tabindex="-1"

Note: the means only focusable with JS

Label and input goes together

<input id="todo-0"/>
<label htmlFor="todo-0"></label>

Initiate a label relationship between element

<h1 id="abc"></h1>
<ul aria-labelledby="abc"></ul>

Assistive technology

aria-pressed attribute: tell AT that this button is checked.

visually-hidden CSS class: any element with this class will be hidden from sighted users but still available to screen reader users.

aria-labelledby attribute: tells AT that we're treating our <h1 id="abc"> as the label that describes the purpose of the element that use this attribute.

defaultChecked attribute

Tells React to check the checkbox initially. Don't use checked since it produces some warnings regarding to handling events on the checkbox.

React <-> HTML mapping

className ===> class htmlFor ===> for