HTML CheatSheet
📄 Table of Contents
- Introduction to HTML
- HTML vs HAML
- Why HTML5 over HTML4.0
- <!DOCTYPE html>
- <meta tags>
- HTML attributes
- HTML5 APIs (A-D-G-L-S-W)
- Block vs Inline
- Positioning (FARSI) in HTML
- Pseudo-classes vs Pseudo-elements
- HTML data-* Attributes
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬
◉ Introduction
- HTML 4.01 in 1999 …….HTML 5 in 2012.
- HTML specifies the CONTENT of the webpages.
→ CSS specifies the LAYOUT of the web pages.
→ JS specifies the BEHAVIOUR of web pages.
- HTML headings are defined with the
<h1>to<h6>tags.
◉ <!DOCTYPE html>
- NOT an HTML tag.
- It is an information ( a declaration) to the browser about what version the HTML is written in.
- The
<!DOCTYPE>declaration represents the document type, and helps browsers to display web pages correctly. - It must only appear once, at the top of the page (before any HTML tags).
- The
<!DOCTYPE>declaration is NOT case sensitive. - The
<!DOCTYPE>declaration for HTML5 is:
<!DOCTYPE html>anchor attributes
<a target=”_blank|_self|_parent|_top|framename”>
_blank => Opens the linked document in a new window or tab
_self= > Opens the linked document in the same frame as it was clicked (this is default)
_parent=> Opens the linked document in the parent frame
_top=> Opens the linked document in the full body of the window
attribute=”_blank” in html hyperlink => tells the browser to open a new window (or tab, if that’s the user’s preference) when that link is clicked.
<meta> elements
- provides metadata about the document.
- <meta> tag goes inside the HEAD element.
- is NOT displayed on the page, but is machine readable.
- is used by Search engines for SEO purposes.
- used to specify page description, keywords, author of the document, last modified, etc.
◉ HTLM 5 APIs
- Application Cache
- Drag & Drop
- Geolocation
- Local Storage
- Server-Sent Events
- Web-Worker
◉ Why HTML 5 over HTML 4.01
- 8 more semantic elements introduced
- <audio> <video> for media playback.
- <canvas> for 2D drawing.
- support for local Storage.
- Reduced the need for external plugins (like Flash)
- Better Error Handling
- Local SQL Database Support
- More Markup to replace scripting.
◉ Block vs Inline
Block
- block arranges elements within a page flow vertically ( from top to bottom).
- an element that takes up the full width available & has a line-break before & after it.
- <div> <p> <h1> <li>
Inline
- inline arranges elements within a page flow horizontally( from left to right).
- an inline element ONLY takes up as much width as necessary and doesn’t force line-breaks;
- <span> <a>
◉ Positioning ( f A R S I ) in HTML
To start with, create a parent container with 4 boxes side by side.
position: static
index.html
<div class=”parent”>
<div class=”box” id=”one”>One</div>
<div class=”box” id=”two”>Two</div>
<div class=”box” id=”three”>Three</div>
<div class=”box” id=”four”>Four</div>
</div>style.css
.parent {
border: 2px black dotted;
display: inline-block;
}.box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
}#two {
background: green;
}
Live code: JsBin
By default, position is set to static. It positions based on the layout in the flow.
What happens when we want to move the GreenBox but do not want to affect the layout around it?
position: relative
This is where position: relative comes in. Move the green box relative to its current position to 20px from the left and top without changing the layout around it. Thus, leaving a gap for the green box where it would have been had it not been position.
#two {
top: 20px;
left: 20px;
background: green;
position: relative;
}Live code: JsBin
Position: absolute is the opposite.
position: absolute
By applying position: absolute to the GreenBox, it will not leave any gap where it would have been. The position of the GreenBox is based on its parent position (the dotted border). Thus, moving 20px to the left and bottom from the top-left origin of the dotted border.
#two {
top: 20px;
left: 20px;
background: green;
position: absolute;
}Live code: JsBin
In a nutshell …
position: relativeplaces an element relative to its current position without changing the layout around it, whereasposition: absoluteplaces an element relative to its parent’s position and changing the layout around it.
always place your absolute positioned elements inside position:relative container so that ur absolute positioned element is relative to that relative positioned element else your element will fly.
HTML5 for the mobile web — forms and input types
The full list of input types which are particularly useful for mobile users is:
color date datetime datetime-locale mail month number range search tel time url week
Input type tel vs Input type number
The tel input type is very similar to the number input type. The main difference is in the numeric keypad that is displayed on some browsers.
For number a simple numeric keypad is shown, but for tel the user is presented with a virtual telephone keypad, complete with alphanumeric keys.
◉ Pseudo-classes
A pseudo-class is used to define a special state of an element.
Pseudo-class names are not case-sensitive.
Pseudo-classes can be combined with CSS classes:
- :first-child, :hover, :lang
- Anchor Pseudo-classes-> :link, :visited, :hover, :active
◉ Pseudo-elements
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
- p::first-line {} -> Style the first letter, or line, of an element
- ::first-letter{} ->
- ::before Pseudo-element-> Insert content before, or after, the content of an element
- ::after Pseudo-element->
◉ HTML data-* Attributes
Use the data-* attribute to embed custom data:
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>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.
◉ HTML Attributes
- autoComplete
- autofocus
- required
- download
- draggable = “ true”
- defer /async
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
Autofocus The autofocus attribute is a boolean attribute.
When present, it specifies that an <input> element should automatically get focus when the page loads.
required The required attribute is a boolean attribute.
◉ HTML vs HAML
- You are trying to compare Apples to Oranges. Browsers only understand HTML. HAML is just a templating language that gets transformed into HTML (e.g. same final output). If you find the HAML syntax to be easier than HTML then go for it. However IMHO — abstracting away what actual elements you are generating just makes applying CSS and doing JavaScript navigation that much more difficult.
- Technically speaking key differences are: Haml doesn’t have both start and end for each element like eRuby. eRuby syntax looks a lot like HTML and is thereby more HTML-like while Haml is more CSS-like. Haml uses indentation to nest tag elements whereas eRuby uses the same HTML representation.
- On Stackoverflow — HTML has 65k followers. You WILL get an answer, most likely many answers, in a very short amount of time. HAML has 157 followers. Simple math.
