HTML BULLETS

1.ON THE HEADER TAGS!

This is just the beginning of my practice, we'll go more reactive and responsive over the courses.

Meta tag - in html, meta tag describes what your website is about i.e gives info about your page!

the syntax 1 is < meta name = ' ' content = " >(btw this does not have a closing tag) this what loads down to your website url on google! " description --> you can add multiple names and contents in meta tag to describe your website more in detail.

the syntax 2 is < meta charset=" utf-8"> just tells us what characters are being used!

the syntax 3 is < meta name= "robots" content="(no)index,(no)follow" > helps the webcrawler to index your webpage on the search and follow helps crawler to follow all the links in your website.

imp syntax 4 is < meta name ="viewport" content="width=device-width, initial-scale=1"> allows to view your site on device used perfectly.

< link rel= "icon" href="" > is used in head tags usually

2.ON BODY TAGS!

1.< img src="" alt="" height="" width="">

2.a.< video> height= "" width = "" src="" < /video> (we dont use alt attribure in video tag! )

2.b. If you have multiple sources i.e you dont know exactly the type of video,
< video height="" width=""> < source src="" type="video/mp4"> < source src="" type="video/obb"> < source src="" type="video/gif"> < /video>

3.< a target="_blank" href="" >text goes here < /a>
You can add image in place of text in anchor tag by nesting img tag in anchor tag!
< a href="" download >< /a> allows to download when the user clicks on the hyperlink.

4.Forms
< form >
< label for="id1">input1 < /label>
< input required type="textemailpassword" id="id1" maxlength="" minlength="" />
spellcheck="trueorfalse" attribute in input tag helps to check the spelling of the input entered.
Its important to have label tag above input tag
< button type="submit">submit< /button>
< /form>

5.DropDown
< select name="" id="" >
< option value="val1"> OPt1< /option> (when form is submitted value of option1 is selected, not opt1,, name is give on select tag!)
< option> OPt2< /option>
< option> OPt3< /option>
< /select>
6.Radio Buttons
< input type="radio" name="productslist" value="product1">
< input type="radio" name="productslist" value="product2">
< input type="radio" name="productslist" value="product3">
You can see the name of the options available is same but the value of the options change and thats what gets submitted!

7.Lists
7.a.UnOrdered Lists - gives us a .
< ul>
< li> item 1< /li>(list item)
< li> item 2< /li> < /ul>
7.b.Ordered List
< ol>
< ol>Chapter 1
< li>C1S1< /li>
< li>C!S2< /li>
< /ol>
< /ol>
You can also add anchor tag in listitem.

8.Tables < table> < tr >
< th>
< th>
< th>
< /tr>
< tr>
< td>
< td>
< td>

< tr>
< td>
< td>
< td>

< /table> output table:

Cycle	Season	Month
1	1	1
2	2	2

9.Id and classes
ID has to be unique but class can be named to multiple tags for ease in css and js manipulation.
When to use Id and when to use class? - Depends on the importance and uniqueness of the content inside the tag!

10.Div and Span Tags(Non-Semantic Elements)
These does not describe anything about the content.
Span is an inline element.
Eg: My name is < span id="" class=""> Bharath< /span> --> you can just change style of a word in a line by using span by not changing style of the complete line.
DIV is a block level element that always starts in a new line. This takes full width available on the screen(from extreme left to possible right).
Div can be considered as a container in which you can have some content.
usually Div and span will have attributes: style, id, class

11.Semantic Elements.
These clearly define meaning to the browser and the developer. eg: forms, tables, articles...
Usually developers used to use < div id="header" id="nav" id=" footer"> to describe header, footer and navigation sections. But using semantic elemets, you can have header footer nav without a div element.
Some of the important semantic elements used are listed below.

Element Name	use of the element
Section	Used for grouping of content that has a heading! Eg.Chapters, Contact Info..etc
Article	Independent, self-contatined content Eg.Blogs, Newspaper content, Forums
Nav	All the navigation links can be placed under nav tag
Footer	All the footer elements
Header	All the header elements

12.HTML Entities.
You can not use reserved keywords like < > as it will be considered as a tag in html by browser. So, you need some entities to use the resevered characters in your text.
space- & nbsp ;
< - & lt ;
>-& gt ;
&(ampersand)-& amp ;
'(singlequotaion/apostrophe)-& apos ;
"(double quoation) - & quot ;