├── README.md ├── cheatsheet.html └── sub.html /README.md: -------------------------------------------------------------------------------- 1 | # HTML Cheatsheet 2 | 3 | HTML Cheatsheet 4 | 5 | ## Headings 6 | 7 | ```html 8 |

HEADING1

9 |

HEADING2

10 |

HEADING3

11 |

HEADING4

12 |
HEADING5
13 |
HEADING6
14 | ``` 15 | 16 | ## Font Style 17 | 18 | ```html 19 | emphaize 20 | italics 21 | bold 22 | strong 23 | small 24 | striked text 25 | ``` 26 | 27 | ## Input 28 | 29 | ```html 30 | Defines single line text input field 31 | Defines password field 32 | Defines a checkbox used for 33 | input fields that should contain a color input field 34 | should contain date email type input field 35 | defines file select field and browse button 36 | upload image select month and year 37 | defines numeric input field 38 | defines a radio button slider 39 | control defines a reset button that will reset all form 40 | values to their default values define search field 41 | defines button for submitting form data 42 | defines telephone number field select 43 | time(without timezone) url address type input field 44 | select week and year 45 | ``` 46 | 47 | ## Form 48 | 49 | ```html 50 | *Note: name and id can be used for these tags, to access them uniquely 51 |
52 | container to create HTML forms defines input control, 53 | depending on the attribute 'type' defines a label for a 54 | form element, according to 'for' attribute 55 | 56 | defines dropdown list in the form 57 | 58 | defines an option in the dropdown list 59 | defines a multiple line input field 60 |
61 | group related elements in a form 62 | 63 | defines caption for fieldset tag 64 | specifies list of pre-defined 65 | options for an input tag used to represent result of a 66 | calculation (for using this tag, you will have to use oninput attribute within 67 | form tag) 68 | 69 | used to group related options 70 | ``` 71 | 72 | ## Break 73 | 74 | ```html 75 |
76 | ``` 77 | 78 | ## Image 79 | 80 | ```html 81 | You can add image if it is stored in your working space like this: 82 | 83 | Or you can add image directly from your browser like this: 84 | 89 | ``` 90 | 91 | Output of 2nd method: 92 | 93 | 94 | 95 | ## Head 96 | 97 | ```html 98 | Container for metadata The title of your project 99 | link to external style sheets specify 100 | the character set, page description, keywords, author of the document, and 101 | viewport settings used to define style information for a single 102 | document specifies the base URL and/or target for all relative 103 | URLs in a page 104 | 105 | define client-side JavaScripts 106 | ``` 107 | 108 | ## Horizontal Ruler 109 | 110 | ```html 111 |
112 | ``` 113 | 114 | ## Anchor 115 | 116 | ```html 117 | link text Link to url 118 | link text Link to your section 119 | link text Opens your link in another tab in a browser 120 | ``` 121 | 122 | ## Table 123 | 124 | ```html 125 |
126 | Define a table 127 | 128 | 129 | Define a table row 130 | 131 | 132 | Define a table heading 133 | 134 | 135 | Define a table data 136 | ``` 137 | 138 | ## List 139 | 140 | ```html 141 | 142 | Defines an unordered list 143 | 144 |
    145 | Defines an ordered list 146 | 147 |
  1. 148 | Defines a list item 149 | 150 |
    151 | Defines a description list 152 | 153 |
    154 | Defines a term in a description list 155 | 156 |
    157 | Describes the term in a description list 158 | ``` 159 | 160 | ## Button 161 | 162 | ```html 163 | Defines a clickable button 164 | ``` 165 | 166 | ## SVG 167 | 168 | ````html 169 | Container for SVG graphics ### Video tag ```html 170 | 173 | ```` 174 | 175 | ## Unordered List 176 | 177 | ```html 178 | 183 | ``` 184 | 185 | 186 | ## Ordered List 187 | 188 | ```html 189 |
      190 |
    1. Item 1
      2. 191 |
    2. Item 2
      3. 192 |
    3. Item 3
      4. 193 |
    194 | ``` 195 | 196 | ## HTML Semantics 197 | 198 | ```html 199 |
    200 | Specifies a header for a document or section 201 | 202 |
    203 | Specifies the main content of a document 204 | 205 | 206 | Defines a footer for a document or section 207 | 208 |
    209 | Defines independent, self-contained content 210 | 211 | 212 | Defines content aside from the page content 213 | 214 |
    215 | Specifies self-contained content 216 | 217 | 218 | Defines navigation links 219 | 220 |
    221 | Defines a section in a document 222 | ``` 223 | 224 | ## Semantic media Tags 225 | 226 | ````html 227 |
    Embeds annotated images, illustrations, photos, code, etc. 228 |
    For adding a caption/annotation to the
    . 229 | Responsive image insertion,allows developers to provide different images for different contexts. 230 | 231 | For embedding videos into a website. 232 | poster is the path to an image that’s displayed before the video plays. 233 | autoplay will start the video automatically. 234 | loop triggers whether the video should repeat or not. 235 | controls shows or hides the browser’s player buttons. 236 | 237 | For embedding audio into a website. 238 | Must be inside ,