{"id":21598606,"url":"https://github.com/abhayanigam/intro_to_html","last_synced_at":"2026-03-19T20:58:34.536Z","repository":{"id":113789799,"uuid":"367776646","full_name":"abhayanigam/Intro_To_HTML","owner":"abhayanigam","description":"Introduction To HTML","archived":false,"fork":false,"pushed_at":"2023-08-05T14:05:28.000Z","size":138,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-03T01:32:06.402Z","etag":null,"topics":["fundamentals","html","html-css","html-css-javascript","html-images","html-table","html5","website"],"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/abhayanigam.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-16T03:28:06.000Z","updated_at":"2023-09-13T05:47:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"f885f65b-b219-4ee2-bc0d-db7f591a5254","html_url":"https://github.com/abhayanigam/Intro_To_HTML","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/abhayanigam/Intro_To_HTML","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhayanigam%2FIntro_To_HTML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhayanigam%2FIntro_To_HTML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhayanigam%2FIntro_To_HTML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhayanigam%2FIntro_To_HTML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abhayanigam","download_url":"https://codeload.github.com/abhayanigam/Intro_To_HTML/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhayanigam%2FIntro_To_HTML/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28846766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T15:15:36.453Z","status":"ssl_error","status_checked_at":"2026-01-28T15:15:13.020Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["fundamentals","html","html-css","html-css-javascript","html-images","html-table","html5","website"],"created_at":"2024-11-24T18:12:41.365Z","updated_at":"2026-01-28T16:03:32.155Z","avatar_url":"https://github.com/abhayanigam.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://github.com/abhayanigam/abhayanigam/blob/main/Assets/html.png\" align=\"right\" width=\"200\" align=\"right\" /\u003e\n\n# \u003cabbr title = \"Hypertext Markup Language\"\u003eHTML\u003c/abbr\u003e CheatSheet\n\n\u003cdiv\u003e\n\n## Structure\n\nThis is the basic template or barebone structure of HTML.\n\n### Boilerplate\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n    \u003c/body\u003e\n    \u003c/html\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Headings\n\nThere are six headings available in HTML, H1 is the largest among all, and H6 is the smallest.\n\n### h1 Tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003ch1\u003eHeading 1\u003c/h1\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### h2 Tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003ch2\u003eHeading 2\u003c/h2\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### h3 Tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003ch3\u003eHeading 3\u003c/h3\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### h4 Tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003ch4\u003eHeading 4\u003c/h4\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### h5 Tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003ch5\u003eHeading 5\u003c/h5\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### h6 Tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003ch6\u003eHeading 6\u003c/h6\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Container\n\nContainer tags are the tags that contain some data such as text, image, etc. There are several container tags in HTML.\n\n### div tag\n\ndiv tag or division tag is used to make blocks or divisions in the document.\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cdiv\u003e This is div block \u003c/div\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### span tag\n\nspan is a container for inline content\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cspan\u003e This is span block \u003c/span\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### p tag\n\nParagraph\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cp\u003e This is a paragraph \u003c/p\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### pre tag\n\npre tag represents pre-formatted text\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cpre\u003e Hello World \u003c/pre\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### code tag\n\ncode tag is used to represent source codes\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003ccode\u003e\n    import python\n    \u003c/code\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Text Formatting\n\nText formatting tags are used to format text or data of HTML documents. You can do certain things like creating italic, bold, strong text to make your document look more attractive and understandable.\n\n### \u0026lt;b\u0026gt; tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cb\u003eI'm bold text\u003c/b\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### \u0026lt;strong\u0026gt; tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cstrong\u003eI'm important text\u003c/strong\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### \u0026lt;i\u0026gt; tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003ci\u003eI'm italic text\u003c/i\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### \u0026lt;em\u0026gt; tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cem\u003eEmphasized text\u003c/em\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### \u0026lt;sub\u0026gt; tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003csub\u003eSubscript\u003c/sub\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### \u0026lt;sub\u0026gt; tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003csup\u003eSuperscript\u003c/sup\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Lists\n\nLists can be either numerical, alphabetic, bullet, or other symbols. You can specify list type and list items in HTML for the clean document.\n\n### \u0026lt;ol\u0026gt; tag\n\nOrdered list starts with \u0026lt;ol\u0026gt; tag and each list item starts with \u0026lt;li\u0026gt; tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003col\u003e\n    \u003cli\u003eData 1\u003c/li\u003e\n    \u003cli\u003eData 2\u003c/li\u003e\n    \u003cli\u003eData 3\u003c/li\u003e\n    \u003c/ol\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### \u0026lt;ul\u0026gt; tag\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cul\u003e\n    \u003cli\u003eYour Data\u003c/li\u003e\n    \u003cli\u003eYour Data\u003c/li\u003e\n    \u003c/ul\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Media\n\nMedia is anything that is present in digital form such as image, video, audio, etc.\n\n### \u0026lt;audio\u0026gt; tag\n\nIt is used to embed sound content in the document.\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003caudio controls\u003e\n    \u003csource src=\"demo.mp3\" type=\"audio/mpeg\"\u003e\n    Your browser does not support the audio element.\n    \u003c/audio\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### \u0026lt;img\u0026gt; tag\n\nIt is used to embed or import image in a webpage.\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cimg src=\"Source_of_image\" alt=\"Alternate text\"\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### \u0026lt;video\u0026gt; tag\n\nIt is used to embed video in the webpage.\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cvideo width=\"480\" height=\"320\" controls\u003e\n    \u003csource src=\"demo_move.mp4\" type=\"video/mp4\"\u003e\n    Your browser does not support the video tag.\n    \u003c/video\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Table\n\nA table is a collection of rows and columns. It is used to represent data in tabular form.\n\n### Table Structure\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003ctable\u003e\n    \u003ccaption\u003eDemo Table\u003c/caption\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n    \u003cth\u003eColumn1\u003c/th\u003e\n    \u003cth colspan=\"2\"\u003eColumn2\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n    \u003ctd\u003eData1\u003c/td\u003e\n    \u003ctd\u003eData2\u003c/td\u003e\n    \u003ctd\u003eData2\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd\u003eData1\u003c/td\u003e\n    \u003ctd\u003eData2\u003c/td\u003e\n    \u003ctd\u003eData2\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n    \u003ctfoot\u003e\n    \u003ctr\u003e\n    \u003ctd\u003e\u0026nbsp;\u003c/td\u003e\n    \u003ctd\u003eData\u003c/td\u003e\n    \u003ctd\u003eData\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tfoot\u003e\n    \u003c/table\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Links\n\nLinks are clickable text that can redirect you to some other page.\n\n### \u0026lt;a\u0026gt; tag\n\n\u0026lt;a\u0026gt; or anchor tag defines a hyperlink.\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003ca href=\"https://www.google.com/\"\u003eVisit Google!\u003c/a\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Form\n\n### Sample Form\n\nForm is used to collect user's input, generally user's data is sent to server for further processing.\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cform action=\"/action.php\" method=\"post\"\u003e\n    Name: \u003cinput name=\"name\" type=\"text\" /\u003e \u003cbr /\u003e\n    Age: \u003cinput max=\"90\" min=\"1\" name=\"age\" step=\"1\" type=\"number\" value=\"18\" /\u003e \u003cbr /\u003e\n    \u003cselect name=\"gender\"\u003e\n    \u003coption selected=\"selected\" value=\"male\"\u003eMale\u003c/option\u003e\n    \u003coption value=\"female\"\u003eFemale\u003c/option\u003e\n    \u003c/select\u003e\u003cbr /\u003e\n    \u003cinput checked=\"checked\" name=\"newsletter\" type=\"radio\" value=\"daily\" /\u003e Daily \u003cinput name=\"newsletter\"type=\"radio\" value=\"weekly\" /\u003e Weekly\u003cbr /\u003e\n    \u003ctextarea cols=\"20\" name=\"comments\"rows=\"5\"\u003eComment\u003c/textarea\u003e\u003cbr /\u003e\n    \u003clabel\u003e\u003cinput name=\"terms\" type=\"checkbox\" value=\"tandc\" /\u003eAccept terms\u003c/label\u003e \u003cbr /\u003e\n    \u003cinput type=\"submit\" value=\"Submit\" /\u003e\n    \u003c/form\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Characters \u0026 Symbols\n\nSome symbols are not directly present on the keyboard, but there are some ways to use them in HTML documents. We can display them either by entity name, decimal, or hexadecimal value.\n\n### Copyright Symbol (©)\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u0026copy;\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### Less than (\u003c)\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u0026lt;\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### Greater than (\u003e)\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u0026gt;\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### Ampersand (\u0026)\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u0026amp;\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### Dollar ($)\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u0026dollar;\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### Abbreviation element \u0026lt;abbr\u0026gt;\u0026lt;/abbr\u0026gt;\n Abbreviation element that allows you to identify an addreviation in your\n document and provide the text of what that addreviation stants for.\n \u003cp\u003e(So someone who look at your document who may not be fimiliar with it can\n mouse over that Abbreviation and get the full text that it stand for).\u003c/p\u003e\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003cabbr title = \"Hypertext Markup Language\"\u003eHTML\u003c/abbr\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Random Text\n\n### Elon Musk\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    Elon Reeve Musk FRS is an entrepreneur and business magnate. He is the founder, CEO, and Chief Engineer at SpaceX; early stage investor, CEO, and Product Architect of Tesla, Inc.; founder of The Boring Company; and co-founder of Neuralink and OpenAI. A centibillionaire, Musk is one of the richest people in the world.\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n## Semantic Elements\n\nSemantic elements are those elements that are self describable, i.e., from their name itself, you can understand their meaning.\n\n### \u0026lt;section\u0026gt; tag\n\nIt defines a section in the document\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003csection\u003eThis is a section\u003c/section\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### \u0026lt;article\u0026gt; tag\n\nIt represents self-contained content\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003carticle\u003e Enter your data here \u003c/article\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n### \u0026lt;aside\u0026gt; tag\n\nIt is used to place content in the sidebar\n\n\u003cdiv class=\"code-toolbar\"\u003e\n\n    \u003caside\u003e Your data \u003c/aside\u003e\n\n\u003cdiv class=\"toolbar\"\u003e\n\n\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhayanigam%2Fintro_to_html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabhayanigam%2Fintro_to_html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhayanigam%2Fintro_to_html/lists"}