My HTML5 Code Playbook

To insert BOILER PLATE CODE in-
VScode: press'!'
Atom: type html

!DOCTYPE html>
- tells browser which version of html we are using: HTML5 html4 doctype line is quite lengthy.
html lang="en">
- tells browser code enclosed in this tag is html code.
head>
- head contain metadata - machine readable info
meta charset="UTF-8">
- this means all text inside our webpage is encoded using UTF-8 encoding system
meta name="descriptiion" content="..."
- content written here will appear in description of website in browser/google search - this is how search engines work- scroll html of your website and look for certain meta tags to know what your website is about
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>Document/title>
-defines the document's title that is shown in a Browser's title bar or a page's tab-->
/head
- head close
body
- body- represents the content of an HTML document
/body
- body close
/html
- html close

hr tag

Color:

Headings tag

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

i tag v/s em tag

Visual result is, by default same but semantic meaning is different. em tag stress emphasis on text while i tag only styles it to differentiate from normal text. Example- "We had to do something about it" while a person/software is reading text he/she/it would pronounce 'had to' with an emphasis whereas same is not true with i tag

b tag v/s strong tag

b tag:

• physical state
• text stylistically different from normal text without conveying any special importance or relevance
• used when one wants to draw attention without increasing importance
• good practice to use class attribute with b tag in order to convey additional semantic information

• logical state
• represents text of certain importance

mark tag:represents text of certain relevance

em tag v/s strong tag

em tag: change meaning of sentence as spoken. e.g. I love carrots and I love carrots.
strong tag: draws attention + importance. e.g. Warning! This is very dangerous.

Unordered lists

Type attribute can be defined in both either ul tag or li tag

• disc (Default)
• circle
• square
• triangle (not supported by all browsers)

Ordered lists

Attributes-

1. reversed: numbered from high to low.
2. start="4": An integer to start counting from/ always an integer
3. type="a, A, 1, i, I
4. specified type is used for the entire list unless a different type attribute is used on an enclosed li element
5. for this list item it remains previous type

This one is reversed list

Description Lists

Cryptids of Cornwall:

Beast of Bodmin

A large feline inhabiting Bodmin Moor.

Morgawr

A sea serpent.

Owlman

A giant owl-like creature.

Image

Img attributes

• src- REQUIRED - contains the path to the image
• alt- alternative text to appear
Omitting alt indicates that the image is a key part of the content.
alt="" indicates that this image is not a key part of the content (it’s decoration or a tracking pixel), and that non-visual browsers may omit it
• height- intrinsic height of the image, in pixels.
  Must be an integer without a unit.
• width- intrinsic width of the image in pixels.
  Must be an integer without a unit.
• align- Aligns the image with its surrounding context.
  Use the float and/or vertical-align CSS properties instead
allowed values- top, left, right, bottom, middle
• border width of a border around the image.
  Use the border CSS property instead.
• hspace - number of pixels of white space on the left and right of the image.
  Use the margin CSS property instead.

img src=" " alt="kakashi" width="20%" height="30%" align="right" ->

no alt - means image is key part of webpage and not just decoration
img src="itachi.jpg" -for images saved to same directory where code is present

img src="/images/itachiblack.jpg" width="20%" height="40%" border="3" hspace="20%"
hspace can be used to give left and right margin to the image

Links- Anchor tag

Attributes- there are many

• href- URL that the hyperlink points to
• download- Prompts the user to save the linked URL instead of navigating to it

Text enclosed within anchor tag -->This link points to 'anchor' tag documentation of 'devdocs.io'

HTML Tables

Tables can be used in html for griding although we have better options and it is not recommended

By default- NO BORDER

Table attributes-

• align: values-l/r/c
• bgcolor: 6-digit hexadecimal RGB code, prefixed by a '#'
• border: defines, in pixels, the size of the frame surrounding the table. If set to 0, the frame attribute is set to void.
• cellspacing: the size of the space between two cells in a percentage value or pixels
• cellpadding: space between the content of a cell and its border, displayed or not
• width: defines the width of the table.

All these attributes are deprecated now

to sort an HTMLCollection of 'tr' elements --> Array.prototype.slice(), Array.prototype.sort(), Node.removeChild(), and Node.appendChild(), you can implement your own sort() function

HTML Forms

It represents a document section containing interactive controls for submitting information.

Attributes:

• action: URL that processes the form submission value can be overridden by a formaction attribute on a 'button', input type="submit", or input type="image" element. This attribute is ignored when method="dialog" is set.
• enctype:
• method: HTTP method to submit the form with
• target:
• nonvalidate:

Input element

input HTML element is used to create interactive controls for web-based forms in order to accept data from the user

NOTE: It is a html5 code playbook, created solely for learning purpose and does contain deprecated html elements and attributes. Since it is not a CSS codeplaybook so, I have just used it for basic styling and focus is given on html only.

Happy Learning!