html-tutorial/basic tags and function each tag.txt at main · jaynarayan-vaishnav/html-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
(<!-- -->)inside the bracket is a comment tag used to write comments wherever necessary
 <!DOCTYPE html> declaration is an instruction to the web browser about what version of HTML the page is written in (for e.g what version of html is)

<html> </html>:- This tag informs the browser that it is an HTML document. Text between html tag describes the web document.
It is a container for all other elements of HTML except <!DOCTYPE>

<head> </head>:- The <head> HTML element contains machine-readable information (metadata) about the document,
like its title, scripts, and style sheets.

<meta charset="utf-8"> — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it.
 There is no reason not to set this and it can help avoid some problems later on.

<body></body> — the <body> element. This contains all the content that you want to show to web users when they visit your page,
 whether that's text, images, videos, games, playable audio tracks, or whatever else.

<img src="source of the img" alt="displays the text when image is broken(text should be about image i.e. action,thing etc)"> - it is a self closing tag.

<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
<h5>...</h5>
<h6>...</h6>
Note: You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO.
Try to create a meaningful sequence of headings on your pages, without skipping levels.

<p> </p> - elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content

list - there are two types of lists
ordered(represents data by number)<ol>
unordered(represents in bullet point form)<ul>
both these lists use <li> </li> tag to specify the content to be placed in the list.
for e.g:- <ol>
            <li> </li>
            <li> </li>
          </ol>
          same example can be used for <uL> </ul>

Links
Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — <a> — "a" being the short form for "anchor". To make text within your paragraph into a link.
<a href="post the link location/link in href attribute">html(here html will turn into a link and go to the address used in href attribute)</a>
You might get unexpected results if you omit the https:// or http:// part, called the protocol, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.
there are two types of links relative and absolute
relative - it is used to locate and navigate files in the project folder.
absolute - can be used as relative as well as when we want a link from outside of our project

<section></section>:-
this tag divides the function of the html into small parts like (in a program with big code base every function plays part of that codebase)you can link it to the section tag.

<button>:-
used to create buttons.
you can add the type=""

<label></label>
used to for placing the info written by the user in a form.
can use placeholder = "" as well as type =""

<legend></legend>
It gives heading to subsection of the form elements.

finally all basic html elements are completed.

 best practices:-
  1. you can use the <!DOCTYPE html> tag to make sure your web pages are valid and render correctly in all major web browsers.
  2. you can use the <meta charset="utf-8"> tag to make sure your web pages are valid and render correctly in all major web browsers.
  3. you can use the <title> tag to give your web page a title.
  4. you can use the <h1> tag to give your web page a heading.
  5. you can use the <p> tag to give your web page a paragraph.
  6. you can use the <a> tag to make a link.
  7. you can use the <img> tag to make an image.
  8. you can use the <ul> tag to make an unordered list.
  9. you can use the <ol> tag to make an ordered list.
  10. you can use the <li> tag to make a list item.
  11. you can use the <section> tag to divide your web page into sections.
  12. you can use the <button> tag to create a button.
  13. you can use the <label> tag to create a label.
  14. you can use the <legend> tag to create a legend (where it basically gives heading to the labels).
  15. you can use the <form> tag to create a form.
  16. you can use the <input> tag to create an input.
  17. you can use the <select> tag to create a select.
  18. you can use the <option> tag to create an option.
  19. you can use the <textarea> tag to create a textarea.
  20. you can use the <style> tag to create a style.
  21. you can use the <script> tag to create a script.
  22. you can use the <a> tag to create a link in between of the <p> element.
  23. you can use the <img> tag to create an image in between of the <p> element.
  24. you can use the <a> tag to make an image into a link in the <img> element.