{"id":19123947,"url":"https://github.com/cheatsheet-lang/html","last_synced_at":"2025-02-22T13:55:11.478Z","repository":{"id":46666779,"uuid":"301687499","full_name":"Cheatsheet-lang/HTML","owner":"Cheatsheet-lang","description":"HTML Cheatsheet","archived":false,"fork":false,"pushed_at":"2024-03-11T19:24:47.000Z","size":59,"stargazers_count":28,"open_issues_count":2,"forks_count":21,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-03T09:16:55.941Z","etag":null,"topics":["cheatsheet","hacktoberfest","hacktoberfest2020","html","html5"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cheatsheet-lang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-06T10:16:13.000Z","updated_at":"2024-12-31T17:36:43.000Z","dependencies_parsed_at":"2022-09-21T18:52:34.126Z","dependency_job_id":null,"html_url":"https://github.com/Cheatsheet-lang/HTML","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cheatsheet-lang%2FHTML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cheatsheet-lang%2FHTML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cheatsheet-lang%2FHTML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cheatsheet-lang%2FHTML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cheatsheet-lang","download_url":"https://codeload.github.com/Cheatsheet-lang/HTML/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240183755,"owners_count":19761437,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cheatsheet","hacktoberfest","hacktoberfest2020","html","html5"],"created_at":"2024-11-09T05:27:43.964Z","updated_at":"2025-02-22T13:55:11.455Z","avatar_url":"https://github.com/Cheatsheet-lang.png","language":"HTML","readme":"# HTML Cheatsheet\n\nHTML Cheatsheet\n\n## Headings\n\n```html\n\u003ch1\u003eHEADING1\u003c/h1\u003e\n\u003ch2\u003eHEADING2\u003c/h2\u003e\n\u003ch3\u003eHEADING3\u003c/h3\u003e\n\u003ch4\u003eHEADING4\u003c/h4\u003e\n\u003ch5\u003eHEADING5\u003c/h5\u003e\n\u003ch6\u003eHEADING6\u003c/h6\u003e\n```\n\n## Font Style\n\n```html\n\u003cem\u003e emphaize \u003c/em\u003e\n\u003ci\u003e italics \u003c/i\u003e\n\u003cb\u003e bold \u003c/b\u003e\n\u003cstrong\u003estrong\u003c/strong\u003e\n\u003csmall\u003esmall\u003c/small\u003e\n\u003cstrike\u003e striked text \u003c/strike\u003e\n```\n\n## Input\n\n```html\n\u003cinput type=\"text\" /\u003e Defines single line text input field\n\u003cinput type=\"password\" /\u003e Defines password field\n\u003cinput type=\"checkbox\" /\u003e Defines a checkbox \u003cinput type=\"color\" /\u003e used for\ninput fields that should contain a color \u003cinput type=\"date\" /\u003e input field\nshould contain date \u003cinput type=\"email\" /\u003e email type input field\n\u003cinput type=\"file\" /\u003e defines file select field and browse button\n\u003cinput type=\"image\" /\u003e upload image \u003cinput type=\"month\" /\u003e select month and year\n\u003cinput type=\"number\" /\u003e defines numeric input field\n\u003cinput type=\"radio\" /\u003e defines a radio button \u003cinput type=\"range\" /\u003e slider\ncontrol \u003cinput type=\"reset\" /\u003e defines a reset button that will reset all form\nvalues to their default values \u003cinput type=\"search\" /\u003e define search field\n\u003cinput type=\"submit\" /\u003e defines button for submitting form data\n\u003cinput type=\"tel\" /\u003e defines telephone number field \u003cinput type=\"time\" /\u003e select\ntime(without timezone) \u003cinput type=\"url\" /\u003e url address type input field\n\u003cinput type=\"week\" /\u003e select week and year\n```\n\n## Form\n\n```html\n*Note: name and id can be used for these tags, to access them uniquely\n\u003cform action=\"\" method=\"\" target=\"\"\u003e\u003c/form\u003e\ncontainer to create HTML forms \u003cinput type=\"\" /\u003e defines input control,\ndepending on the attribute 'type' \u003clabel for=\"\"\u003e\u003c/label\u003e defines a label for a\nform element, according to 'for' attribute\n\u003cselect\u003e\u003c/select\u003e\ndefines dropdown list in the form\n\u003coption value=\"\"\u003e\u003c/option\u003e\ndefines an option in the dropdown list\n\u003ctextarea rows=\"\" cols=\"\"\u003e\u003c/textarea\u003e defines a multiple line input field\n\u003cfieldset\u003e\u003c/fieldset\u003e\ngroup related elements in a form\n\u003clegend\u003e\u003c/legend\u003e\ndefines caption for fieldset tag\n\u003cdatalist\u003e\u003coption value=\"\"\u003e..\u003c/option\u003e\u003c/datalist\u003e specifies list of pre-defined\noptions for an input tag \u003coutput\u003e\u003c/output\u003e used to represent result of a\ncalculation (for using this tag, you will have to use oninput attribute within\nform tag)\n\u003coptgroup\u003e\u003c/optgroup\u003e\nused to group related options\n```\n\n## Break\n\n```html\n\u003cbr /\u003e\n```\n\n## Image\n\n```html\nYou can add image if it is stored in your working space like this:\n\u003cimg src=\"img_girl.jpg\" width=\"400\" height=\"400\" /\u003e\nOr you can add image directly from your browser like this:\n\u003cimg\n  src=\"https://cdn.mos.cms.futurecdn.net/hFm4iWXhbw4c4rdcMH8tUD.jpg\"\n  width=\"400\"\n  height=\"400\"\n/\u003e\n```\n\nOutput of 2nd method:\n\n \u003cimg src=\"https://cdn.mos.cms.futurecdn.net/hFm4iWXhbw4c4rdcMH8tUD.jpg\"  width=\"400\" height=\"400\"\u003e\n\n## Head\n\n```html\n\u003chead\u003e\u003c/head\u003e Container for metadata \u003ctitle\u003e\u003c/title\u003e The title of your project\n\u003clink rel=\"stylesheet\" href=\"\" /\u003e link to external style sheets \u003cmeta /\u003e specify\nthe character set, page description, keywords, author of the document, and\nviewport settings \u003cstyle\u003e\u003c/style\u003e used to define style information for a single\ndocument \u003cbase href=\"\" /\u003e specifies the base URL and/or target for all relative\nURLs in a page\n\u003cscript\u003e\u003c/script\u003e\ndefine client-side JavaScripts\n```\n\n## Horizontal Ruler\n\n```html\n\u003chr /\u003e\n```\n\n## Anchor\n\n```html\n\u003ca href=\"url\"\u003elink text\u003c/a\u003e Link to url\n\u003ca href=\"#yourSection\"\u003elink text\u003c/a\u003e Link to your section\n\u003ca href=\"url\" target=\"_blanl\"\u003elink text\u003c/a\u003e Opens your link in another tab in a browser\n```\n\n## Table\n\n```html\n\u003ctable\u003e\u003c/table\u003e\nDefine a table\n\n\u003ctr\u003e\u003c/tr\u003e\nDefine a table row\n\n\u003cth\u003e\u003c/th\u003e\nDefine a table heading\n\n\u003ctd\u003e\u003c/td\u003e\nDefine a table data\n```\n\n## List\n\n```html\n\u003cul\u003e\u003c/ul\u003e\nDefines an unordered list\n\n\u003col\u003e\u003c/ol\u003e\nDefines an ordered list\n\n\u003cli\u003e\u003c/li\u003e\nDefines a list item\n\n\u003cdl\u003e\u003c/dl\u003e\nDefines a description list\n\n\u003cdt\u003e\u003c/dt\u003e\nDefines a term in a description list\n\n\u003cdd\u003e\u003c/dd\u003e\nDescribes the term in a description list\n```\n\n## Button\n\n```html\n\u003cbutton\u003e\u003c/button\u003e Defines a clickable button\n```\n\n## SVG\n\n````html\n\u003csvg\u003e\u003c/svg\u003e Container for SVG graphics ### Video tag ```html\n\u003cvideo controls src=\"movie.mp4\" type=\"video/mp4\"\u003e\n  Video type not supported by this browser!\n\u003c/video\u003e\n````\n\n## Unordered List\n\n```html\n\u003cul\u003e\n  \u003cli\u003eItem 1\u003c/li\u003e\n  \u003cli\u003eItem 2\u003c/li\u003e\n  \u003cli\u003eItem 3\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n\n## Ordered List\n\n```html\n\u003col\u003e\n  \u003cli\u003eItem 1\u003c/li\u003e\n  \u003cli\u003eItem 2\u003c/li\u003e\n  \u003cli\u003eItem 3\u003c/li\u003e\n\u003c/ol\u003e\n```\n\n## HTML Semantics\n\n```html\n\u003cheader\u003e\u003c/header\u003e\nSpecifies a header for a document or section\n\n\u003cmain\u003e\u003c/main\u003e\nSpecifies the main content of a document\n\n\u003cfooter\u003e\u003c/footer\u003e\nDefines a footer for a document or section\n\n\u003carticle\u003e\u003c/article\u003e\nDefines independent, self-contained content\n\n\u003caside\u003e\u003c/aside\u003e\nDefines content aside from the page content\n\n\u003cfigure\u003e\u003c/figure\u003e\nSpecifies self-contained content\n\n\u003cnav\u003e\u003c/nav\u003e\nDefines navigation links\n\n\u003csection\u003e\u003c/section\u003e\nDefines a section in a document\n```\n\n## Semantic media Tags\n\n````html\n\u003cfigure\u003e\u003c/figure\u003e Embeds annotated images, illustrations, photos, code, etc.\n\u003cfigcaption\u003e\u003c/figcaption\u003e For adding a caption/annotation to the \u003cfigure\u003e.\n\u003cpicture\u003e\u003c/picture\u003e Responsive image insertion,allows developers to provide different images for different contexts.\n\n\u003cvideo poster=\" \" autoplay loop controls \u003e\u003c/video\u003eFor embedding videos into a website.\n   poster is the path to an image that’s displayed before the video plays.\n   autoplay will start the video automatically.\n   loop triggers whether the video should repeat or not.\n   controls shows or hides the browser’s player buttons.\n\n\u003caudio\u003e\u003c/audio\u003e For embedding audio into a website.\n\u003csource\u003e\u003c/source\u003e Must be inside \u003cpicture\u003e, \u003cvideo\u003e or \u003caudio\u003e to define the different versions of content.\n```\n\n## Audio\n\n```html\n\u003caudio\u003e\u003c/audio\u003e The HTML \u003caudio\u003e element is used to embed sound content in documents.\n```\n\n## Scripting\n\n```html\n\u003ccanvas\u003e\u003c/canvas\u003e Used with either the canvas scripting API or the WebGL API to draw graphics and animations.\n\u003cnoscript\u003e\u003c/noscript\u003e 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.\n````\n\n### Emojis\n\n```html\n\u003cp style=\"font-size:48px\"\u003e\u0026#128512; \u0026#128516; \u0026#128525; \u0026#128151;\u003c/p\u003e\n```\n\nOutput:\n\u003cp style=\"font-size:48px\"\u003e\u0026#128512; \u0026#128516; \u0026#128525; \u0026#128151;\u003c/p\u003e\n\n\n\u003e For Emoji Unicode refer _[this](https://www.w3schools.com/charsets/ref_emoji.asp)_.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheatsheet-lang%2Fhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheatsheet-lang%2Fhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheatsheet-lang%2Fhtml/lists"}