{"id":18850496,"url":"https://github.com/manthanank/learn-html","last_synced_at":"2026-02-08T12:04:26.533Z","repository":{"id":147209854,"uuid":"617126767","full_name":"manthanank/learn-html","owner":"manthanank","description":"Complete HTML with all resources to learn.","archived":false,"fork":false,"pushed_at":"2024-02-04T13:07:08.000Z","size":26,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-30T07:28:39.807Z","etag":null,"topics":["html","learn-html"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manthanank.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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},"funding":{"github":["manthanank"],"open_collective":"manthanank","buy_me_a_coffee":"manthanank","patreon":"manthanank"}},"created_at":"2023-03-21T18:49:59.000Z","updated_at":"2025-07-14T04:26:57.000Z","dependencies_parsed_at":"2024-01-01T19:26:55.167Z","dependency_job_id":"a8bbf2dc-e511-4c91-a65f-1019f718573d","html_url":"https://github.com/manthanank/learn-html","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/manthanank/learn-html","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manthanank","download_url":"https://codeload.github.com/manthanank/learn-html/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-html/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268370862,"owners_count":24239780,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","learn-html"],"created_at":"2024-11-08T03:29:42.245Z","updated_at":"2026-02-08T12:04:21.512Z","avatar_url":"https://github.com/manthanank.png","language":"HTML","readme":"# HTML\n\n![npm](https://img.shields.io/npm/dw/learn-html)\n\n**HTML** - Stands for Hyper Text Markup Language\n\nHTML is the standard markup language for creating Web pages\nHTML describes the structure of a Web page\nHTML consists of a series of elements\nHTML elements tell the browser how to display the content\nHTML elements label pieces of content such as \"this is a heading\", \"this is a paragraph\", \"this is a link\", etc.\n\n**`\u003c!DOCTYPE\u003e` Declaration** - Represents the document type and helps browsers to display web pages correctly.\n\n## Elements\n\nAn HTML element is defined by a start tag, some content, and an end tag.\n\n```html\n\u003ctagname\u003eContent goes here...\u003c/tagname\u003e\n```\n\n## Attributes\n\n**href** - defines a hyper link.\n\n```html\n\u003ca href=\"https://www.w3schools.com\"\u003eVisit W3Schools\u003c/a\u003e\n```\n\n**src** - used to embed images in the web pages.\n\n```html\n\u003cimg src=\"img.jpg\"\u003e\n```\n\n**1. Absolute URL** - Links to an external image that is hosted on another website.\n\n```html\n\u003cimg src=\"https://www.w3schools.com/images/img.jpg\"\u003e\n```\n\n**2. Relative URL** - Links to an image that is hosted within the website.\n\n```html\n\u003cimg src=\"/images/img.jpg\"\u003e\n```\n\n**width \u0026 height** - specify the width and height of the image (in pixels).\n\n```html\n\u003cimg src=\"img.jpg\" width=\"300\" height=\"300\"\u003e\n```\n\n**alt** - specifies an alternate text for an image, if the image for some reason cannot be displayed.\n\n```html\n\u003cimg src=\"img.jpg\" alt=\"Image of a jacket\"\u003e\n```\n\n**style** - used to add styles to an element, such as color, font, size, and more.\n\n```html\n\u003cp style=\"color:red;\"\u003eThis is a red paragraph.\u003c/p\u003e\n```\n\n**lang** - used to declare the language of the Web page. And always included inside the `\u003chtml\u003e` tag.\n\n```html\n\u003chtml lang=\"en\"\u003e\n```\n\n**title** - defines some extra information about an element.\n\n```html\n\u003cp title=\"I'm a tooltip\"\u003eThis is a paragraph.\u003c/p\u003e\n```\n\n**Suggestion 1:** Always Use Lowercase Attributes and Always Quote Attribute Values\n\n```html\n\u003ca href=\"https://www.w3schools.com/html/\"\u003eVisit our HTML tutorial\u003c/a\u003e\n```\n\n**Suggestion 2:** Single or Double Quotes\n\n```html\n\u003cp title='John \"ShotGun\" Nelson'\u003e\n    or\n\u003cp title=\"John 'ShotGun' Nelson\"\u003e\n```\n\n## Heading\n\nHTML headings are titles or subtitles that you want to display on a webpage. There are six headings defined with the `\u003ch1\u003e` to `\u003ch6\u003e` tags.\n\n```html\n\u003ch1\u003eHeading 1\u003c/h1\u003e\n\u003ch2\u003eHeading 2\u003c/h2\u003e\n\u003ch3\u003eHeading 3\u003c/h3\u003e\n\u003ch4\u003eHeading 4\u003c/h4\u003e\n\u003ch5\u003eHeading 5\u003c/h5\u003e\n\u003ch6\u003eHeading 6\u003c/h6\u003e\n```\n\n## Bigger Headings\n\nYou can specify the size for any heading with the style attribute, using the CSS `font-size` property\n\n```html\n\u003ch1 style=\"font-size:60px;\"\u003eHeading 1\u003c/h1\u003e\n```\n\n**Suggestion :** Search engines use the headings to index the structure and content of your web pages.\n\n## Paragrapgh\n\nDefines a paragraph with `\u003cp\u003e` element.\n\n```html\n\u003cp\u003eThis is the first paragraph\u003c/p\u003e\n```\n\n## Horizontal Rules\n\nDefines a thematic break in an HTML page, and is most often displayed as a horizontal rule with `\u003chr\u003e` element.\n\n```html\n\u003cp\u003eThis is the first paragraph\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003eThis is the second paragraph\u003c/p\u003e\n```\n\n## HTML Line Breaks\n\nDefines a line break with `\u003cbr\u003e` element.\n\n```html\n\u003cp\u003eThis is\u003cbr\u003ea paragraph\u003cbr\u003ewith line breaks.\u003c/p\u003e\n```\n\n## Preformatted Text\n\nDefines preformatted text with `\u003cpre\u003e` element.\n\n```html\n\u003cpre\u003e\n  My Bonnie lies over the ocean.\n\n  My Bonnie lies over the sea.\n\n  My Bonnie lies over the ocean.\n\n  Oh, bring back my Bonnie to me.\n\u003c/pre\u003e\n```\n\n## Styles\n\nHTML `style` attribute is used to add styles to an element, such as color, font, size, and more.\n\n```html\n\u003ctagname style=\"property:value\"\u003eTag Name\u003c/tagname\u003e\n\u003c!--The property is a CSS property. The value is a CSS value.--\u003e\n```\n\n**Background color** -\n\nCSS `background-color` property defines the background color for an HTML element.\n\n```html\n\u003ch1 style=\"background-color:powderblue;\"\u003eHeadning\u003c/h1\u003e\n```\n\n**Text color** -\n\nCSS `color` property defines the text color for an HTML element\n\n```html\n\u003cp style=\"color:red;\"\u003eThis is a paragraph.\u003c/p\u003e\n```\n\n**Fonts** -\n\nCSS `font-family` property defines the font to be used for an HTML element\n\n```html\n\u003cp style=\"font-family:verdena;\"\u003eThis is a paragraph.\u003c/p\u003e\n```\n\n**Text Size** -\n\nCSS `font-size` property defines the text size for an HTML element\n\n```html\n\u003cp style=\"font-size:100%;\"\u003eThis is a paragraph.\u003c/p\u003e\n```\n\n**Text Alignment** -\n\nCSS `text-align` property defines the horizontal text alignment for an HTML element.\n\n```html\n\u003ch1 style=\"text-align:center;\"\u003eHeading.\u003c/h1\u003e\n```\n\n## Formatting\n\n**Bold** - The HTML `\u003cb\u003e` element defines bold text, without any extra importance.\n\n```html\n\u003cb\u003eThis text is bold\u003c/b\u003e\n```\n\n**Important** - The HTML `\u003cstrong\u003e` element defines text with strong importance. The content inside is typically displayed in bold.\n\n```html\n\u003cstrong\u003eThis text is important!\u003c/strong\u003e\n```\n\n**Italic** - The HTML `\u003ci\u003e` element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.\n\n```html\n\u003ci\u003eThis text is italic\u003c/i\u003e\n```\n\n**Emphasized** - The HTML `\u003cem\u003e` element defines emphasized text. The content inside is typically displayed in italic.\n\n```html\n\u003cem\u003eThis text is emphasized\u003c/em\u003e\n```\n\n**Marked** - The HTML `\u003cmark\u003e` element defines text that should be marked or highlighted\n\n```html\n\u003cp\u003eDo not forget to buy \u003cmark\u003emilk\u003c/mark\u003e today.\u003c/p\u003e\n```\n\n**Smaller** - The HTML `\u003csmall\u003e` element defines smaller text\n\n```html\n\u003csmall\u003eThis is some smaller text.\u003c/small\u003e\n```\n\n**Deleted** - The HTML `\u003cdel\u003e` element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text\n\n```html\n\u003cp\u003eMy favorite color is \u003cdel\u003eblue\u003c/del\u003e black.\u003c/p\u003e\n```\n\n**Inserted** - The HTML `\u003cins\u003e` element defines a text that has been inserted into a document. Browsers will usually underline inserted text\n\n```html\n\u003cp\u003eMy favorite color is \u003cdel\u003eblue\u003c/del\u003e \u003cins\u003eblack\u003c/ins\u003e.\u003c/p\u003e\n```\n\n**Subscript** - The HTML `\u003csub\u003e` element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.\n\n```html\n\u003cp\u003eThis is \u003csub\u003esubscripted\u003c/sub\u003e text.\u003c/p\u003e\n```\n\n**Superscript** - The HTML `\u003csup\u003e` element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].\n\n```html\n\u003cp\u003eThis is \u003csup\u003esuperscripted\u003c/sup\u003e text.\u003c/p\u003e\n```\n\n## Comments\n\nHTML comments are not displayed in the browser, but they can help document your HTML source code.\n\n```html\n\u003c!-- Write your comments here --\u003e\n```\n\n**Hide Content** - Comments can be used to hide content.\n\n```html\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\n\n\u003c!-- \u003cp\u003eThis is another paragraph \u003c/p\u003e --\u003e\n\n\u003cp\u003eThis is a paragraph too.\u003c/p\u003e\n```\n\n**Hide Inline Content** - Comments can be used to hide parts in the middle of the HTML code.\n\n```html\n\u003cp\u003eThis \u003c!-- great text --\u003e is a paragraph.\u003c/p\u003e\n```\n\n## Colors\n\nHTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.\n\n**Background color** - You can set the background color for HTML elements\n\n```html\n\u003ch1 style=\"background-color:DodgerBlue;\"\u003eHello World\u003c/h1\u003e\n\u003cp style=\"background-color:Tomato;\"\u003eLorem ipsum...\u003c/p\u003e\n```\n\n**Text color** - You can set the color of text\n\n```html\n\u003ch1 style=\"color:Tomato;\"\u003eHello World\u003c/h1\u003e\n\u003cp style=\"color:DodgerBlue;\"\u003eLorem ipsum...\u003c/p\u003e\n\u003cp style=\"color:MediumSeaGreen;\"\u003eUt wisi enim...\u003c/p\u003e\n```\n\n**Border color** - You can set the color of borders\n\n```html\n\u003ch1 style=\"border:2px solid Tomato;\"\u003eHello World\u003c/h1\u003e\n\u003ch1 style=\"border:2px solid DodgerBlue;\"\u003eHello World\u003c/h1\u003e\n\u003ch1 style=\"border:2px solid Violet;\"\u003eHello World\u003c/h1\u003e\n```\n\n## Color Values\n\nIn HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.\n\nThe following three `\u003cdiv\u003e` elements have their background color set with RGB, HEX, and HSL values\n\n```html\n\u003ch1 style=\"background-color:rgb(255, 99, 71);\"\u003e...\u003c/h1\u003e\n\u003ch1 style=\"background-color:#ff6347;\"\u003e...\u003c/h1\u003e\n\u003ch1 style=\"background-color:hsl(9, 100%, 64%);\"\u003e...\u003c/h1\u003e\n\n\u003ch1 style=\"background-color:rgba(255, 99, 71, 0.5);\"\u003e...\u003c/h1\u003e\n\u003ch1 style=\"background-color:hsla(9, 100%, 64%, 0.5);\"\u003e...\u003c/h1\u003e\n```\n\n**RGB** - An RGB color value represents RED, GREEN, and BLUE light sources.\n\nAn RGBA color value is an extension of RGB with an Alpha channel (opacity).\n\nIn HTML, a color can be specified as an RGB value, using this formula:\n\nrgb(red, green, blue)\n\n```html\nrgb(255, 99, 71)\n```\n\n**HEX** - In HTML, a color can be specified using a hexadecimal value in the form:\n\n`#rrggbb`\n\n```html\n#ff6347\n```\n\n**HSL** - In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:\n\nhsl(hue, saturation, lightness)\n\n```html\nhsl(0, 100%, 50%)\n```\n\n**RGBA** - RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.\n\nAn RGBA color value is specified with:\n\nrgba(red, green, blue, alpha)\n\n```html\nrgba(255, 99, 71, 0.5)\n```\n\n**HSLA** - HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color.\n\nAn HSLA color value is specified with:\n\nhsla(hue, saturation, lightness, alpha)\n\n```html\nhsla(0, 100%, 50%, 0.5)\n```\n\n## Quotations\n\n**Blockquotations** - The HTML `\u003cblockquote\u003e` element defines a section that is quoted from another source.\n\n```html\n\u003cp\u003eHere is a quote from WWF's website:\u003c/p\u003e\n\u003cblockquote cite=\"http://www.worldwildlife.org/who/index.html\"\u003e\nFor 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.\n\u003c/blockquote\u003e\n```\n\nShort Quotations - The HTML `\u003cq\u003e` tag defines a short quotation.\n\n```html\n\u003cp\u003eWWF's goal is to: \u003cq\u003eBuild a future where people live in harmony with nature.\u003c/q\u003e\u003c/p\u003e\n```\n\nAbbreviations - The HTML `\u003cabbr\u003e` tag defines an abbreviation or an acronym, like \"HTML\", \"CSS\", \"Mr.\", \"Dr.\", \"ASAP\", \"ATM\".\n\n```html\n\u003cp\u003eThe \u003cabbr title=\"World Health Organization\"\u003eWHO\u003c/abbr\u003e was founded in 1948.\u003c/p\u003e\n```\n\nAddress - The HTML `\u003caddress\u003e` tag defines the contact information for the author/owner of a document or an article.\n\n```html\n\u003caddress\u003e\nWritten by John Doe.\u003cbr\u003e\nVisit us at:\u003cbr\u003e\nExample.com\u003cbr\u003e\nBox 564, Disneyland\u003cbr\u003e\nUSA\n\u003c/address\u003e\n```\n\nWork Title - The HTML `\u003ccite\u003e` tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).\n\n```html\n\u003cp\u003e\u003ccite\u003eThe Scream\u003c/cite\u003e by Edvard Munch. Painted in 1893.\u003c/p\u003e\n```\n\nBidirectional Overrides - BDO stands for Bi-Directional Override. The HTML `\u003cbdo\u003e` tag is used to override the current text direction.\n\n```html\n\u003cbdo dir=\"rtl\"\u003eThis text will be written from right to left\u003c/bdo\u003e\n```\n\n## HTML CSS\n\n`CSS` saves a lot of work. It can control the layout of multiple web pages all at once.\n\n`What is CSS?`\n\nAns: Cascading Style Sheets (CSS) is used to format the layout of a webpage.\n\nWith CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!\n\n## Using CSS\n\nCSS can be added to HTML documents in 3 ways:\n\n- Inline - by using the style attribute inside HTML elements\n- Internal - by using a `\u003cstyle\u003e` element in the `\u003chead\u003e` section\n- External - by using a `\u003clink\u003e` element to link to an external CSS file\n\n### Inline CSS\n\nAn inline CSS is used to apply a unique style to a single HTML element.\n\nAn inline CSS uses the style attribute of an HTML element.\n\nThe following example sets the text color of the `\u003ch1\u003e` element to blue, and the text color of the `\u003cp\u003e` element to red:\n\n```html\n\u003ch1 style=\"color:blue;\"\u003eA Blue Heading\u003c/h1\u003e\n\n\u003cp style=\"color:red;\"\u003eA red paragraph.\u003c/p\u003e\n```\n\n### Internal CSS\n\nAn internal CSS is used to define a style for a single HTML page.\n\nAn internal CSS is defined in the `\u003chead\u003e` section of an HTML page, within a `\u003cstyle\u003e` element.\n\nThe following example sets the text color of ALL the `\u003ch1\u003e` elements (on that page) to blue, and the text color of ALL the `\u003cp\u003e` elements to red. In addition, the page will be displayed with a \"powderblue\" background color:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cstyle\u003e\nbody {background-color: powderblue;}\nh1   {color: blue;}\np    {color: red;}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003ch1\u003eThis is a heading\u003c/h1\u003e\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### External CSS\n\nAn external style sheet is used to define the style for many HTML pages.\n\nTo use an external style sheet, add a link to it in the `\u003chead\u003e` section of each HTML page:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003ch1\u003eThis is a heading\u003c/h1\u003e\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.\n\nHere is what the \"styles.css\" file looks like:\n\n\"styles.css\":\n\n```css\nbody {\n  background-color: powderblue;\n}\nh1 {\n  color: blue;\n}\np {\n  color: red;\n}\n```\n\n## CSS Colors, Fonts and Sizes\n\nHere, we will demonstrate some commonly used CSS properties. You will learn more about them later.\n\nThe CSS `color` property defines the text color to be used.\n\nThe CSS `font-family` property defines the font to be used.\n\nThe CSS `font-size` property defines the text size to be used.\n\n```htm\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cstyle\u003e\nh1 {\n  color: blue;\n  font-family: verdana;\n  font-size: 300%;\n}\np {\n  color: red;\n  font-family: courier;\n  font-size: 160%;\n}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003ch1\u003eThis is a heading\u003c/h1\u003e\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## CSS Border\n\nThe CSS border property defines a border around an HTML element.\n\nTip: You can define a border for nearly all HTML elements.\n\n```css\np {\n  border: 2px solid powderblue;\n}\n```\n\n## CSS Padding\n\nThe CSS padding property defines a padding (space) between the text and the border.\n\n```css\np {\n  border: 2px solid powderblue;\n  padding: 30px;\n}\n```\n\n## CSS Margin\n\nThe CSS margin property defines a margin (space) outside the border.\n\n```css\np {\n  border: 2px solid powderblue;\n  margin: 50px;\n}\n```\n\n## Link to External CSS\n\nExternal style sheets can be referenced with a full URL or with a path relative to the current web page.\n\nThis example uses a full URL to link to a style sheet:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://www.w3schools.com/html/styles.css\"\u003e\n```\n\nThis example links to a style sheet located in the html folder on the current web site:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/html/styles.css\"\u003e\n```\n\nThis example links to a style sheet located in the same folder as the current page:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n```\n\n## Links\n\nHTML links are hyperlinks. The HTML `\u003ca\u003e` tag defines a hyperlink.\n\n```html\n\u003ca\u003eLink\u003c/a\u003e\n```\n\n### Target Attributes\n\n**_self** - Default. Opens the document in the same window/tab as it was clicked\n\n```html\n\u003ca _self\u003eLink\u003c/a\u003e\n```\n\n**_blank** - Opens the document in a new window or tab\n\n```html\n\u003ca _blank\u003eLink\u003c/a\u003e\n```\n\n**_parent** - Opens the document in the parent frame\n\n```html\n\u003ca _parent\u003eLink\u003c/a\u003e\n```\n\n**_top** - Opens the document in the full body of the window\n\n```html\n\u003ca _top\u003eLink\u003c/a\u003e\n```\n\n## Absolute URL\n\nLinks to an external image that is hosted on another website\n\n```html\n\u003cimg src=\"https://www.w3schools.com/images/img.jpg\"\u003e\n```\n\n## Relative URL\n\nLinks to an image that is hosted within the website\n\n```html\n\u003cimg src=\"/images/img.jpg\"\u003e\n```\n\n## Use an Image as a Link\n\nTo use an image as a link, just put the `\u003cimg\u003e` tag inside the `\u003ca\u003e` tag:\n\n```html\n\u003ca href=\"default.asp\"\u003e\n\u003cimg src=\"smiley.gif\" alt=\"HTML tutorial\" style=\"width:42px;height:42px;\"\u003e\n\u003c/a\u003e\n```\n\n## Link to Email Address\n\nUse mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email):\n\n```html\n\u003ca href=\"mailto:manthan.ank46@gmail.com\"\u003eE-Mail\u003c/a\u003e\n```\n\n## Button as a Link\n\nTo use an HTML button as a link, you have to add some JavaScript code.\n\nJavaScript allows you to specify what happens at certain events, such as a click of a button\n\n```html\n\u003cbutton onclick=\"document.location='default.asp'\"\u003eHTML Tutorial\u003c/button\u003e\n```\n\n## Link Titles\n\nThe title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.\n\n```html\n\u003ca title=\"Title\"\u003eLink Title\u003c/a\u003e\n```\n\n## HTML Link Colors\n\nBy default, a link will appear like this (in all browsers):\n\n- An unvisited link is underlined and blue\n- A visited link is underlined and purple\n- An active link is underlined and red\n\n```html\n\u003cstyle\u003e\na:link {\n  color: green;\n  background-color: transparent;\n  text-decoration: none;\n}\n\na:visited {\n  color: pink;\n  background-color: transparent;\n  text-decoration: none;\n}\n\na:hover {\n  color: red;\n  background-color: transparent;\n  text-decoration: underline;\n}\n\na:active {\n  color: yellow;\n  background-color: transparent;\n  text-decoration: underline;\n}\n\u003c/style\u003e\n\n\u003ca href=\"html_images.asp\" target=\"_blank\"\u003eHTML Images\u003c/a\u003e \n```\n\n## Create Bookmarks\n\nBookmarks can be useful if a web page is very long.\n\nTo create a bookmark - first create the bookmark, then add a link to it.\n\nWhen the link is clicked, the page will scroll down or up to the location with the bookmark.\n\n```html\n\u003ch1 id=\"id\"\u003eLink\u003c/h1\u003e\n\n\u003ca href=\"#id\"\u003eLink\u003c/a\u003e\n```\n\n## Add Favicon\n\n```html\n\u003ca\u003eLink\u003c/a\u003e\n```\n\n## Images\n\n```html\n\u003cimg src=\"\" alt=\"\"\u003e\n```\n\n**Src** - Specifies the path to the image\n\nThe required src attribute specifies the path (URL) to the image.\n\n```html\n\u003cimg src=\"img_chania.jpg\" alt=\"Flowers in Chania\"\u003e\n```\n\n**Alt** - Specifies an alternate text for the image\n\nThe required alt attribute provides an alternate text for an image, if the user for some reason cannot view it.\n\n```html\n\u003cimg src=\"img_chania.jpg\" alt=\"Flowers in Chania\"\u003e\n```\n\n**Image Size - Width and Height** -\n\nYou can use the style attribute to specify the width and height of an image.\n\n```html\n\u003cimg src=\"img_girl.jpg\" alt=\"Girl in a jacket\" style=\"width:500px;height:600px;\"\u003e\n```\n\nAlternatively, you can use the width and height attributes:\n\n```html\n\u003cimg src=\"img_girl.jpg\" alt=\"Girl in a jacket\" width=\"500\" height=\"600\"\u003e\n```\n\n## Image Map\n\nThe HTML `\u003cmap\u003e` tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more `\u003carea\u003e` tags.\n\n```html\n\u003cimg src=\"workplace.jpg\" alt=\"Workplace\" usemap=\"#workmap\"\u003e\n\n\u003cmap name=\"workmap\"\u003e\n  \u003carea shape=\"rect\" coords=\"34,44,270,350\" alt=\"Computer\" href=\"computer.htm\"\u003e\n  \u003carea shape=\"rect\" coords=\"290,172,333,250\" alt=\"Phone\" href=\"phone.htm\"\u003e\n  \u003carea shape=\"circle\" coords=\"337,300,44\" alt=\"Coffee\" href=\"coffee.htm\"\u003e\n\u003c/map\u003e\n```\n\n**The Image** -\n\nThe image is inserted using the `\u003cimg\u003e` tag. The only difference from other images is that you must add a usemap attribute:\n\n```html\n\u003cimg src=\"workplace.jpg\" alt=\"Workplace\" usemap=\"#workmap\"\u003e\n```\n\n**Create Image Map** -\n\nThen, add a `\u003cmap\u003e` element.\n\nThe `\u003cmap\u003e` element is used to create an image map, and is linked to the image by using the required name attribute:\n\n```html\n\u003cmap name=\"workmap\"\u003e\n```\n\n**The Areas** -\n\nThen, add the clickable areas.\n\nA clickable area is defined using an `\u003carea\u003e` element.\n\n**Shape** -\n\nYou must define the shape of the clickable area, and you can choose one of these values:\n\n- rect - defines a rectangular region\n- circle - defines a circular region\n- poly - defines a polygonal region\n- default - defines the entire region\n\nYou must also define some coordinates to be able to place the clickable area onto the image. \n\n`Shape=\"rect\"`\n\nThe coordinates for shape=\"rect\" come in pairs, one for the x-axis and one for the y-axis.\n\n```html\n\u003carea shape=\"circle\" coords=\"337, 300, 44\" href=\"coffee.htm\"\u003e\n```\n\n`Shape=\"circle\"`\n\nTo add a circle area, first locate the coordinates of the center of the circle\n\n```html\n\u003carea shape=\"circle\" coords=\"337, 300, 44\" href=\"coffee.htm\"\u003e\n```\n\n`Shape=\"poly\"`\n\nThe shape=\"poly\" contains several coordinate points, which creates a shape formed with straight lines (a polygon).\n\nThis can be used to create any shape.\n\n```html\n\u003carea shape=\"poly\" coords=\"140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147\" href=\"croissant.htm\"\u003e\n```\n\n**Image Map and JavaScript** -\n\nA clickable area can also trigger a JavaScript function.\n\nAdd a click event to the `\u003carea\u003e` element to execute a JavaScript function:\n\n```html\n\u003cmap name=\"workmap\"\u003e\n  \u003carea shape=\"circle\" coords=\"337,300,44\" href=\"coffee.htm\" onclick=\"myFunction()\"\u003e\n\u003c/map\u003e\n\n\u003cscript\u003e\nfunction myFunction() {\n  alert(\"You clicked the coffee cup!\");\n}\n\u003c/script\u003e\n```\n\n## Picture Element\n\nThe HTML `\u003cpicture\u003e` element allows you to display different pictures for different devices or screen sizes.\n\nThe HTML `\u003cpicture\u003e` element gives web developers more flexibility in specifying image resources.\n\nThe `\u003cpicture\u003e` element contains one or more `\u003csource\u003e` elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.\n\nEach `\u003csource\u003e` element has a media attribute that defines when the image is the most suitable.\n\n```html\n\u003cpicture\u003e\n  \u003csource media=\"(min-width: 650px)\" srcset=\"img_food.jpg\"\u003e\n  \u003csource media=\"(min-width: 465px)\" srcset=\"img_car.jpg\"\u003e\n  \u003cimg src=\"img_girl.jpg\"\u003e\n\u003c/picture\u003e\n```\n\n## Background Image\n\nA background image can be specified for almost any HTML element.\n\n**Background Image on a HTML element** -\n\nTo add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:\n\n```html\n\u003cp style=\"background-image: url('img_girl.jpg');\"\u003e\n```\n\nYou can also specify the background image in the `\u003cstyle\u003e` element, in the `\u003chead\u003e` section:\n\n```html\n\u003cstyle\u003e\np {\n  background-image: url('img_girl.jpg');\n}\n\u003c/style\u003e\n```\n\n**Background Image on a Page** -\n\nIf you want the entire page to have a background image, you must specify the background image on the `\u003cbody\u003e` element:\n\n```html\n\u003cstyle\u003e\nbody {\n  background-image: url('img_girl.jpg');\n}\n\u003c/style\u003e\n```\n\nTo avoid the background image from repeating itself, set the `background-repeat` property to `no-repeat`.\n\n```html\n\u003cstyle\u003e\nbody {\n  background-image: url('example_img_girl.jpg');\n  background-repeat: no-repeat;\n}\n\u003c/style\u003e\n```\n\n## Background Cover\n\nf you want the background image to cover the entire element, you can set the `background-size` property to `cover`.\n\nAlso, to make sure the entire element is always covered, set the `background-attachment` property to `fixed`.\n\nThis way, the background image will cover the entire element, with no stretching\n\n```html\n\u003cstyle\u003e\nbody {\n  background-image: url('img_girl.jpg');\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  background-size: cover;\n}\n\u003c/style\u003e\n```\n\n## Background Stretch\n\nIf you want the background image to stretch to fit the entire element, you can set the `background-size` property to `100% 100%`.\n\n```html\n\u003cstyle\u003e\nbody {\n  background-image: url('img_girl.jpg');\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  background-size: 100% 100%;\n}\n\u003c/style\u003e\n```\n\n## Favicon\n\nA favicon is a small image displayed next to the page title in the browser tab.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eMy Page Title\u003c/title\u003e\n  \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"/images/favicon.ico\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003ch1\u003eThis is a Heading\u003c/h1\u003e\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Page Title\n\nDefines the title of the document. Every web page should have a page title to describe the meaning of the page. The `\u003ctitle\u003e` element adds a title to your page.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eHTML Tutorial\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\nThe content of the document......\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe `\u003ctitle\u003e` element:\n\n- defines a title in the browser toolbar\n- provides a title for the page when it is added to favorites\n- displays a title for the page in search engine-results\n\n## Tables\n\nHTML tables allow web developers to arrange data into rows and columns.\n\nA simple HTML table:\n\n```html\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eCompany\u003c/th\u003e\n    \u003cth\u003eContact\u003c/th\u003e\n    \u003cth\u003eCountry\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAlfreds Futterkiste\u003c/td\u003e\n    \u003ctd\u003eMaria Anders\u003c/td\u003e\n    \u003ctd\u003eGermany\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eCentro comercial Moctezuma\u003c/td\u003e\n    \u003ctd\u003eFrancisco Chang\u003c/td\u003e\n    \u003ctd\u003eMexico\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n### Table Cells\n\nEach table cell is defined by a `\u003ctd\u003e` and a `\u003c/td\u003e` tag.\n\nEach table cell is defined by a `\u003ctd\u003e` and a `\u003c/td\u003e` tag.\n\n`td` stands for table data.\n\nEverything between `\u003ctd\u003e` and `\u003c/td\u003e` are the content of the table cell.\n\n```html\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eEmil\u003c/td\u003e\n    \u003ctd\u003eTobias\u003c/td\u003e\n    \u003ctd\u003eLinus\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n### Table Rows\n\nEach table row starts with a `\u003ctr\u003e` and ends with a `\u003c/tr\u003e` tag.\n\n`tr` stands for table row.\n\n```html\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eEmil\u003c/td\u003e\n    \u003ctd\u003eTobias\u003c/td\u003e\n    \u003ctd\u003eLinus\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e16\u003c/td\u003e\n    \u003ctd\u003e14\u003c/td\u003e\n    \u003ctd\u003e10\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n### Table Headers\n\nSometimes you want your cells to be table header cells. In those cases use the `\u003cth\u003e` tag instead of the `\u003ctd\u003e` tag:\n\n`th` stands for table header.\n\n```html\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003ePerson 1\u003c/th\u003e\n    \u003cth\u003ePerson 2\u003c/th\u003e\n    \u003cth\u003ePerson 3\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eEmil\u003c/td\u003e\n    \u003ctd\u003eTobias\u003c/td\u003e\n    \u003ctd\u003eLinus\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e16\u003c/td\u003e\n    \u003ctd\u003e14\u003c/td\u003e\n    \u003ctd\u003e10\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n| Tag | Description |\n|---|---|\n| `\u003ctable\u003e` | Defines a table |\n| `\u003cth\u003e` | Defines a header cell in a table |\n| `\u003ctr\u003e` | Defines a row in a table |\n| `\u003ctd\u003e` | Defines a cell in a table |\n| `\u003ccaption\u003e` | Defines a table caption |\n| `\u003ccolgroup\u003e` | Specifies a group of one or more columns in a table for formatting |\n| `\u003ccol\u003e` | Specifies column properties for each column within a `\u003ccolgroup\u003e` element |\n| `\u003cthead\u003e` | Groups the header content in a table |\n| `\u003ctbody\u003e` | Groups the body content in a table |\n| `\u003ctfoot\u003e` | Groups the footer content in a table |\n","funding_links":["https://github.com/sponsors/manthanank","https://opencollective.com/manthanank","https://buymeacoffee.com/manthanank","https://patreon.com/manthanank"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Flearn-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanthanank%2Flearn-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Flearn-html/lists"}