HTML
new input attributes
- autocomplete - autofocus - formaction - formenctype - formmethod - formtarget - height and width - list - min and max - multiple - pattern (regexp) - placeholder - required - step
new input types
- color - date - datetime - datetime-local - email - month - number - range - search - tel - time - url - week
What is new in HTML5?
1. DOCTYPE declaration is very simple 2. character encoding (charset) declaration is also very simple 3. new semantic elements: <header>, <footer>, <article>, <section> 4. new attributes of form elements: number, date, time, calendar, and range 5. new graphic elements: <svg>, <canvas> 6. new multimedia elements: <audio>, <video>
new HTML5 APIs
1. HTML geolocation 2. HTML drag and drop 3. HTML local storage (powerful replacement for cookies) 4. HTML Application cache 5. HTML web workers 6. HTML SSE
how does HTML comment look like?
<!-- this is a comment -->
new semantic elements in HTML5
<article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> section> <summary> <time>
HTML5 new media elements
<audio> defines sound content <embed> defines a container for an external (non-HTML) application <source> defines multiple media resources for media elements (<video> and <audio>) <track> specifies text tracks for media elements. this element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.
<b> and <strong>
<b> defines bold text, without any extra importance <strong> defines strong text, with added semantic "strong" importance (but visually they look the same) <strong> => the text is "important"
<i> and <em>
<i> defines italic text, without any extra importance <em> defines emphasized text, with added semantic importance
new semantic/ structural elements
<nav> define navigation links <main> the main content of a document <meter> defines a scalar measurement within a known range (a gauge) (<meter value="2" min="0" max="10">2 out of 10</meter><meter value="0.6">60%</meter>) <progress> represents the progress of a task (<progress value="22" max="100">) <summary> defines a visible heading for the <details> element. The heading can be clicked to view/ hide the details.
difference between <q> and <blockquote> ?
<q>: browsers usually add quotation mark around text <blockquote>: browsers usually indent text
HTML Lists
<ul> = unordered/ bullet list <ol> = ordered/ numbered list <li> = list items
HTML Attribute
All HTML elements can have attributes Attributes provide additional information about an element always specified in the start tag usually come in name/ value pairs like *name="value"*
<pre>
Defines preformatted text (so the space will still be there)
<img>
HTML images source file (src) alternative text(alt) width, height
HTML colors
RGB values (red, green, blue) HEX values HSL values (hue, saturation, lightness) RGBA values HSLA values
<abbr>
defines an abbreviation or an acronym. (dotted underline) can give useful information to browsers, translation systems and search-engines. replace <acronym>
<address>
defines contact information (autor/ owner) of a document or an article. usually displayed in italic. Most browsers will add a line break before and after the element.
<aside> (and the migration of HTML4 to HTML5)
defines some content aside from the content it is placed in (like a sidebar) should be related to the surrounding content
text-align
defines the *horizontal* text alignment for an HTML element
font-family
defines the font to be used for an HTML element
<cite>
defines the title of a work (i.g a piece of artwork). usually display in italic.
<del>
deleted/ removed text (one cross line)
<ins>
inserted/ added text (underline)
meter v.s progress
meter: changes color according to value progress: same color all the way
how to make color "tomato" but 50% transparent?
rgba(255, 99, 71, 0.5) hsla(9, 100%, 64%, 0.5)
<html>
root element of an HTML page
What are semantic elements?
semantic elements clearly describes its meaning to both the browser and the developer. non-semantic: <div> and <span> semantic: <form>, <table>, <article>
<q>
short quotations browsers insert quotation marks around the q element
HTML title attribues
specifies extra information about an element (*displayed as a tool tip*)
<sub>
subscripted text (like subscription)
<sup>
superscripted text (opposite to <sub>)
lang
the language of the document can be declared in the <html> tag. <html lang="en-US">
<body>
the visible part of the HTML document is between <body> and </body>
Inspect an HTML element
Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
<head>
a container for metadata. metadata is data about the HTML document; is not displayed.
<bdo>
bi-directional override line will be written from right to left (*rtl*) <bdo dir="rtl">some text<bdo>
<!DOCTYPE html>
declaration defines this document to be HTML5 not case sensitive <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
<blockquote>
defines a section that is quoted from another source. browsers usually indent blockquote elements.
<hr>
defines a thematic brak in an HTML page, and is most often displayed as a horizontal rule. often used to separate content (or define a change) in an HTML
<mark>
highlighted text