Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/cheatsheet-lang/html

HTML Cheatsheet
https://github.com/cheatsheet-lang/html

cheatsheet hacktoberfest hacktoberfest2020 html html5

Last synced: 10 days ago
JSON representation

HTML Cheatsheet

Awesome Lists containing this project

README 

        
# HTML Cheatsheet



HTML Cheatsheet



## Headings



```html

HEADING1


HEADING2


HEADING3


HEADING4


HEADING5


HEADING6


```



## Font Style



```html

 emphaize 

 italics 

 bold 

strong

small

 striked text 

```



## Input



```html

 Defines single line text input field

 Defines password field

 Defines a checkbox  used for

input fields that should contain a color  input field

should contain date  email type input field

 defines file select field and browse button

 upload image  select month and year

 defines numeric input field

 defines a radio button  slider

control  defines a reset button that will reset all form

values to their default values  define search field

 defines button for submitting form data

 defines telephone number field  select

time(without timezone)  url address type input field

 select week and year

```



## Form



```html

*Note: name and id can be used for these tags, to access them uniquely



container to create HTML forms  defines input control,

depending on the attribute 'type'  defines a label for a

form element, according to 'for' attribute



defines dropdown list in the form



defines an option in the dropdown list

 defines a multiple line input field



group related elements in a form



defines caption for fieldset tag

.. specifies list of pre-defined

options for an input tag  used to represent result of a

calculation (for using this tag, you will have to use oninput attribute within

form tag)



used to group related options

```



## Break



```html




```



## Image



```html

You can add image if it is stored in your working space like this:



Or you can add image directly from your browser like this:



```



Output of 2nd method:



 



## Head



```html

 Container for metadata  The title of your project

 link to external style sheets  specify

the character set, page description, keywords, author of the document, and

viewport settings  used to define style information for a single

document  specifies the base URL and/or target for all relative

URLs in a page



define client-side JavaScripts

```



## Horizontal Ruler



```html



```



## Anchor



```html

link text Link to url

link text Link to your section

link text Opens your link in another tab in a browser

```



## Table



```html



Define a table



Define a table row



Define a table heading



Define a table data

```



## List



```html

    

    Defines an unordered list
    


      

      Defines an ordered list
      


    1. 

      Defines a list item
      


      

      Defines a description list
      


      

      Defines a term in a description list
      


      

      Describes the term in a description list

      ```
      


      ## Button
      


      ```html

       Defines a clickable button

      ```
      


      ## SVG
      


      ````html

       Container for SVG graphics ### Video tag ```html
      


        Video type not supported by this browser!
      


      ````
      


      ## Unordered List
      


      ```html

        

          
      • Item 1
        • 

          
      • Item 2
        • 

          
      • Item 3
        • 

      

      ```
      


      ## Ordered List
      


      ```html

        

          
      1. Item 1
        2. 

          
      2. Item 2
        3. 

          
      3. Item 3
        4. 

      

      ```
      


      ## HTML Semantics
      


      ```html
      


      Specifies a header for a document or section
      


      Specifies the main content of a document
      


      Defines a footer for a document or section
      


      Defines independent, self-contained content
      


      Defines content aside from the page content
      


      Specifies self-contained content
      


      Defines navigation links
      


      Defines a section in a document

      ```
      


      ## Semantic media Tags
      


      ````html

       Embeds annotated images, illustrations, photos, code, etc.

       For adding a caption/annotation to the .

       Responsive image insertion,allows developers to provide different images for different contexts.
      


      For embedding videos into a website.

         poster is the path to an image that’s displayed before the video plays.

         autoplay will start the video automatically.

         loop triggers whether the video should repeat or not.

         controls shows or hides the browser’s player buttons.
      


       For embedding audio into a website.

       Must be inside ,  or  to define the different versions of content.

      ```
      


      ## Audio
      


      ```html

       The HTML  element is used to embed sound content in documents.

      ```
      


      ## Scripting
      


      ```html

       Used with either the canvas scripting API or the WebGL API to draw graphics and animations.

       Defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

      ````
      


      ### Emojis
      


      ```html

      😀 😄 😍 💗
      

      ```
      


      Output:

      😀 😄 😍 💗
      


      > For Emoji Unicode refer _[this](https://www.w3schools.com/charsets/ref_emoji.asp)_.