{"id":25936752,"url":"https://github.com/vatsalsaxena22/html","last_synced_at":"2026-03-07T11:31:01.071Z","repository":{"id":257536797,"uuid":"858562640","full_name":"vatsalsaxena22/HTML","owner":"vatsalsaxena22","description":"HTML Complete Notes","archived":false,"fork":false,"pushed_at":"2025-09-07T10:50:30.000Z","size":237,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-07T12:25:33.636Z","etag":null,"topics":["html","html-css-javascript","html-notes","html5"],"latest_commit_sha":null,"homepage":"https://vatsalsaxena22.github.io/HTML/","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/vatsalsaxena22.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-09-17T05:57:11.000Z","updated_at":"2025-09-07T10:50:34.000Z","dependencies_parsed_at":"2025-01-17T23:15:26.555Z","dependency_job_id":null,"html_url":"https://github.com/vatsalsaxena22/HTML","commit_stats":null,"previous_names":["vatsalsaxena22/html"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vatsalsaxena22/HTML","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vatsalsaxena22%2FHTML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vatsalsaxena22%2FHTML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vatsalsaxena22%2FHTML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vatsalsaxena22%2FHTML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vatsalsaxena22","download_url":"https://codeload.github.com/vatsalsaxena22/HTML/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vatsalsaxena22%2FHTML/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30212124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T09:02:10.694Z","status":"ssl_error","status_checked_at":"2026-03-07T09:02:08.429Z","response_time":53,"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":["html","html-css-javascript","html-notes","html5"],"created_at":"2025-03-04T02:54:39.159Z","updated_at":"2026-03-07T11:31:01.037Z","avatar_url":"https://github.com/vatsalsaxena22.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-original.svg\" width=\"100px\" /\u003e\n\n# HTML Complete Notes\n\n---\n\n## HTML Introduction\n\n### HTML First Program:\n\n**Hello World!**, create a file named index.html and write -\n\n        \u003chtml\u003eHello World!\u003c/html\u003e\n\n### HTML Basic Layout:\n\n        \u003chtml\u003e\n        \u003chead\u003e\n          \u003ctitle\u003e Page Title \u003c/title\u003e\n        \u003c/head\u003e\n        \u003cbody\u003e\n          \u003ch1\u003e Heading \u003c/h1\u003e\n          \u003cp\u003e Paragraph \u003c/p\u003e\n        \u003c/body\u003e\n        \u003c/html\u003e\n\n### HTML Versions:\n\n \u003cimg src=\"https://www.tutorialspoint.com/html/images/html-version-release-year.jpg\" alt=\"HTML Versions\"\u003e\n\n### Parts of HTML:\n\nTags - \u003ctag\u003e Content.... \u003c/tag\u003e\n\nAttributes - `\u003ctag attribute=\"key: value;\"\u003e` or `\u003ctag attribute=\"value;\"\u003e`\n\nElements - `\u003ctag attribute=\"key: value;\"\u003e Content.... \u003c/tag\u003e` or Tag + Attribute\n\n### Best Editor for HTML:\n\n1. VS Code\n2. Sublime Text 3\n3. Web Storm IDE\n4. Notepad++\n\n## HTML Basics\n\n### Document Type Declaration:\n\n`\u003c!DOCTYPE html\u003e` - Defines HTML 5 version\n\n### HTML tag:\n\n`\u003chtml\u003e` - html starts here\n`\u003c/html\u003e` - html ends here\n\n### Head tag:\n\nContains meta data\n`\u003chead\u003e` - head starts here\n`\u003c/head\u003e` - head ends here\n\n### Title tag:\n\n`\u003ctitle\u003e Site Title \u003c/title\u003e`\n\n### Body tag:\n\nContains Body content\n`\u003cbody\u003e` - body starts here\n`\u003c/body\u003e` - body ends here\n\n### Headings:\n\n`\u003ch1\u003e....\u003c/h1\u003e`\n`\u003ch2\u003e....\u003c/h2\u003e`\n`\u003ch3\u003e....\u003c/h3\u003e`\n`\u003ch4\u003e....\u003c/h4\u003e`\n`\u003ch5\u003e....\u003c/h5\u003e`\n`\u003ch6\u003e....\u003c/h6\u003e`\n\n### Paragraph:\n\n`\u003cp\u003e....\u003c/p\u003e`\n\n### Link:\n\n`\u003ca href=\"url\"\u003e....\u003c/a\u003e`\n\n### Line Break:\n\n`\u003cbr /\u003e`\n\n### Horizontal line:\n\n`\u003chr /\u003e`\n\n### View HTML Source Code:\n\n#### View HTML Source Code:\n\nClick \u003ckbd\u003eCTRL + U\u003c/kbd\u003e in an HTML page, or right-click on the page and select \"View Page Source\". This will open a new tab containing the HTML source code of the page.\n\n#### Inspect an HTML Element:\n\nRight-click on an element (or a blank area), and choose \"Inspect\" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.\n\n### Comments:\n\n        \u003c!-- comment --\u003e\n\nShortcut - \u003ckbd\u003eCTRL + /\u003c/kbd\u003e\n\n### Blocks Elements:\n\n`\u003ch1\u003e----\u003ch6\u003e` `\u003cp\u003e` `\u003cdiv\u003e` `\u003chr\u003e` `\u003cheader\u003e` `\u003cnav\u003e` `\u003cmain\u003e` `\u003cfooter\u003e` `\u003csection\u003e` `\u003carticle\u003e` `\u003cul\u003e` `\u003col\u003e` `\u003cli\u003e` `\u003cdl\u003e` `\u003cdt\u003e` `\u003cdd\u003e` `\u003ctable\u003e` `\u003cform\u003e`\n\n### Inline Elements:\n\n`\u003ca\u003e` `\u003cspan\u003e` `\u003cimg\u003e` `\u003cbr\u003e` `\u003cbutton\u003e` `\u003cinput\u003e` `\u003cselect\u003e` `\u003cb\u003e` `\u003ci\u003e` `\u003cq\u003e` `\u003csub\u003e` `\u003csup\u003e` `\u003ctextarea\u003e`\n\n## HTML Formatting\n\n### Physical Tags:\n\nThese tags directly impact the visual appearance of the text, altering font styles, sizes, and other visual properties.\n\n`\u003cb\u003e` - bold\n\n`\u003ci\u003e` - italic\n\n### Logical Tags:\n\nThese tags denote the logical or semantic value of the text. They convey meaning without directly affecting the visual appearance.\n\n`\u003cstrong\u003e` - strong\n\n`\u003cem\u003e` - emphasize\n\n### Formatting Tags:\n\n`\u003csub\u003e`\n`\u003csup\u003e`\n`\u003cmark\u003e`\n`\u003cdel\u003e`\n`\u003cins\u003e`\n\n### Quotation tags:\n\n`\u003cq\u003e`\n`\u003cblockquote\u003e`\n`\u003ccite\u003e`\n`\u003cabbr title=\"\"\u003e`\n`\u003caddress\u003e`\n`\u003cbdo dir=\"ltr\"\u003e`\n`\u003cbdo dir=\"rtl\"\u003e`\n\n## HTML Table\n\nHTML tables allow web developers to arrange data into rows and columns.\n\n### Tags:\n\n`\u003ctable\u003e` - table tag\n\n`\u003ctr\u003e` - table row tag\n\n`\u003cth\u003e` - table header tag\n\n`\u003ctd\u003e` - table data tag\n\n### Basic Layout:\n\n        \u003ctable\u003e\n          \u003ctr\u003e\n            \u003cth\u003eName\u003c/th\u003e\n            \u003cth\u003ePhone\u003c/th\u003e\n            \u003cth\u003eEmail\u003c/th\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003eArvind\u003c/td\u003e\n            \u003ctd\u003e11223344\u003c/td\u003e\n            \u003ctd\u003ea123@mail.com\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003eBhanu\u003c/td\u003e\n            \u003ctd\u003e123123\u003c/td\u003e\n            \u003ctd\u003eb111@mail.com\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003eChandan\u003c/td\u003e\n            \u003ctd\u003e12344321\u003c/td\u003e\n            \u003ctd\u003ec121@mail.com\u003c/td\u003e\n          \u003c/tr\u003e\n        \u003c/table\u003e\n\n### Simple Table:\n\n| Name    | Phone    | Email         |\n| ------- | -------- | ------------- |\n| Arvind  | 11223344 | a123@mail.com |\n| Bhanu   | 123123   | b111@mail.com |\n| Chandan | 12344321 | c121@mail.com |\n\n### Rowspan and Colspan:\n\n#### Rowspan:\n\n`\u003ctd rowspan=\"2\"\u003e....\u003c/td\u003e`\n\n#### Colspan:\n\n`\u003ctd colspan=\"3\"\u003e....\u003c/td\u003e`\n\n## HTML List\n\n### Tags:\n\n`\u003cul\u003e` - Unordered List\n\n`\u003col\u003e` - Ordered List\n\n`\u003cli\u003e` - List Item\n\n`\u003cdl\u003e` - Description List\n\n`\u003cdt\u003e` - Description Title\n\n`\u003cdd\u003e` - Description Data\n\n### Unordered List:\n\n- Apple\n- Banana\n- Mango\n- Orange\n- Grapes\n\n### Ordered List:\n\n1. Lion\n2. Tiger\n3. Leopard\n4. Wolf\n5. Fox\n6. Elephant\n7. Rhino\n8. Bear\n\n### Description List:\n\nNoun -\n\nNoun is the name of a person, place or things. e.g. Ram, Book, Kanpur etc.\n\nPronoun -\n\nThe word which used in place of noun is called Pronoun. e.g. He, She, It etc.\n\n### Nested List:\n\n- Bus\n- Car\n  - Sedan\n  - SUV\n    - Off-roader\n    - Crossover\n  - Hatchback\n  - MUV\n- Bike\n- Scooter\n\n## HTML Form\n\n### Tags:\n\n`\u003cform\u003e` `\u003clabel\u003e` `\u003cinput\u003e` `\u003cselect\u003e` `\u003coption\u003e` `\u003ctextarea\u003e`\n\n### Form Example:\n\n      \u003cform action=\"\" method=\"\"\u003e\n        \u003clabel for=\"fullName\"\u003eFull Name:\u003c/label\u003e\n        \u003cinput type=\"text\" name=\"fullName\" id=\"\" /\u003e\n        \u003cbr /\u003e\n        \u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e\n        \u003cinput type=\"email\" name=\"email\" id=\"email\" /\u003e\n        \u003cbr /\u003e\n        \u003clabel for=\"Phone\"\u003ePhone:\u003c/label\u003e\n        \u003cinput type=\"tel\" name=\"phone\" id=\"\" /\u003e\n        \u003cbr /\u003e\n        \u003clabel for=\"message\"\u003eMessage:\u003c/label\u003e\n        \u003ctextarea name=\"message\" id=\"\"\u003e\u003c/textarea\u003e\n        \u003cbr /\u003e\n        \u003cinput type=\"submit\" value=\"Submit\"\u003e\n      \u003c/form\u003e\n\n### Input Types:\n\n      \u003clabel for=\"\"\u003eButton\u003c/label\u003e\n      \u003cinput type=\"button\" name=\"\" value=\"Button\" id=\"\" /\u003e\n      \u003cbr /\u003e\n      \u003clabel for=\"\"\u003eCheckbox\u003c/label\u003e\n      \u003cinput type=\"checkbox\" name=\"\" value=\"Check\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eColor\u003c/label\u003e\n      \u003cinput type=\"color\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eDate\u003c/label\u003e\n      \u003cinput type=\"date\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eDate Time\u003c/label\u003e\n      \u003cinput type=\"datetime\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eDate Time Local\u003c/label\u003e\n      \u003cinput type=\"datetime-local\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eEmail\u003c/label\u003e\n      \u003cinput type=\"email\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eFile\u003c/label\u003e\n      \u003cinput type=\"file\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eImage\u003c/label\u003e\n      \u003cinput type=\"image\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eMonth\u003c/label\u003e\n      \u003cinput type=\"month\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eNumber\u003c/label\u003e\n      \u003cinput type=\"number\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003ePassword\u003c/label\u003e\n      \u003cinput type=\"password\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eRadio\u003c/label\u003e\n      \u003cinput type=\"radio\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eRange\u003c/label\u003e\n      \u003cinput type=\"range\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eReset\u003c/label\u003e\n      \u003cinput type=\"reset\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eSearch\u003c/label\u003e\n      \u003cinput type=\"search\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eSubmit\u003c/label\u003e\n      \u003cinput type=\"submit\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eTel\u003c/label\u003e\n      \u003cinput type=\"tel\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eText\u003c/label\u003e\n      \u003cinput type=\"text\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eTime\u003c/label\u003e\n      \u003cinput type=\"time\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eURL\u003c/label\u003e\n      \u003cinput type=\"url\" name=\"\" id=\"\" /\u003e\n      \u003cbr\u003e\n      \u003clabel for=\"\"\u003eWeek\u003c/label\u003e\n      \u003cinput type=\"week\" name=\"\" id=\"\" /\u003e\n\n## HTML Media\n\n### Image:\nSyntax - `\u003cimg src=\"\" alt=\"\" /\u003e`\n\n### Audio:\nSyntax - `\u003caudio src=\"\" controls\u003e\u003c/audio\u003e`\n\n### Video:\nSyntax - `\u003cvideo src=\"\" controls\u003e\u003c/video\u003e`\n\n### More Attributes for audio \u0026 video:\n\n- autoplay\n\u003e automatically play the media.\n- muted\n\u003e automatically mute the media.\n- loop\n\u003e play the media in the loop.\n\n### Object:\nSyntax - `\u003cobject data=\"\"\u003e\u003c/object\u003e`\n\n### Embed:\nSyntax - `\u003cembed src=\"\" /\u003e`\n\n### Iframe:\nSyntax - `\u003ciframe src=\"\"\u003e\u003c/iframe\u003e`\n\n### Download Link:\nSyntax - `\u003ca href=\"\" download\u003e\u003c/a\u003e`\n\n\n## HTML IDs and Classes\n\n### Classes:\nThe HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class.\n\nSyntax - `\u003cp class=\"\"\u003e\u003c/p\u003e`\n\nCSS\n\n                .className{\n                  // CSS\n                }\n        \nJavaScript\n\n        document.getElementsByClassName(\"className\")\n        // js \n        \n### IDs:\nThe HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document.\n\nSyntax - `\u003cp id=\"\"\u003e\u003c/p\u003e`\n\nCSS\n\n        #IDName{\n          // css\n        }\n        \nJavaScript\n\n        document.getElementById(\"IDName\")\n        // js \n        \n\n## HTML with CSS\n### How to link CSS with HTML?\n\n### There are three ways to link css to a html file -\n1. Inline CSS\n2. Internal CSS\n3. External CSS\n\n### Inline CSS:\n\n        \u003ch1 style=\"color: red; background-color: blue;\"\u003e Heading \u003c/h1\u003e\n      \n### Internal CSS:\n\n        \u003c!DOCTYPE html\u003e\n        \u003chtml\u003e\n          \u003chead\u003e\n            \u003ctitle\u003e Page Title \u003c/title\u003e\n            \u003cstyle\u003e\n              h1{\n                color: red;\n                background-color: blue;\n              }\n            \u003c/style\u003e\n          \u003c/head\u003e\n          \n          \u003cbody\u003e\n            \u003ch1\u003e Heading \u003c/h1\u003e\n          \u003c/body\u003e\n        \u003c/html\u003e\n      \n### External CSS:\n        \n        \u003c!DOCTYPE html\u003e\n        \u003chtml\u003e\n          \u003chead\u003e\n            \u003ctitle\u003e Page Title \u003c/title\u003e\n            \u003clink rel=\"stylesheet\" href=\"style.css\" /\u003e\n          \u003c/head\u003e\n          \n          \u003cbody\u003e\n            \u003ch1\u003e Heading \u003c/h1\u003e\n          \u003c/body\u003e\n        \u003c/html\u003e\n      \n### style.css\n        \n        h1{\n          color: red;\n          background-color: blue;\n        }\n        \n\n## HTML Script\n\n## HTML Advance\n\n[Meta Tags](https://www.tutorialspoint.com/html/html_meta_tags.htm)\n[Email Link](https://www.tutorialspoint.com/html/html_email_links.htm)\n[Image map](https://www.w3schools.com/html/html_images_imagemap.asp)\n[Picture Element](https://www.w3schools.com/html/html_images_picture.asp)\n[iFrame](https://www.w3schools.com/html/html_iframe.asp)\n\n## HTML Grapics\n\n## HTML APIs\n\n## HTML Full Stack\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvatsalsaxena22%2Fhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvatsalsaxena22%2Fhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvatsalsaxena22%2Fhtml/lists"}