{"id":23254939,"url":"https://github.com/the-young-programer/tutorial_html-css","last_synced_at":"2025-09-10T02:47:41.507Z","repository":{"id":257179785,"uuid":"857544271","full_name":"The-Young-Programer/TUTORIAL_HTML-CSS","owner":"The-Young-Programer","description":"HTML CSS Tutorial (Basic to Advance)","archived":false,"fork":false,"pushed_at":"2024-09-21T06:35:19.000Z","size":1273,"stargazers_count":16,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T23:07:33.422Z","etag":null,"topics":["css-framework","html-css","html-template","nemonet","nemonet-github","nemonet-typ","programming-language","tutorial-project","tutorial-sourcecode"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/The-Young-Programer.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":"2024-09-14T23:36:48.000Z","updated_at":"2024-12-31T06:46:12.000Z","dependencies_parsed_at":"2024-09-15T06:47:21.798Z","dependency_job_id":"61ee8c1b-e2b7-4d05-9c31-efb2747d5c8f","html_url":"https://github.com/The-Young-Programer/TUTORIAL_HTML-CSS","commit_stats":null,"previous_names":["the-young-programer/html-css","the-young-programer/tutorial_html-css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/The-Young-Programer/TUTORIAL_HTML-CSS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/The-Young-Programer%2FTUTORIAL_HTML-CSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/The-Young-Programer%2FTUTORIAL_HTML-CSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/The-Young-Programer%2FTUTORIAL_HTML-CSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/The-Young-Programer%2FTUTORIAL_HTML-CSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/The-Young-Programer","download_url":"https://codeload.github.com/The-Young-Programer/TUTORIAL_HTML-CSS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/The-Young-Programer%2FTUTORIAL_HTML-CSS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274403038,"owners_count":25278376,"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-09-10T02:00:12.551Z","response_time":83,"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":["css-framework","html-css","html-template","nemonet","nemonet-github","nemonet-typ","programming-language","tutorial-project","tutorial-sourcecode"],"created_at":"2024-12-19T11:17:56.855Z","updated_at":"2025-09-10T02:47:41.464Z","avatar_url":"https://github.com/The-Young-Programer.png","language":"CSS","readme":"\u003cp align=\"center\"\u003e🙏 kindly follow and give a star 🙏\u003cbr\u003e you can also fork this to contribute\u003c/p\u003e\r\n\r\n\r\nHTML + CSS Tutorial\r\n=================\r\n\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e 4 W's \u003c/summary\u003e\r\n\r\n### Who\r\n\r\nI'm Nemonet. I'm a Programmer and I've been teaching myself HTML, CSS, and other web development and scripting for over 4 years.\r\nAnd I want to teach you now.\r\nBecause I feel like.\r\nAnd because it's useful.\r\n\r\n### What\r\n\r\nIn this tutorial, we'll start from the very beginning. You don't need to know anything about HTML and CSS or anything about code to start. I'll include some tutorial files for you to play with and check out.\r\n\r\n### When\r\n\r\nNow. Or whenever. I'm not planning on taking this down anytime soon rather than updating it constantly. But you are only limited by your own schedule. Or set free by it. Whatever.\r\n\r\n### Why\r\n\r\nBecause this stuff is important. Whether you're a business person formatting your emails, an aspiring web designer wanting to get your feet wet, or just someone who is interested and hasn't tried any sort of coding, scripting, or programming before, **HTML and CSS are an essential part** of your learning curve.\r\n\r\n\u003c/details\u003e\r\n\r\n\u003ca name=\"README\"\u003e\u003cimg src=\"./Images/68747470733a2f2f6d617274696e63686176657a2e6769746875622e696f2f4173736574732f4c6f676f732f68746d6c6373732e737667.svg\" width=\"300px\" height=\"300px\"/\u003e\u003c/a\u003e\r\n\r\n## Table of Contents\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003eHTML\u003c/summary\u003e\r\n\r\n[HTML Introduction](#html-introduction-️)\r\n\r\n\r\n[HTML Editors](#html-editors-)\r\n\r\n[HTML Basic](#html-basic-examples-)\r\n\r\n[HTML Elements](#html-elements-)\r\n\r\n[HTML Attributes](#html-attributes-)\r\n\r\n[HTML Headings](#html-headings-️)\r\n\r\n[HTML Paragraphs](#html-paragraphs-)\r\n\r\n[HTML Styles](#html-styles-)\r\n\r\n[HTML Formatting](#html-text-formatting-)\r\n\r\n[HTML Quotations](#html-quotation-and-citation-elements-)\r\n\r\n[HTML Comments](#html-comments-)\r\n\r\n[HTML Colors](#html-colors-)\r\n\r\n[HTML CSS](#html-styles---css-️)\r\n\r\n[HTML Links](#html-links-)\r\n\r\n[HTML Images](#html-images-️)\r\n\r\n[HTML Favicon](#html-favicon-)\r\n\r\n[HTML Page Title](#html-page-title-)\r\n\r\n[HTML Tables](#html-tables-)\r\n\r\n[HTML Lists](#html-lists-)\r\n\r\n[HTML Block \u0026 Inline](#html-block-and-inline-elements-)\r\n\r\n[HTML Div](#html-div-element-)\r\n\r\n[HTML Classes](#html-class-attribute-)\r\n\r\n[HTML Id](#html-id-attribute-)\r\n\r\n[HTML Iframes](#html-iframes-)\r\n\r\n[HTML JavaScript](#html-javascript-)\r\n\r\n[HTML File Paths](#html-file-paths-)\r\n\r\n[HTML Head](#html---the-head-element-)\r\n\r\n[HTML Layout](#html-layout-elements-and-techniques-)\r\n\r\n[HTML Responsive](#html-responsive-web-design-)\r\n\r\n[HTML Computercode](#html-computer-code-elements-)\r\n\r\n[HTML Semantics](#html-semantic-elements-)\r\n\r\n[HTML Style Guide](#html-style-guide-)\r\n\r\n[HTML Entities](#html-entities-)\r\n\r\n[HTML Symbols](#html-symbols-)\r\n\r\n[HTML Emojis](#using-emojis-in-html-)\r\n\r\n[HTML Charsets](#html-encoding-character-sets-)\r\n\r\n[HTML URL Encode](#html-uniform-resource-locators-)\r\n\r\n[HTML vs. XHTML](#html-versus-xhtml-️)\r\n\r\n**HTML Forms**\r\n\r\n[HTML Forms](#html-forms-️)\r\n\r\n[HTML Form Attributes](#html-form-attributes-️)\r\n\r\n[HTML Form Elements](#html-form-elements-️)\r\n\r\n[HTML Input Types](#html-input-types-️)\r\n\r\n[HTML Input Attributes](#html-input-attributes-️)\r\n\r\n[Input Form Attributes](#html-input-form-attributes-️)\r\n\r\n\r\n**HTML Graphics**\r\n\r\n[HTML Canvas]()\r\n\r\n[HTML SVG]()\r\n\r\n**HTML Media**\r\n\r\n[HTML Media]()\r\n\r\n[HTML Video]()\r\n\r\n[HTML Audio]()\r\n\r\n[HTML Plug-ins]()\r\n\r\n[HTML YouTube]()\r\n\r\n**HTML APIs**\r\n\r\n[HTML Geolocation]()\r\n\r\n[HTML Drag/Drop]()\r\n\r\n[HTML Web Storage]()\r\n\r\n[HTML Web Workers]()\r\n\r\n[HTML SSE]()\r\n\r\n**HTML References**\r\n\r\n[HTML Tag List](#html-references-️)\r\n\r\n[HTML Attributes](#html-references-️)\r\n\r\n[HTML Global Attributes](#html-references-️)\r\n\r\n[HTML Browser Support](#html-references-️)\r\n\r\n[HTML Events](#html-references-️)\r\n\r\n[HTML Colors](#html-references-️)\r\n\r\n[HTML Canvas](#html-references-️)\r\n\r\n[HTML Audio/Video](#html-references-️)\r\n\r\n[HTML Doctypes](#html-references-️)\r\n\r\n[HTML Character Sets](#html-references-️)\r\n\r\n[HTML URL Encode](#html-references-️)\r\n\r\n[HTML Lang Codes](#html-references-️)\r\n\r\n[HTTP Messages](#html-references-️)\r\n\r\n[HTTP Methods](#html-references-️)\r\n\r\n[PX to EM Converter](#html-references-️)\r\n\r\n[Keyboard Shortcuts](#html-references-️)\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e CSS\u003c/summary\u003e\r\n\r\n \u003ca href=\"./CSS.md\"\u003eCSS Tutorial\u003c/a\u003e\r\n \r\n\u003c/details\u003e\r\n\r\n- [Final Project!](https://github.com/The-Young-Programer/HTML-CSS/tree/main/Projects)\r\n- And now, the end is near\r\n\r\n## HTML Time. Let's Go.\r\n\r\n---\r\n\r\n### HTML Introduction [⬆️](#table-of-contents)\r\n\r\nHTML is the standard markup language for creating Web pages.\r\n\r\nWhat is HTML?\r\n\r\n - HTML stands for Hyper Text Markup Language\r\n - HTML is the standard markup language for creating Web pages\r\n - HTML describes the structure of a Web page\r\n - HTML consists of a series of elements\r\n - HTML elements tell the browser how to display the content\r\n - HTML elements label pieces of content such as \"this is a heading\", \"this is a paragraph\", \"this is a link\", etc.\r\n\r\nA Simple HTML Structure\r\n \r\n Example\r\n\r\n ```\r\n\t\t\u003c!DOCTYPE html\u003e\r\n\t\t\u003chtml\u003e\r\n\t\t\u003chead\u003e\r\n\t\t\u003ctitle\u003ePage Title\u003c/title\u003e\r\n\t\t\u003c/head\u003e\r\n\t\t\u003cbody\u003e\r\n\r\n\t\t\u003ch1\u003eMy First Heading\u003c/h1\u003e\r\n\t\t\u003cp\u003eMy first paragraph.\u003c/p\u003e\r\n\r\n\t\t\u003c/body\u003e\r\n\t\t\u003c/html\u003e\r\n ```\r\n\r\n Example Explained\r\n\r\n - The `\u003c!DOCTYPE html\u003e` declaration defines that this document is an HTML5 document\r\n - The `\u003chtml\u003e` element is the root element of an HTML page\r\n - The `\u003chead\u003e` element contains meta information about the HTML page\r\n - The `\u003ctitle\u003e` element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)\r\n - The `\u003cbody\u003e` element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.\r\n - The `\u003ch1\u003e` element defines a large heading\r\n - The `\u003cp\u003e` element defines a paragraph\r\n\r\n\r\nWhat is an HTML Element?\r\n\r\n An HTML element is defined by a start tag, some content, and an end tag:\r\n\t`\u003ctagname\u003e` Content goes here... `\u003c/tagname\u003e`\r\n\r\n - The HTML element is everything from the start tag to the end tag:\r\n \r\n\t`\u003ch1\u003e`My First Heading`\u003c/h1\u003e`\r\n\t`\u003cp\u003e`My first paragraph.`\u003c/p\u003e`\r\n\r\n\r\n\t| Start tag | Element content | End tag |\r\n\t|-----------|----------------------|-----------|\r\n\t| `\u003ch1\u003e` | My First Heading | `\u003c/h1\u003e` |\r\n\t| `\u003cp\u003e` | My first paragraph. | `\u003c/p\u003e` |\r\n\t| `\u003cbr\u003e` | none | none |\r\n\r\n\r\n\t**Note:** Some HTML elements have no content (like the `\u003cbr\u003e` element). These elements are called empty elements.\r\n\tEmpty elements do not have an end tag!\r\n\r\n\r\nHTML History\r\n\r\n Since the early days of the World Wide Web, there have been many versions of HTML:\r\n\r\n | Year | Version |\r\n |------|-------------------------------------------------|\r\n | 1989 | Tim Berners-Lee invented www |\r\n | 1991 | Tim Berners-Lee invented HTML |\r\n | 1993 | Dave Raggett drafted HTML+ |\r\n | 1995 | HTML Working Group defined HTML 2.0 |\r\n | 1997 | W3C Recommendation: HTML 3.2 |\r\n | 1999 | W3C Recommendation: HTML 4.01 |\r\n | 2000 | W3C Recommendation: XHTML 1.0 |\r\n | 2008 | WHATWG HTML5 First Public Draft |\r\n | 2012 | WHATWG HTML5 Living Standard |\r\n | 2014 | W3C Recommendation: HTML5 |\r\n | 2016 | W3C Candidate Recommendation: HTML 5.1 |\r\n | 2017 | W3C Recommendation: HTML5.1 2nd Edition |\r\n | 2017 | W3C Recommendation: HTML5.2 | \r\n\r\n\r\n---\r\n\r\n### HTML Editors [⬆️](#table-of-contents)\r\n\r\nSo the first thing you'll need is an editor to edit your code. There's tons of options out there.\r\n\r\n - Notepad/TextEdit: This is about as basic as you can get. It's totally okay if you want to use this\r\n - Visual Studio Code: This is what I typically use. It's open source and has TONS of extensions available.\r\n - Sublime Text: This is a pretty popular option. Very clean interface.\r\n - CodePen Projects: This is an in-browser code editor, so you can code directly within the web browser, no downloads required.\r\n - Glitch: This is another in-browser code editor. It is meant for larger projects, but it's nice to not have to download anything!\r\n\r\n\r\nWeb pages can be created and modified by using professional HTML editors.\r\n\r\nHowever, for learning HTML we recommend a simple text editor like Visual Studio Code\r\n\r\nFollow the steps below to create your first web page with VS Code\r\n \r\n - Step 1: Open VS Code (PC)\r\n\r\n\tThen open a new document to place the code.\r\n\r\n\r\n - Step 2: Write Some HTML\r\n\r\n\tWrite or copy the following HTML code into VsCode:\r\n\r\n\t```\r\n\t\t\u003c!DOCTYPE html\u003e\r\n\t\t\u003chtml\u003e\r\n\t\t\u003cbody\u003e\r\n\r\n\t\t\u003ch1\u003eMy First Heading\u003c/h1\u003e\r\n\r\n\t\t\u003cp\u003eMy first paragraph.\u003c/p\u003e\r\n\r\n\t\t\u003c/body\u003e\r\n\t\t\u003c/html\u003e\r\n\t```\r\n\r\n\r\n - Step 3: Save the HTML Page\r\n\r\n\t- Save the file on your computer. \r\n\r\n\t- Name the file \"index.html\"\r\n\r\n\t- View in Browser\r\n\r\n\tTip: You can use either .htm or .html as file extension. There is no difference; it is up to you.\r\n\r\n\r\n - Step 4: View the HTML Page in Your Browser\r\n\r\n\t- Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose \"Open with\").\r\n\r\n\t- The result will look much like this:\r\n\r\n\t\u003ca name=\"README\"\u003e\u003cimg src=\"./Images/img_chrome.png\"/\u003e\u003c/a\u003e\r\n\r\n\tView in Browser\r\n\r\n---\r\n\r\n\r\n### HTML Basic Examples [⬆️](#table-of-contents)\r\n\r\nIn this chapter, we will show some basic HTML examples. \r\nDon't worry if we use tags you have not learned about yet.\r\n\r\n#### HTML Documents\r\n\r\nAll HTML documents must start with a document type declaration: `\u003c!DOCTYPE html\u003e`.\r\n\r\nThe HTML document itself begins with `\u003chtml\u003e` and ends with `\u003c/html\u003e`. \r\nThe visible part of the HTML document is between `\u003cbody\u003e` and `\u003c/body\u003e`.\r\n\r\n##### Example:\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003cbody\u003e\r\n\r\n\u003ch1\u003eMy First Heading\u003c/h1\u003e\r\n\u003cp\u003eMy first paragraph.\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n\r\n\r\n#### The `\u003c!DOCTYPE\u003e` Declaration\r\n\r\nThe `\u003c!DOCTYPE\u003e` declaration represents the document type and helps browsers display web pages correctly. \r\nIt must only appear once, at the top of the page (before any HTML tags). \r\nThe `\u003c!DOCTYPE\u003e` declaration is not case-sensitive. \r\nThe `\u003c!DOCTYPE\u003e` declaration for HTML5 is:\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML Headings\r\n\r\nHTML headings are defined with the `\u003ch1\u003e` to `\u003ch6\u003e` tags. \r\n`\u003ch1\u003e` defines the most important heading, and `\u003ch6\u003e` defines the least important heading.\r\n\r\n##### Example:\r\n```html\r\n\u003ch1\u003eThis is heading 1\u003c/h1\u003e\r\n\u003ch2\u003eThis is heading 2\u003c/h2\u003e\r\n\u003ch3\u003eThis is heading 3\u003c/h3\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML Paragraphs\r\n\r\nHTML paragraphs are defined with the `\u003cp\u003e` tag.\r\n\r\n##### Example:\r\n```html\r\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\u003cp\u003eThis is another paragraph.\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML Links\r\n\r\nHTML links are defined with the `\u003ca\u003e` tag.\r\n\r\n##### Example:\r\n```html\r\n\u003ca href=\"https://www.nemonet.com\"\u003eThis is a link\u003c/a\u003e\r\n```\r\n\r\nThe link's destination is specified in the `href` attribute. \r\nAttributes are used to provide additional information about HTML elements. \r\nYou will learn more about attributes in a later chapter.\r\n\r\n\r\n#### HTML Images\r\n\r\nHTML images are defined with the `\u003cimg\u003e` tag. \r\nThe source file (`src`), alternative text (`alt`), width, and height are provided as attributes.\r\n\r\n##### Example:\r\n```html\r\n\u003cimg src=\"nemonet.jpg\" alt=\"nemonet.com\" width=\"104\" height=\"142\"\u003e\r\n```\r\n\r\n\r\n#### How to View HTML Source\r\n\r\nHave you ever seen a web page and wondered \"Hey! How did they do that?\"\r\n\r\n##### View HTML Source Code:\r\n- Click `CTRL + U` on an HTML page, or \r\n- Right-click on the page and select **\"View Page Source\"**. \r\n This will open a new tab containing the HTML source code of the page.\r\n\r\n##### Inspect an HTML Element:\r\n- Right-click on an element (or a blank area) and choose **\"Inspect\"**. \r\n This allows you to see both the HTML and the CSS.\r\n- You can also edit the HTML or CSS on-the-fly in the **Elements** or **Styles** panel that opens.\r\n\r\n\r\n---\r\n\r\n\r\n### HTML Elements [⬆️](#table-of-contents)\r\n\r\nAn HTML element is defined by a start tag, some content, and an end tag.\r\n\r\n#### HTML Elements\r\n\r\nThe HTML element is everything from the start tag to the end tag:\r\n\r\n```html\r\n\u003ctagname\u003eContent goes here...\u003c/tagname\u003e\r\n```\r\n\r\n##### Examples of some HTML elements:\r\n```html\r\n\u003ch1\u003eMy First Heading\u003c/h1\u003e\r\n\u003cp\u003eMy first paragraph.\u003c/p\u003e\r\n```\r\n\r\n| Start tag | Element content | End tag |\r\n|-----------|----------------------|--------------------|\r\n| `\u003ch1\u003e` | My First Heading | `\u003c/h1\u003e` |\r\n| `\u003cp\u003e` | My first paragraph. | `\u003c/p\u003e` |\r\n| `\u003cbr\u003e` | none | none |\r\n\r\n**Note**: Some HTML elements have no content (like the `\u003cbr\u003e` element). These elements are called **empty elements**. Empty elements do not have an end tag!\r\n\r\n#### Nested HTML Elements\r\n\r\nHTML elements can be nested (this means that elements can contain other elements). All HTML documents consist of nested HTML elements.\r\n\r\nThe following example contains four HTML elements (`\u003chtml\u003e`, `\u003cbody\u003e`, `\u003ch1\u003e`, and `\u003cp\u003e`):\r\n\r\n##### Example:\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003cbody\u003e\r\n\r\n\u003ch1\u003eMy First Heading\u003c/h1\u003e\r\n\u003cp\u003eMy first paragraph.\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n##### Example Explained\r\n\r\n- The `\u003chtml\u003e` element is the root element and it defines the whole HTML document.\r\n - It has a start tag `\u003chtml\u003e` and an end tag `\u003c/html\u003e`.\r\n \r\n- Then, inside the `\u003chtml\u003e` element, there is a `\u003cbody\u003e` element:\r\n ```html\r\n \u003cbody\u003e\r\n \u003ch1\u003eMy First Heading\u003c/h1\u003e\r\n \u003cp\u003eMy first paragraph.\u003c/p\u003e\r\n \u003c/body\u003e\r\n ```\r\n\r\n - The `\u003cbody\u003e` element defines the document's body.\r\n - It has a start tag `\u003cbody\u003e` and an end tag `\u003c/body\u003e`.\r\n\r\n- Inside the `\u003cbody\u003e` element, there are two other elements: `\u003ch1\u003e` and `\u003cp\u003e`:\r\n ```html\r\n \u003ch1\u003eMy First Heading\u003c/h1\u003e\r\n \u003cp\u003eMy first paragraph.\u003c/p\u003e\r\n ```\r\n\r\n - The `\u003ch1\u003e` element defines a heading.\r\n - It has a start tag `\u003ch1\u003e` and an end tag `\u003c/h1\u003e`:\r\n ```html\r\n \u003ch1\u003eMy First Heading\u003c/h1\u003e\r\n ```\r\n\r\n - The `\u003cp\u003e` element defines a paragraph.\r\n - It has a start tag `\u003cp\u003e` and an end tag `\u003c/p\u003e`:\r\n ```html\r\n \u003cp\u003eMy first paragraph.\u003c/p\u003e\r\n ```\r\n\r\n#### Never Skip the End Tag\r\n\r\nSome HTML elements will display correctly, even if you forget the end tag:\r\n\r\n##### Example:\r\n```html\r\n\u003chtml\u003e\r\n\u003cbody\u003e\r\n\r\n\u003cp\u003eThis is a paragraph\r\n\u003cp\u003eThis is a paragraph\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\nHowever, **never rely on this**! Unexpected results and errors may occur if you forget the end tag!\r\n\r\n#### Empty HTML Elements\r\n\r\nHTML elements with no content are called **empty elements**. The `\u003cbr\u003e` tag defines a line break and is an empty element without a closing tag:\r\n\r\n##### Example:\r\n```html\r\n\u003cp\u003eThis is a \u003cbr\u003e paragraph with a line break.\u003c/p\u003e\r\n```\r\n\r\n#### HTML is Not Case Sensitive\r\n\r\nHTML tags are not case sensitive: `\u003cP\u003e` means the same as `\u003cp\u003e`.\r\n\r\nThe HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML and demands lowercase for stricter document types like XHTML.\r\n\r\n---\r\n\r\n\r\n### HTML Attributes [⬆️](#table-of-contents)\r\n\r\nHTML attributes provide additional information about HTML elements.\r\n\r\n#### HTML Attributes\r\n\r\n- All HTML elements can have attributes\r\n- Attributes provide additional information about elements\r\n- Attributes are always specified in the start tag\r\n- Attributes usually come in name/value pairs like: `name=\"value\"`\r\n\r\n#### The `href` Attribute\r\n\r\nThe `\u003ca\u003e` tag defines a hyperlink. The `href` attribute specifies the URL of the page the link goes to:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003ca href=\"https://www.nemonet.com\"\u003eVisit nemonet\u003c/a\u003e\r\n```\r\n\r\nYou will learn more about links in our HTML Links chapter.\r\n\r\n#### The `src` Attribute\r\n\r\nThe `\u003cimg\u003e` tag is used to embed an image in an HTML page. The `src` attribute specifies the path to the image to be displayed:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cimg src=\"img_girl.jpg\"\u003e\r\n```\r\n\r\nThere are two ways to specify the URL in the `src` attribute:\r\n\r\n1. **Absolute URL** - Links to an external image that is hosted on another website. Example: `src=\"https://www.nemonet.com/images/img_girl.jpg\"`.\r\n\r\n **Notes:** External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.\r\n\r\n2. **Relative URL** - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: `src=\"img_girl.jpg\"`. If the URL begins with a slash, it will be relative to the domain. Example: `src=\"/images/img_girl.jpg\"`.\r\n\r\n **Tip:** It is almost always best to use relative URLs. They will not break if you change domain.\r\n\r\n#### The `width` and `height` Attributes\r\n\r\nThe `\u003cimg\u003e` tag should also contain the `width` and `height` attributes, which specify the width and height of the image (in pixels):\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cimg src=\"img_girl.jpg\" width=\"500\" height=\"600\"\u003e\r\n```\r\n\r\n#### The `alt` Attribute\r\n\r\nThe required `alt` attribute for the `\u003cimg\u003e` tag specifies an alternate text for an image if the image for some reason cannot be displayed. This can be due to a slow connection, an error in the `src` attribute, or if the user uses a screen reader.\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cimg src=\"img_girl.jpg\" alt=\"Girl with a jacket\"\u003e\r\n```\r\n\r\n**Example:**\r\n\r\nSee what happens if we try to display an image that does not exist:\r\n\r\n```html\r\n\u003cimg src=\"img_typo.jpg\" alt=\"Girl with a jacket\"\u003e\r\n```\r\n\r\nYou will learn more about images in our HTML Images chapter.\r\n\r\n#### The `style` Attribute\r\n\r\nThe `style` attribute is used to add styles to an element, such as color, font, size, and more.\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cp style=\"color:red;\"\u003eThis is a red paragraph.\u003c/p\u003e\r\n```\r\n\r\nYou will learn more about styles in our HTML Styles chapter.\r\n\r\n#### The `lang` Attribute\r\n\r\nYou should always include the `lang` attribute inside the `\u003chtml\u003e` tag to declare the language of the Web page. This is meant to assist search engines and browsers.\r\n\r\nThe following example specifies English as the language:\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml lang=\"en\"\u003e\r\n\u003cbody\u003e\r\n...\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\nCountry codes can also be added to the language code in the `lang` attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.\r\n\r\nThe following example specifies English as the language and United States as the country:\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml lang=\"en-US\"\u003e\r\n\u003cbody\u003e\r\n...\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\nYou can see all the language codes in our HTML Language Code Reference.\r\n\r\n#### The `title` Attribute\r\n\r\nThe `title` attribute defines some extra information about an element.\r\n\r\nThe value of the `title` attribute will be displayed as a tooltip when you mouse over the element:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cp title=\"I'm a tooltip\"\u003eThis is a paragraph.\u003c/p\u003e\r\n```\r\n\r\n#### We Suggest: Always Use Lowercase Attributes\r\n\r\nThe HTML standard does not require lowercase attribute names.\r\n\r\nThe `title` attribute (and all other attributes) can be written with uppercase or lowercase like `title` or `TITLE`.\r\n\r\nHowever, W3C recommends lowercase attributes in HTML and demands lowercase attributes for stricter document types like XHTML.\r\n\r\nAt nemonet, we always use lowercase attribute names.\r\n\r\n#### We Suggest: Always Quote Attribute Values\r\n\r\nThe HTML standard does not require quotes around attribute values.\r\n\r\nHowever, W3C recommends quotes in HTML and demands quotes for stricter document types like XHTML.\r\n\r\n**Good:**\r\n\r\n```html\r\n\u003ca href=\"https://www.nemonet.com/html/\"\u003eVisit our HTML tutorial\u003c/a\u003e\r\n```\r\n\r\n**Bad:**\r\n\r\n```html\r\n\u003ca href=https://www.nemonet.com/html/\u003eVisit our HTML tutorial\u003c/a\u003e\r\n```\r\n\r\nSometimes you have to use quotes. This example will not display the `title` attribute correctly because it contains a space:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cp title=About nemonet\u003e\r\n```\r\n\r\nAt nemonet, we always use quotes around attribute values.\r\n\r\n#### Single or Double Quotes?\r\n\r\nDouble quotes around attribute values are the most common in HTML, but single quotes can also be used.\r\n\r\nIn some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:\r\n\r\n```html\r\n\u003cp title='John \"ShotGun\" Nelson'\u003e\r\n```\r\n\r\nOr vice versa:\r\n\r\n```html\r\n\u003cp title=\"John 'ShotGun' Nelson\"\u003e\r\n```\r\n\r\n#### Chapter Summary\r\n\r\n- All HTML elements can have attributes\r\n- The `href` attribute of `\u003ca\u003e` specifies the URL of the page the link goes to\r\n- The `src` attribute of `\u003cimg\u003e` specifies the path to the image to be displayed\r\n- The `width` and `height` attributes of `\u003cimg\u003e` provide size information for images\r\n- The `alt` attribute of `\u003cimg\u003e` provides an alternate text for an image\r\n- The `style` attribute is used to add styles to an element, such as color, font, size, and more\r\n- The `lang` attribute of the `\u003chtml\u003e` tag declares the language of the Web page\r\n- The `title` attribute defines some extra information about an element\r\n\r\n---\r\n\r\n\r\n### HTML Headings [⬆️](#table-of-contents)\r\n\r\nHTML headings are titles or subtitles that you want to display on a webpage.\r\n\r\n##### Example:\r\n\r\n- **Heading 1**\r\n- **Heading 2**\r\n- **Heading 3**\r\n- **Heading 4**\r\n- **Heading 5**\r\n- **Heading 6**\r\n\r\n\r\n\r\n#### HTML Headings\r\n\r\nHTML headings are defined with the `\u003ch1\u003e` to `\u003ch6\u003e` tags.\r\n\r\n- `\u003ch1\u003e` defines the most important heading.\r\n- `\u003ch6\u003e` defines the least important heading.\r\n\r\n##### Example:\r\n\r\n```html\r\n\u003ch1\u003eHeading 1\u003c/h1\u003e\r\n\u003ch2\u003eHeading 2\u003c/h2\u003e\r\n\u003ch3\u003eHeading 3\u003c/h3\u003e\r\n\u003ch4\u003eHeading 4\u003c/h4\u003e\r\n\u003ch5\u003eHeading 5\u003c/h6\u003e\r\n\u003ch6\u003eHeading 6\u003c/h6\u003e\r\n```\r\n\r\n\u003e **Note:** Browsers automatically add some white space (a margin) before and after a heading.\r\n\r\n\r\n\r\n#### Headings Are Important\r\n\r\n- **Search engines** use headings to index the structure and content of your web pages.\r\n- Users often **skim** a page by its headings, so it's important to use them to show the document structure.\r\n\r\n- `\u003ch1\u003e` headings should be used for **main headings**, followed by `\u003ch2\u003e` for subheadings, and then less important headings like `\u003ch3\u003e`, and so on.\r\n\r\n\u003e **Note:** Use HTML headings for headings only. Don't use headings to make text **BIG** or **bold**.\r\n\r\n\r\n\r\n#### Bigger Headings\r\n\r\nEach HTML heading has a default size, but you can customize the size with the `style` attribute, using the CSS `font-size` property.\r\n\r\n##### Example:\r\n\r\n```html\r\n\u003ch1 style=\"font-size:60px;\"\u003eHeading 1\u003c/h1\u003e\r\n```\r\n\r\n---\r\n\r\n\r\n### HTML Paragraphs [⬆️](#table-of-contents)\r\n\r\nA paragraph always starts on a new line, and is usually a block of text.\r\n\r\n#### HTML Paragraphs\r\n\r\nThe HTML `\u003cp\u003e` element defines a paragraph.\r\n\r\nA paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.\r\n\r\n##### Example\r\n```html\r\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\u003cp\u003eThis is another paragraph.\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML Display\r\n\r\nYou cannot be sure how HTML will be displayed.\r\n\r\nLarge or small screens, and resized windows will create different results.\r\n\r\nWith HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.\r\n\r\nThe browser will automatically remove any extra spaces and lines when the page is displayed:\r\n\r\n##### Example\r\n```html\r\n\u003cp\u003e\r\n This paragraph\r\n contains a lot of lines\r\n in the source code,\r\n but the browser\r\n ignores it.\r\n\u003c/p\u003e\r\n\r\n\u003cp\u003e\r\n This paragraph\r\n contains a lot of spaces\r\n in the source code,\r\n but the browser\r\n ignores it.\r\n\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML Horizontal Rules\r\n\r\nThe `\u003chr\u003e` tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.\r\n\r\nThe `\u003chr\u003e` element is used to separate content (or define a change) in an HTML page:\r\n\r\n##### Example\r\n```html\r\n\u003ch1\u003eThis is heading 1\u003c/h1\u003e\r\n\u003cp\u003eThis is some text.\u003c/p\u003e\r\n\u003chr\u003e\r\n\u003ch2\u003eThis is heading 2\u003c/h2\u003e\r\n\u003cp\u003eThis is some other text.\u003c/p\u003e\r\n\u003chr\u003e\r\n```\r\n\r\nThe `\u003chr\u003e` tag is an empty tag, which means that it has no end tag.\r\n\r\n\r\n\r\n#### HTML Line Breaks\r\n\r\nThe HTML `\u003cbr\u003e` element defines a line break.\r\n\r\nUse `\u003cbr\u003e` if you want a line break (a new line) without starting a new paragraph:\r\n\r\n##### Example\r\n```html\r\n\u003cp\u003eThis is\u003cbr\u003ea paragraph\u003cbr\u003ewith line breaks.\u003c/p\u003e\r\n```\r\n\r\nThe `\u003cbr\u003e` tag is an empty tag, which means that it has no end tag.\r\n\r\n\r\n\r\n#### The Poem Problem\r\n\r\nThis poem will display on a single line:\r\n\r\n##### Example\r\n```html\r\n\u003cp\u003e\r\n My Bonnie lies over the ocean.\r\n\r\n My Bonnie lies over the sea.\r\n\r\n My Bonnie lies over the ocean.\r\n\r\n Oh, bring back my Bonnie to me.\r\n\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### Solution - The HTML `\u003cpre\u003e` Element\r\n\r\nThe HTML `\u003cpre\u003e` element defines preformatted text.\r\n\r\nThe text inside a `\u003cpre\u003e` element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:\r\n\r\n##### Example\r\n```html\r\n\u003cpre\u003e\r\n My Bonnie lies over the ocean.\r\n\r\n My Bonnie lies over the sea.\r\n\r\n My Bonnie lies over the ocean.\r\n\r\n Oh, bring back my Bonnie to me.\r\n\u003c/pre\u003e\r\n```\r\n\r\n---\r\n\r\n\r\n### HTML Styles [⬆️](#table-of-contents)\r\n\r\n The HTML style attribute is used to add styles to an element, such as color, font, size, and more.\r\n\r\n##### Example\r\n\r\n`\u003cp style=\"color:red;\"\u003eI am Red\u003c/p\u003e`\r\n\r\n`\u003cp style=\"color:blue;\"\u003eI am Blue\u003c/p\u003e`\r\n\r\n`\u003cp style=\"font-size:300%;\"\u003eI am Big\u003c/p\u003e`\r\n\r\n\r\n\r\n##### The HTML Style Attribute\r\n\r\nSetting the style of an HTML element can be done with the `style` attribute.\r\n\r\nThe HTML `style` attribute has the following syntax:\r\n```\r\n\u003ctagname style=\"property:value;\"\u003e\r\n```\r\n\r\n- The **property** is a CSS property.\r\n- The **value** is a CSS value.\r\n\r\n*You will learn more about CSS later in this tutorial.*\r\n\r\n\r\n\r\n#### Background Color\r\n\r\nThe CSS `background-color` property defines the background color for an HTML element.\r\n\r\n##### Example\r\n\r\nSet the background color for a page to powderblue:\r\n\r\n```\r\n\u003cbody style=\"background-color:powderblue;\"\u003e\r\n \u003ch1\u003eThis is a heading\u003c/h1\u003e\r\n \u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\u003c/body\u003e\r\n```\r\n\r\n##### Example\r\n\r\nSet background color for two different elements:\r\n\r\n```\r\n\u003cbody\u003e\r\n \u003ch1 style=\"background-color:powderblue;\"\u003eThis is a heading\u003c/h1\u003e\r\n \u003cp style=\"background-color:tomato;\"\u003eThis is a paragraph.\u003c/p\u003e\r\n\u003c/body\u003e\r\n```\r\n\r\n\r\n\r\n#### Text Color\r\n\r\nThe CSS `color` property defines the text color for an HTML element:\r\n\r\n##### Example\r\n\r\n```\r\n\u003ch1 style=\"color:blue;\"\u003eThis is a heading\u003c/h1\u003e\r\n\u003cp style=\"color:red;\"\u003eThis is a paragraph.\u003c/p\u003e\r\n```\r\n\r\n\r\n#### Fonts\r\n\r\nThe CSS `font-family` property defines the font to be used for an HTML element:\r\n\r\n##### Example\r\n\r\n```\r\n\u003ch1 style=\"font-family:verdana;\"\u003eThis is a heading\u003c/h1\u003e\r\n\u003cp style=\"font-family:courier;\"\u003eThis is a paragraph.\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### Text Size\r\n\r\nThe CSS `font-size` property defines the text size for an HTML element:\r\n\r\n##### Example\r\n\r\n```\r\n\u003ch1 style=\"font-size:300%;\"\u003eThis is a heading\u003c/h1\u003e\r\n\u003cp style=\"font-size:160%;\"\u003eThis is a paragraph.\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### Text Alignment\r\n\r\nThe CSS `text-align` property defines the horizontal text alignment for an HTML element:\r\n\r\n##### Example\r\n\r\n```\r\n\u003ch1 style=\"text-align:center;\"\u003eCentered Heading\u003c/h1\u003e\r\n\u003cp style=\"text-align:center;\"\u003eCentered paragraph.\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### Chapter Summary\r\n\r\n- Use the `style` attribute for styling HTML elements.\r\n- Use `background-color` for background color.\r\n- Use `color` for text colors.\r\n- Use `font-family` for text fonts.\r\n- Use `font-size` for text sizes.\r\n- Use `text-align` for text alignment.\r\n\r\n---\r\n\r\n### HTML Text Formatting [⬆️](#table-of-contents)\r\n\r\nHTML contains several elements for defining text with special meaning.\r\n\r\n##### Example\r\n\r\n**This text is bold** \r\n*This text is italic* \r\nThis is _subscript_ and ^superscript^\r\n\r\n\r\n\r\n#### HTML Formatting Elements\r\n\r\nFormatting elements are designed to display special types of text:\r\n\r\n- `\u003cb\u003e` - **Bold text**\r\n- `\u003cstrong\u003e` - **Important text**\r\n- `\u003ci\u003e` - *Italic text*\r\n- `\u003cem\u003e` - *Emphasized text*\r\n- `\u003cmark\u003e` - Marked text\r\n- `\u003csmall\u003e` - Smaller text\r\n- `\u003cdel\u003e` - ~~Deleted text~~\r\n- `\u003cins\u003e` - Inserted text\r\n- `\u003csub\u003e` - Subscript text\r\n- `\u003csup\u003e` - Superscript text\r\n\r\n\r\n\r\n#### HTML `\u003cb\u003e` and `\u003cstrong\u003e` Elements\r\n\r\nThe HTML `\u003cb\u003e` element defines bold text, without any extra importance.\r\n\r\n##### Example:\r\n```html\r\n\u003cb\u003eThis text is bold\u003c/b\u003e\r\n```\r\n\r\nThe HTML `\u003cstrong\u003e` element defines text with strong importance. The content inside is typically displayed in bold.\r\n\r\n##### Example:\r\n```html\r\n\u003cstrong\u003eThis text is important!\u003c/strong\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML `\u003ci\u003e` and `\u003cem\u003e` Elements\r\n\r\nThe HTML `\u003ci\u003e` element defines a part of the text in an alternate voice or mood. The content inside is typically displayed in italic.\r\n\r\n**Tip:** The `\u003ci\u003e` tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.\r\n\r\n##### Example:\r\n```html\r\n\u003ci\u003eThis text is italic\u003c/i\u003e\r\n```\r\n\r\nThe HTML `\u003cem\u003e` element defines emphasized text. The content inside is typically displayed in italic.\r\n\r\n**Tip:** A screen reader will pronounce the words in `\u003cem\u003e` with an emphasis, using verbal stress.\r\n\r\n##### Example:\r\n```html\r\n\u003cem\u003eThis text is emphasized\u003c/em\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML `\u003csmall\u003e` Element\r\n\r\nThe HTML `\u003csmall\u003e` element defines smaller text:\r\n\r\n##### Example:\r\n```html\r\n\u003csmall\u003eThis is some smaller text.\u003c/small\u003e\r\n```\r\n\r\n\r\n#### HTML `\u003cmark\u003e` Element\r\n\r\nThe HTML `\u003cmark\u003e` element defines text that should be marked or highlighted:\r\n\r\n##### Example:\r\n```html\r\n\u003cp\u003eDo not forget to buy \u003cmark\u003emilk\u003c/mark\u003e today.\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML `\u003cdel\u003e` Element\r\n\r\nThe HTML `\u003cdel\u003e` element defines text that has been deleted from a document. Browsers will usually strike through deleted text:\r\n\r\n##### Example:\r\n```html\r\n\u003cp\u003eMy favorite color is \u003cdel\u003eblue\u003c/del\u003e red.\u003c/p\u003e\r\n```\r\n\r\n\r\n#### HTML `\u003cins\u003e` Element\r\n\r\nThe HTML `\u003cins\u003e` element defines text that has been inserted into a document. Browsers will usually underline inserted text:\r\n\r\n##### Example:\r\n```html\r\n\u003cp\u003eMy favorite color is \u003cdel\u003eblue\u003c/del\u003e \u003cins\u003ered\u003c/ins\u003e.\u003c/p\u003e\r\n```\r\n\r\n\r\n#### HTML `\u003csub\u003e` Element\r\n\r\nThe 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. It can be used for chemical formulas like H₂O.\r\n\r\n##### Example:\r\n```html\r\n\u003cp\u003eThis is \u003csub\u003esubscripted\u003c/sub\u003e text.\u003c/p\u003e\r\n```\r\n\r\n\r\n#### HTML `\u003csup\u003e` Element\r\n\r\nThe 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. It can be used for footnotes like WWW[1].\r\n\r\n##### Example:\r\n```html\r\n\u003cp\u003eThis is \u003csup\u003esuperscripted\u003c/sup\u003e text.\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML Text Formatting Elements\r\n\r\n| Tag | Description |\r\n|------------|---------------------------------------------------|\r\n| `\u003cb\u003e` | Defines bold text |\r\n| `\u003cem\u003e` | Defines emphasized text |\r\n| `\u003ci\u003e` | Defines a part of text in an alternate voice/mood |\r\n| `\u003csmall\u003e` | Defines smaller text |\r\n| `\u003cstrong\u003e` | Defines important text |\r\n| `\u003csub\u003e` | Defines subscript text |\r\n| `\u003csup\u003e` | Defines superscript text |\r\n| `\u003cins\u003e` | Defines inserted text |\r\n| `\u003cdel\u003e` | Defines deleted text |\r\n| `\u003cmark\u003e` | Defines marked/highlighted text |\r\n\r\n\r\n\r\nFor a complete list of all available HTML tags, visit our [HTML Tag Reference](#).\r\n\r\n---\r\n\r\n\r\n### HTML Quotation and Citation Elements [⬆️](#table-of-contents)\r\n\r\nIn this chapter, we will go through the `\u003cblockquote\u003e`, `\u003cq\u003e`, `\u003cabbr\u003e`, `\u003caddress\u003e`, `\u003ccite\u003e`, and `\u003cbdo\u003e` HTML elements.\r\n\r\n#### Example\r\n\r\nHere is a quote from WWF's website:\r\n\r\n\u003e For 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.\r\n\r\n\r\n#### HTML `\u003cblockquote\u003e` for Quotations\r\n\r\nThe HTML `\u003cblockquote\u003e` element defines a section that is quoted from another source.\r\n\r\nBrowsers usually indent `\u003cblockquote\u003e` elements.\r\n\r\n##### Example\r\n```html\r\n\u003cp\u003eHere is a quote from WWF's website:\u003c/p\u003e\r\n\u003cblockquote cite=\"http://www.worldwildlife.org/who/index.html\"\u003e\r\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.\r\n\u003c/blockquote\u003e\r\n```\r\n\r\n\r\n#### HTML `\u003cq\u003e` for Short Quotations\r\n\r\nThe HTML `\u003cq\u003e` tag defines a short quotation.\r\n\r\nBrowsers normally insert quotation marks around the quotation.\r\n\r\n##### Example\r\n```html\r\n\u003cp\u003eWWF's goal is to: \u003cq\u003eBuild a future where people live in harmony with nature.\u003c/q\u003e\u003c/p\u003e\r\n```\r\n\r\n\r\n#### HTML `\u003cabbr\u003e` for Abbreviations\r\n\r\nThe HTML `\u003cabbr\u003e` tag defines an abbreviation or acronym, like \"HTML\", \"CSS\", \"Mr.\", \"Dr.\", \"ASAP\", \"ATM\".\r\n\r\nMarking abbreviations can provide useful information to browsers, translation systems, and search engines.\r\n\r\n**Tip:** Use the global `title` attribute to show the description for the abbreviation/acronym when you mouse over the element.\r\n\r\n##### Example\r\n```html\r\n\u003cp\u003eThe \u003cabbr title=\"World Health Organization\"\u003eWHO\u003c/abbr\u003e was founded in 1948.\u003c/p\u003e\r\n```\r\n\r\n\r\n#### HTML `\u003caddress\u003e` for Contact Information\r\n\r\nThe HTML `\u003caddress\u003e` tag defines the contact information for the author/owner of a document or article. This can be an email address, URL, physical address, phone number, or social media handle.\r\n\r\nThe text in the `\u003caddress\u003e` element usually renders in *italic*, and browsers will add a line break before and after the element.\r\n\r\n##### Example\r\n```html\r\n\u003caddress\u003e\r\n Written by John Doe.\u003cbr\u003e\r\n Visit us at:\u003cbr\u003e\r\n Example.com\u003cbr\u003e\r\n Box 564, Disneyland\u003cbr\u003e\r\n USA\r\n\u003c/address\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML `\u003ccite\u003e` for Work Title\r\n\r\nThe HTML `\u003ccite\u003e` tag defines the title of a creative work, such as a book, poem, song, movie, or painting.\r\n\r\n**Note:** A person's name is *not* the title of a work.\r\n\r\nThe text in the `\u003ccite\u003e` element usually renders in *italic*.\r\n\r\n##### Example\r\n```html\r\n\u003cp\u003e\u003ccite\u003eThe Scream\u003c/cite\u003e by Edvard Munch. Painted in 1893.\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML `\u003cbdo\u003e` for Bi-Directional Override\r\n\r\n`BDO` stands for *Bi-Directional Override*.\r\n\r\nThe HTML `\u003cbdo\u003e` tag is used to override the current text direction.\r\n\r\n##### Example\r\n```html\r\n\u003cbdo dir=\"rtl\"\u003eThis text will be written from right to left\u003c/bdo\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML Exercises\r\n\r\n##### Test Yourself With Exercises\r\n\r\n**Exercise:**\r\n\r\nUse an HTML element to add quotation marks around the word \"cool\".\r\n\r\n```html\r\n\u003cp\u003eI am so \u003cq\u003ecool\u003c/q\u003e.\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### HTML Quotation and Citation Elements Summary\r\n\r\n| Tag | Description |\r\n|-------------|---------------------------------------------------------------|\r\n| `\u003cabbr\u003e` | Defines an abbreviation or acronym |\r\n| `\u003caddress\u003e` | Defines contact information for the author/owner of a document |\r\n| `\u003cbdo\u003e` | Defines the text direction |\r\n| `\u003cblockquote\u003e` | Defines a section that is quoted from another source |\r\n| `\u003ccite\u003e` | Defines the title of a work |\r\n| `\u003cq\u003e` | Defines a short inline quotation |\r\n\r\nFor a complete list of all available HTML tags, visit our [HTML Tag Reference](#).\r\n\r\n\r\n---\r\n\r\n\r\n### HTML Comments [⬆️](#table-of-contents)\r\n\r\nHTML comments are not displayed in the browser, but they can help document your HTML source code.\r\n\r\n#### HTML Comment Tag\r\n\r\nYou can add comments to your HTML source by using the following syntax:\r\n\r\n```\r\n\u003c!-- Write your comments here --\u003e\r\n```\r\n\r\nNotice that there is an exclamation point `(!)` in the start tag, but not in the end tag.\r\n\r\n\u003e **Note:** Comments are not displayed by the browser, but they can help document your HTML source code.\r\n\r\n#### Add Comments\r\n\r\nWith comments, you can place notifications and reminders in your HTML code.\r\n\r\n**Example**:\r\n\r\n```\r\n\u003c!-- This is a comment --\u003e\r\n\r\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\r\n\u003c!-- Remember to add more information here --\u003e\r\n```\r\n\r\n#### Hide Content\r\n\r\nComments can be used to hide content. This can be helpful if you hide content temporarily.\r\n\r\n**Example**:\r\n\r\n```\r\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\r\n\u003c!-- \u003cp\u003eThis is another paragraph.\u003c/p\u003e --\u003e\r\n\r\n\u003cp\u003eThis is a paragraph too.\u003c/p\u003e\r\n```\r\n\r\nYou can also hide more than one line. Everything between the `\u003c!--` and the `--\u003e` will be hidden from the display.\r\n\r\n**Example**: Hide a section of HTML code:\r\n\r\n```\r\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\u003c!--\r\n\u003cp\u003eLook at this cool image:\u003c/p\u003e\r\n\u003cimg border=\"0\" src=\"pic_trulli.jpg\" alt=\"Trulli\"\u003e\r\n--\u003e\r\n\u003cp\u003eThis is a paragraph too.\u003c/p\u003e\r\n```\r\n\r\nComments are also great for debugging HTML because you can comment out HTML lines of code one at a time to search for errors.\r\n\r\n#### Hide Inline Content\r\n\r\nComments can be used to hide parts in the middle of the HTML code.\r\n\r\n**Example**: Hide a part of a paragraph:\r\n\r\n```\r\n\u003cp\u003eThis \u003c!-- great text --\u003e is a paragraph.\u003c/p\u003e \r\n```\r\n\r\n---\r\n\r\n\r\n### HTML Colors [⬆️](#table-of-contents)\r\n\r\nHTML colors are specified with **predefined color names**, or with **RGB, HEX, HSL, RGBA**, or **HSLA** values.\r\n\r\n#### Color Names\r\n\r\nIn HTML, a color can be specified by using a **color name**:\r\n\r\n- Tomato\r\n- Orange\r\n- DodgerBlue\r\n- MediumSeaGreen\r\n- Gray\r\n- SlateBlue\r\n- Violet\r\n- LightGray\r\n\r\nHTML supports **140 standard color names**.\r\n\r\n#### Background Color\r\n\r\nYou can set the background color for HTML elements:\r\n\r\n```html\r\n\u003ch1 style=\"background-color:DodgerBlue;\"\u003eHello World\u003c/h1\u003e\r\n\u003cp style=\"background-color:Tomato;\"\u003eLorem ipsum...\u003c/p\u003e\r\n```\r\n\r\n**Example:**\r\n```html\r\n\u003ch1 style=\"background-color:DodgerBlue;\"\u003eHello World\u003c/h1\u003e\r\n\u003cp style=\"background-color:Tomato;\"\u003e\r\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, \r\n sed diam nonummy nibh euismod tincidunt ut laoreet dolore \r\n magna aliquam erat volutpat.\r\n\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### Text Color\r\n\r\nYou can set the color of text:\r\n\r\n```html\r\n\u003ch1 style=\"color:Tomato;\"\u003eHello World\u003c/h1\u003e\r\n\u003cp style=\"color:DodgerBlue;\"\u003eLorem ipsum...\u003c/p\u003e\r\n\u003cp style=\"color:MediumSeaGreen;\"\u003eUt wisi enim...\u003c/p\u003e\r\n```\r\n\r\n**Example:**\r\n```html\r\n\u003ch1 style=\"color:Tomato;\"\u003eHello World\u003c/h1\u003e\r\n\u003cp style=\"color:DodgerBlue;\"\u003e\r\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, \r\n sed diam nonummy nibh euismod tincidunt ut laoreet dolore \r\n magna aliquam erat volutpat.\r\n\u003c/p\u003e\r\n\u003cp style=\"color:MediumSeaGreen;\"\u003e\r\n Ut wisi enim ad minim veniam, quis nostrud exerci tation \r\n ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.\r\n\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n#### Border Color\r\n\r\nYou can set the color of borders:\r\n\r\n```html\r\n\u003ch1 style=\"border:2px solid Tomato;\"\u003eHello World\u003c/h1\u003e\r\n\u003ch1 style=\"border:2px solid DodgerBlue;\"\u003eHello World\u003c/h1\u003e\r\n\u003ch1 style=\"border:2px solid Violet;\"\u003eHello World\u003c/h1\u003e\r\n```\r\n\r\n**Example:**\r\n```html\r\n\u003ch1 style=\"border:2px solid Tomato;\"\u003eHello World\u003c/h1\u003e\r\n\u003ch1 style=\"border:2px solid DodgerBlue;\"\u003eHello World\u003c/h1\u003e\r\n\u003ch1 style=\"border:2px solid Violet;\"\u003eHello World\u003c/h1\u003e\r\n```\r\n\r\n\r\n\r\n#### Color Values\r\n\r\nIn HTML, colors can also be specified using **RGB values**, **HEX values**, **HSL values**, **RGBA values**, and **HSLA values**.\r\n\r\nThe following `\u003cdiv\u003e` elements have their background color set with RGB, HEX, and HSL values:\r\n\r\n- **RGB:** `rgb(255, 99, 71)`\r\n- **HEX:** `#ff6347`\r\n- **HSL:** `hsl(9, 100%, 64%)`\r\n\r\nThe following elements have their background color set with RGBA and HSLA values, adding **50% transparency**:\r\n\r\n- **RGBA:** `rgba(255, 99, 71, 0.5)`\r\n- **HSLA:** `hsla(9, 100%, 64%, 0.5)`\r\n\r\n**Example:**\r\n```html\r\n\u003ch1 style=\"background-color:rgb(255, 99, 71);\"\u003e...\u003c/h1\u003e\r\n\u003ch1 style=\"background-color:#ff6347;\"\u003e...\u003c/h1\u003e\r\n\u003ch1 style=\"background-color:hsl(9, 100%, 64%);\"\u003e...\u003c/h1\u003e\r\n\r\n\u003ch1 style=\"background-color:rgba(255, 99, 71, 0.5);\"\u003e...\u003c/h1\u003e\r\n\u003ch1 style=\"background-color:hsla(9, 100%, 64%, 0.5);\"\u003e...\u003c/h1\u003e\r\n```\r\n\r\n\r\n### HTML RGB and RGBA Colors\r\n\r\nAn **RGB color value** represents **RED**, **GREEN**, and **BLUE** light sources.\r\n\r\nAn **RGBA color value** is an extension of RGB with an **Alpha channel** (opacity).\r\n\r\n\r\n\r\n#### RGB Color Values\r\n\r\nIn HTML, a color can be specified as an **RGB value**, using this formula:\r\n\r\n`rgb(red, green, blue)`\r\n\r\nEach parameter (**red**, **green**, and **blue**) defines the intensity of the color with a value between **0 and 255**.\r\n\r\nThis means that there are **256 x 256 x 256 = 16777216 possible colors**!\r\n\r\n##### Examples:\r\n\r\n- `rgb(255, 0, 0)` is displayed as **red**, because red is set to its highest value (**255**), and the other two (green and blue) are set to **0**.\r\n \r\n- `rgb(0, 255, 0)` is displayed as **green**, because green is set to its highest value (**255**), and the other two (red and blue) are set to **0**.\r\n\r\n- To display **black**, set all color parameters to **0**, like this: \r\n `rgb(0, 0, 0)`.\r\n\r\n- To display **white**, set all color parameters to **255**, like this: \r\n `rgb(255, 255, 255)`.\r\n\r\n\r\n\r\n##### Experiment by mixing the RGB values below:\r\n\r\n- `rgb(255, 68, 25)`\r\n\r\n| Component | Value |\r\n| --------- | ----- |\r\n| **RED** | 255 |\r\n| **GREEN** | 68 |\r\n| **BLUE** | 25 |\r\n\r\n\r\n\r\n##### Other examples:\r\n\r\n- `rgb(255, 0, 0)`\r\n- `rgb(0, 0, 255)`\r\n- `rgb(60, 179, 113)`\r\n- `rgb(238, 130, 238)`\r\n- `rgb(255, 165, 0)`\r\n- `rgb(106, 90, 205)`\r\n\r\n\r\n\r\n#### Shades of Gray\r\n\r\nShades of gray are often defined using **equal values** for all three parameters.\r\n\r\n##### Examples:\r\n\r\n- `rgb(60, 60, 60)`\r\n- `rgb(100, 100, 100)`\r\n- `rgb(140, 140, 140)`\r\n- `rgb(180, 180, 180)`\r\n- `rgb(200, 200, 200)`\r\n- `rgb(240, 240, 240)`\r\n\r\n\r\n\r\n#### RGBA Color Values\r\n\r\n**RGBA color values** are an extension of **RGB** color values with an **Alpha channel** – which specifies the **opacity** for a color.\r\n\r\nAn **RGBA color value** is specified with:\r\n\r\n`rgba(red, green, blue, alpha)`\r\n\r\nThe **alpha** parameter is a number between **0.0** (fully transparent) and **1.0** (not transparent at all).\r\n\r\n\r\n\r\n##### Experiment by mixing the RGBA values below:\r\n\r\n- `rgba(255, 99, 71, 0.5)`\r\n\r\n| Component | Value |\r\n| --------- | ----- |\r\n| **RED** | 255 |\r\n| **GREEN** | 99 |\r\n| **BLUE** | 71 |\r\n| **ALPHA** | 0.5 |\r\n\r\n\r\n\r\n### Other examples:\r\n\r\n- `rgba(255, 99, 71, 0)`\r\n- `rgba(255, 99, 71, 0.2)`\r\n- `rgba(255, 99, 71, 0.4)`\r\n- `rgba(255, 99, 71, 0.6)`\r\n- `rgba(255, 99, 71, 0.8)`\r\n- `rgba(255, 99, 71, 1)`\r\n\r\n\r\n\r\n### HTML HEX Colors\r\n\r\nA hexadecimal color is specified with: `#RRGGBB`, where the **RR** (red), **GG** (green), and **BB** (blue) hexadecimal integers specify the components of the color.\r\n\r\n##### HEX Color Values\r\n\r\nIn HTML, a color can be specified using a hexadecimal value in the form:\r\n\r\n`#rrggbb`\r\n\r\nWhere **rr** (red), **gg** (green), and **bb** (blue) are hexadecimal values between `00` and `ff` (same as decimal `0-255`).\r\n\r\nFor example, `#ff0000` is displayed as **red**, because red is set to its highest value (`ff`), and the other two (green and blue) are set to `00`.\r\n\r\nAnother example, `#00ff00` is displayed as **green**, because green is set to its highest value (`ff`), and the other two (red and blue) are set to `00`.\r\n\r\nTo display **black**, set all color parameters to `00`, like this: `#000000`.\r\n\r\nTo display **white**, set all color parameters to `ff`, like this: `#ffffff`.\r\n\r\n##### Experiment by mixing the HEX values below:\r\n\r\n`#ff6347`\r\n\r\n- **RED**: ff\r\n- **GREEN**: 63\r\n- **BLUE**: 47\r\n\r\n##### Example\r\n\r\n- `#ff0000`\r\n- `#0000ff`\r\n- `#3cb371`\r\n- `#ee82ee`\r\n- `#ffa500`\r\n- `#6a5acd`\r\n\r\n##### Shades of Gray\r\n\r\nShades of gray are often defined using equal values for all three parameters:\r\n\r\n##### Example\r\n\r\n- `#404040`\r\n- `#686868`\r\n- `#a0a0a0`\r\n- `#bebebe`\r\n- `#dcdcdc`\r\n- `#f8f8f8`\r\n\r\n\r\n\r\n### HTML HSL and HSLA Colors\r\n\r\n**HSL** stands for hue, saturation, and lightness.\r\n\r\n**HSLA** color values are an extension of HSL with an Alpha channel (opacity).\r\n\r\n\r\n\r\n#### HSL Color Values\r\n\r\nIn HTML, a color can be specified using **hue**, **saturation**, and **lightness** (HSL) in the form:\r\n\r\n`hsl(hue, saturation, lightness)`\r\n\r\n- **Hue** is a degree on the color wheel from 0 to 360. \r\n - 0 is red, 120 is green, and 240 is blue.\r\n- **Saturation** is a percentage value. \r\n - 0% means a shade of gray, and 100% is the full color.\r\n- **Lightness** is also a percentage value. \r\n - 0% is black, and 100% is white.\r\n\r\n##### Experiment by mixing the HSL values below:\r\n\r\n`hsl(0, 100%, 50%)`\r\n\r\n- **HUE:** 0\r\n- **SATURATION:** 100%\r\n- **LIGHTNESS:** 50%\r\n\r\n##### Example:\r\n\r\n```css\r\nhsl(0, 100%, 50%);\r\nhsl(240, 100%, 50%);\r\nhsl(147, 50%, 47%);\r\nhsl(300, 76%, 72%);\r\nhsl(39, 100%, 50%);\r\nhsl(248, 53%, 58%);\r\n```\r\n\r\n\r\n\r\n#### Saturation\r\n\r\n**Saturation** can be described as the intensity of a color.\r\n\r\n- **100%** is pure color, no shades of gray.\r\n- **50%** is 50% gray, but you can still see the color.\r\n- **0%** is completely gray; you can no longer see the color.\r\n\r\n##### Example:\r\n\r\n```css\r\nhsl(0, 100%, 50%);\r\nhsl(0, 80%, 50%);\r\nhsl(0, 60%, 50%);\r\nhsl(0, 40%, 50%);\r\nhsl(0, 20%, 50%);\r\nhsl(0, 0%, 50%);\r\n```\r\n\r\n\r\n\r\n#### Lightness\r\n\r\nThe **lightness** of a color can be described as how much light you want to give the color:\r\n- **0%** means no light (black).\r\n- **50%** means 50% light (neither dark nor light).\r\n- **100%** means full lightness (white).\r\n\r\n##### Example:\r\n\r\n```css\r\nhsl(0, 100%, 0%);\r\nhsl(0, 100%, 25%);\r\nhsl(0, 100%, 50%);\r\nhsl(0, 100%, 75%);\r\nhsl(0, 100%, 90%);\r\nhsl(0, 100%, 100%);\r\n```\r\n\r\n\r\n\r\n#### Shades of Gray\r\n\r\nShades of gray are often defined by setting the **hue** and **saturation** to 0, and adjusting the **lightness** from 0% to 100% to get darker/lighter shades.\r\n\r\n##### Example:\r\n\r\n```css\r\nhsl(0, 0%, 20%);\r\nhsl(0, 0%, 30%);\r\nhsl(0, 0%, 40%);\r\nhsl(0, 0%, 60%);\r\nhsl(0, 0%, 70%);\r\nhsl(0, 0%, 90%);\r\n```\r\n\r\n\r\n\r\n### HSLA Color Values\r\n\r\n**HSLA** color values are an extension of **HSL** color values, with an **Alpha channel** - which specifies the opacity for a color.\r\n\r\nAn HSLA color value is specified with:\r\n\r\n`hsla(hue, saturation, lightness, alpha)`\r\n\r\nThe **alpha** parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):\r\n\r\n##### Experiment by mixing the HSLA values below:\r\n\r\n`hsla(0, 100%, 50%, 0.5)`\r\n\r\n- **HUE:** 0\r\n- **SATURATION:** 100%\r\n- **LIGHTNESS:** 50%\r\n- **ALPHA:** 0.5\r\n\r\n##### Example:\r\n\r\n```css\r\nhsla(9, 100%, 64%, 0);\r\nhsla(9, 100%, 64%, 0.2);\r\nhsla(9, 100%, 64%, 0.4);\r\nhsla(9, 100%, 64%, 0.6);\r\nhsla(9, 100%, 64%, 0.8);\r\nhsla(9, 100%, 64%, 1);\r\n```\r\n\r\n---\r\n\r\n\r\n### HTML Styles - CSS [⬆️](#table-of-contents)\r\n\r\n**CSS** stands for Cascading Style Sheets.\r\n\r\nCSS saves a lot of work. It can control the layout of multiple web pages all at once.\r\n\r\n##### CSS = Styles and Colors\r\n- Manipulate Text\r\n- Colors, Boxes\r\n\r\n\r\n\r\n#### What is CSS?\r\n\r\nCascading Style Sheets (CSS) is used to format the layout of a webpage.\r\n\r\nWith CSS, you can control:\r\n- Color\r\n- Font\r\n- Size of text\r\n- Spacing between elements\r\n- Element positioning\r\n- Background images or colors\r\n- Different displays for devices and screen sizes\r\n- Much more!\r\n\r\n**Tip:** The word *cascading* means that a style applied to a parent element will apply to all child elements. For example, if you set the body text color to \"blue,\" all headings, paragraphs, and other text within the body will also be blue (unless you specify otherwise).\r\n\r\n\r\n#### Using CSS\r\n\r\nCSS can be added to HTML documents in 3 ways:\r\n\r\n1. **Inline** - by using the `style` attribute inside HTML elements\r\n2. **Internal** - by using a `\u003cstyle\u003e` element in the `\u003chead\u003e` section\r\n3. **External** - by linking to an external CSS file using a `\u003clink\u003e` element\r\n\r\n**Note:** The most common way to add CSS is by linking to an external file. However, in this tutorial, we will use inline and internal styles for easier demonstration.\r\n\r\n\r\n\r\n##### Inline CSS\r\n\r\nAn inline CSS applies a unique style to a single HTML element, using the `style` attribute of that element.\r\n\r\n**Example:**\r\n```html\r\n\u003ch1 style=\"color:blue;\"\u003eA Blue Heading\u003c/h1\u003e\r\n\u003cp style=\"color:red;\"\u003eA red paragraph.\u003c/p\u003e\r\n```\r\n\r\n\r\n\r\n##### Internal CSS\r\n\r\nInternal CSS defines styles for a single HTML page. It's placed within the `\u003chead\u003e` section inside a `\u003cstyle\u003e` element.\r\n\r\n**Example:**\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n \u003cstyle\u003e\r\n body {background-color: powderblue;}\r\n h1 {color: blue;}\r\n p {color: red;}\r\n \u003c/style\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n \u003ch1\u003eThis is a heading\u003c/h1\u003e\r\n \u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n\r\n\r\n##### External CSS\r\n\r\nExternal style sheets define the style for many HTML pages. Add a link to the external CSS file in the `\u003chead\u003e` section of each page.\r\n\r\n**Example:**\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n \u003ch1\u003eThis is a heading\u003c/h1\u003e\r\n \u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\nThe external CSS file (e.g., \"styles.css\") should be saved without any HTML code. Here’s how it could look:\r\n\r\n**styles.css:**\r\n```css\r\nbody {\r\n background-color: powderblue;\r\n}\r\nh1 {\r\n color: blue;\r\n}\r\np {\r\n color: red;\r\n}\r\n```\r\n\r\n**Tip:** With an external CSS file, you can change the look of an entire website by modifying just one file!\r\n\r\n\r\n\r\n#### CSS Colors, Fonts, and Sizes\r\n\r\nHere’s a demonstration of some commonly used CSS properties: color, font-family, and font-size.\r\n\r\n**Example:**\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n \u003cstyle\u003e\r\n h1 {\r\n color: blue;\r\n font-family: verdana;\r\n font-size: 300%;\r\n }\r\n p {\r\n color: red;\r\n font-family: courier;\r\n font-size: 160%;\r\n }\r\n \u003c/style\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n \u003ch1\u003eThis is a heading\u003c/h1\u003e\r\n \u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n\r\n\r\n#### CSS Border\r\n\r\nThe CSS `border` property defines a border around an HTML element.\r\n\r\n**Example:**\r\n```css\r\np {\r\n border: 2px solid powderblue;\r\n}\r\n```\r\n\r\n\r\n\r\n#### CSS Padding\r\n\r\nThe CSS `padding` property defines the space between the text and the border.\r\n\r\n**Example:**\r\n```css\r\np {\r\n border: 2px solid powderblue;\r\n padding: 30px;\r\n}\r\n```\r\n\r\n\r\n\r\n#### CSS Margin\r\n\r\nThe CSS `margin` property defines the space outside the border.\r\n\r\n**Example:**\r\n```css\r\np {\r\n border: 2px solid powderblue;\r\n margin: 50px;\r\n}\r\n```\r\n\r\n\r\n\r\n#### Link to External CSS\r\n\r\nYou can reference external style sheets using a full URL or a relative path.\r\n\r\n**Example with Full URL:**\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"https://www.nemonet.com/html/styles.css\"\u003e\r\n```\r\n\r\n**Example with Relative Path (html folder):**\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"/html/styles.css\"\u003e\r\n```\r\n\r\n**Example with Relative Path (same folder):**\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\r\n```\r\n\r\nFor more on file paths, check out the HTML File Paths chapter.\r\n\r\n\r\n\r\n#### Chapter Summary:\r\n\r\n- Use the `style` attribute for inline CSS\r\n- Use the `\u003cstyle\u003e` element for internal CSS\r\n- Use the `\u003clink\u003e` element for external CSS\r\n- Use the CSS `color` property for text colors\r\n- Use the CSS `font-family` property for fonts\r\n- Use the CSS `font-size` property for text size\r\n- Use the CSS `border` property for borders\r\n- Use the CSS `padding` property for space inside borders\r\n- Use the CSS `margin` property for space outside borders\r\n\r\n**Tip:** You can learn much more about CSS in our [CSS Tutorial](#css).\r\n\r\n---\r\n\r\n\r\n### HTML Links [⬆️](#table-of-contents)\r\n\r\nLinks are found in nearly all web pages. Links allow users to click their way from page to page.\r\n\r\n#### HTML Links - Hyperlinks\r\n\r\nHTML links are **hyperlinks**. \r\nYou can click on a link and jump to another document.\r\n\r\nWhen you move the mouse over a link, the mouse arrow will turn into a little hand.\r\n\r\n**Note**: A link does not have to be text. A link can be an image or any other HTML element!\r\n\r\n#### HTML Links - Syntax\r\n\r\nThe HTML `\u003ca\u003e` tag defines a hyperlink. It has the following syntax:\r\n\r\n```html\r\n\u003ca href=\"url\"\u003elink text\u003c/a\u003e\r\n```\r\n\r\nThe most important attribute of the `\u003ca\u003e` element is the `href` attribute, which indicates the link's destination.\r\n\r\nThe link text is the part that will be visible to the reader.\r\n\r\nClicking on the link text will send the reader to the specified URL address.\r\n\r\n##### Example\r\n\r\nThis example shows how to create a link to nemonet.com:\r\n\r\n```html\r\n\u003ca href=\"https://www.nemonet.com/\"\u003eVisit nemonet.com!\u003c/a\u003e\r\n```\r\n\r\nBy default, links will appear as follows in all browsers:\r\n\r\n- An unvisited link is underlined and blue\r\n- A visited link is underlined and purple\r\n- An active link is underlined and red\r\n\r\n**Tip**: Links can, of course, be styled with CSS, to get another look!\r\n\r\n#### HTML Links - The `target` Attribute\r\n\r\nBy default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.\r\n\r\nThe `target` attribute specifies where to open the linked document. \r\nIt can have one of the following values:\r\n\r\n- **_self** - Default. Opens the document in the same window/tab as it was clicked\r\n- **_blank** - Opens the document in a new window or tab\r\n- **_parent** - Opens the document in the parent frame\r\n- **_top** - Opens the document in the full body of the window\r\n\r\n##### Example\r\n\r\nUse `target=\"_blank\"` to open the linked document in a new browser window or tab:\r\n\r\n```html\r\n\u003ca href=\"https://www.nemonet.com/\" target=\"_blank\"\u003eVisit nemonet!\u003c/a\u003e\r\n```\r\n\r\n#### Absolute URLs vs. Relative URLs\r\n\r\nBoth examples above are using an **absolute URL** (a full web address) in the `href` attribute.\r\n\r\nA local link (a link to a page within the same website) is specified with a **relative URL** (without the \"https://www\" part).\r\n\r\n##### Example: Absolute URLs\r\n\r\n```html\r\n\u003ch2\u003eAbsolute URLs\u003c/h2\u003e\r\n\u003cp\u003e\u003ca href=\"https://www.w3.org/\"\u003eW3C\u003c/a\u003e\u003c/p\u003e\r\n\u003cp\u003e\u003ca href=\"https://www.google.com/\"\u003eGoogle\u003c/a\u003e\u003c/p\u003e\r\n```\r\n\r\n##### Example: Relative URLs\r\n\r\n```html\r\n\u003ch2\u003eRelative URLs\u003c/h2\u003e\r\n\u003cp\u003e\u003ca href=\"html_images.asp\"\u003eHTML Images\u003c/a\u003e\u003c/p\u003e\r\n\u003cp\u003e\u003ca href=\"/css/default.asp\"\u003eCSS Tutorial\u003c/a\u003e\u003c/p\u003e\r\n```\r\n\r\n#### HTML Links - Use an Image as a Link\r\n\r\nTo use an image as a link, just put the `\u003cimg\u003e` tag inside the `\u003ca\u003e` tag.\r\n\r\n##### Example\r\n\r\n```html\r\n\u003ca href=\"default.asp\"\u003e\r\n \u003cimg src=\"smiley.gif\" alt=\"HTML tutorial\" style=\"width:42px;height:42px;\"\u003e\r\n\u003c/a\u003e\r\n```\r\n\r\n#### Link to an Email Address\r\n\r\nUse `mailto:` inside the `href` attribute to create a link that opens the user's email program (to let them send a new email).\r\n\r\n##### Example\r\n\r\n```html\r\n\u003ca href=\"mailto:someone@example.com\"\u003eSend email\u003c/a\u003e\r\n```\r\n\r\n#### Button as a Link\r\n\r\nTo use an HTML button as a link, you have to add some JavaScript code. \r\nJavaScript allows you to specify what happens at certain events, such as a click of a button.\r\n\r\n### Example\r\n\r\n```html\r\n\u003cbutton onclick=\"document.location='default.asp'\"\u003eHTML Tutorial\u003c/button\u003e\r\n```\r\n\r\n**Tip**: Learn more about JavaScript in our JavaScript Tutorial.\r\n\r\n#### Link Titles\r\n\r\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.\r\n\r\n##### Example\r\n\r\n```html\r\n\u003ca href=\"https://www.nemonet.com/html/\" title=\"Go to nemonet HTML section\"\u003eVisit our HTML Tutorial\u003c/a\u003e\r\n```\r\n\r\n#### More on Absolute URLs and Relative URLs\r\n\r\n##### Example\r\n\r\nUse a full URL to link to a web page:\r\n\r\n```html\r\n\u003ca href=\"https://www.nemonet.com/html/default.asp\"\u003eHTML tutorial\u003c/a\u003e\r\n```\r\n\r\n##### Example\r\n\r\nLink to a page located in the html folder on the current website:\r\n\r\n```html\r\n\u003ca href=\"/html/default.asp\"\u003eHTML tutorial\u003c/a\u003e\r\n```\r\n\r\n##### Example\r\n\r\nLink to a page located in the same folder as the current page:\r\n\r\n```html\r\n\u003ca href=\"default.asp\"\u003eHTML tutorial\u003c/a\u003e\r\n```\r\n\r\nYou can read more about file paths in the chapter **HTML File Paths**.\r\n\r\n#### Chapter Summary\r\n\r\n- Use the `\u003ca\u003e` element to define a link\r\n- Use the `href` attribute to define the link address\r\n- Use the `target` attribute to define where to open the linked document\r\n- Use the `\u003cimg\u003e` element (inside `\u003ca\u003e`) to use an image as a link\r\n- Use the `mailto:` scheme inside the `href` attribute to create a link that opens the user's email program\r\n\r\n\r\n### HTML Links - Different Colors\r\n\r\nAn HTML link is displayed in different colors depending on whether it has been visited, is unvisited, or is active.\r\n\r\n#### HTML Link Colors\r\n\r\nBy default, a link will appear like this (in all browsers):\r\n\r\n- An **unvisited link** is underlined and blue\r\n- A **visited link** is underlined and purple\r\n- An **active link** is underlined and red\r\n\r\nYou can change the link state colors by using CSS:\r\n\r\n##### Example\r\n\r\nHere, an unvisited link will be green with no underline, a visited link will be pink with no underline, and an active link will be yellow and underlined. In addition, when hovering over a link (`a:hover`), it will become red and underlined:\r\n\r\n```html\r\n\u003cstyle\u003e\r\na:link {\r\n color: green;\r\n background-color: transparent;\r\n text-decoration: none;\r\n}\r\n\r\na:visited {\r\n color: pink;\r\n background-color: transparent;\r\n text-decoration: none;\r\n}\r\n\r\na:hover {\r\n color: red;\r\n background-color: transparent;\r\n text-decoration: underline;\r\n}\r\n\r\na:active {\r\n color: yellow;\r\n background-color: transparent;\r\n text-decoration: underline;\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n#### Link Buttons\r\n\r\nA link can also be styled as a button using CSS:\r\n\r\n[This is a link](#)\r\n\r\n##### Example\r\n\r\n```html\r\n\u003cstyle\u003e\r\na:link, a:visited {\r\n background-color: #f44336;\r\n color: white;\r\n padding: 15px 25px;\r\n text-align: center;\r\n text-decoration: none;\r\n display: inline-block;\r\n}\r\n\r\na:hover, a:active {\r\n background-color: red;\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\nTo learn more about CSS, visit our [CSS Tutorial](#).\r\n\r\n\r\n### HTML Links - Create Bookmarks\r\n\r\nHTML links can be used to create bookmarks, allowing readers to jump to specific parts of a web page.\r\n\r\n#### Create a Bookmark in HTML\r\n\r\nBookmarks are useful for navigating long web pages. To create a bookmark, follow these steps: \r\n\r\n1. Create the bookmark.\r\n2. Add a link that directs users to that bookmark.\r\n\r\nWhen the link is clicked, the page will scroll up or down to the location with the bookmark.\r\n\r\n##### Example\r\n\r\nFirst, use the `id` attribute to create a bookmark:\r\n\r\n```html\r\n\u003ch2 id=\"C4\"\u003eChapter 4\u003c/h2\u003e\r\n```\r\n\r\nThen, add a link to the bookmark (\"Jump to Chapter 4\") within the same page:\r\n\r\n```html\r\n\u003ca href=\"#C4\"\u003eJump to Chapter 4\u003c/a\u003e\r\n```\r\n\r\nYou can also add a link to a bookmark on another page:\r\n\r\n```html\r\n\u003ca href=\"html_demo.html#C4\"\u003eJump to Chapter 4\u003c/a\u003e\r\n```\r\n\r\n#### Chapter Summary\r\n\r\n- Use the `id` attribute (`id=\"value\"`) to define bookmarks in a page.\r\n- Use the `href` attribute (`href=\"#value\"`) to link to the bookmark.\r\n\r\n---\r\n\r\n\r\n### HTML Images [⬆️](#table-of-contents)\r\n\r\nImages can improve the design and appearance of a web page.\r\n\r\n#### Example:\r\n```html\r\n\u003cimg src=\"pic_trulli.jpg\" alt=\"Italian Trulli\"\u003e\r\n```\r\n```html\r\n\u003cimg src=\"img_girl.jpg\" alt=\"Girl in a jacket\"\u003e\r\n```\r\n```html\r\n\u003cimg src=\"img_chania.jpg\" alt=\"Flowers in Chania\"\u003e\r\n```\r\n\r\n\r\n\r\n### HTML Images Syntax\r\n\r\nThe HTML `\u003cimg\u003e` tag is used to embed an image in a web page. Images are not technically inserted into a web page; they are linked. The `\u003cimg\u003e` tag creates a holding space for the referenced image.\r\n\r\nThe `\u003cimg\u003e` tag is **empty**; it contains attributes only and does not have a closing tag.\r\n\r\nThe `\u003cimg\u003e` tag has two required attributes:\r\n\r\n- `src` - Specifies the path to the image\r\n- `alt` - Specifies an alternate text for the image\r\n\r\n#### Syntax:\r\n```html\r\n\u003cimg src=\"url\" alt=\"alternatetext\"\u003e\r\n```\r\n\r\n\r\n\r\n#### The `src` Attribute\r\n\r\nThe required `src` attribute specifies the path (URL) to the image.\r\n\r\n**Note**: When a web page loads, the browser fetches the image from a web server and inserts it into the page. Ensure the image remains in the same location to avoid broken links.\r\n\r\n##### Example:\r\n```html\r\n\u003cimg src=\"img_chania.jpg\" alt=\"Flowers in Chania\"\u003e\r\n```\r\n\r\n\r\n\r\n#### The `alt` Attribute\r\n\r\nThe required `alt` attribute provides alternate text for an image if the user cannot view it (due to slow connection, an error, or screen readers).\r\n\r\nThe value of the `alt` attribute should describe the image:\r\n\r\n##### Example:\r\n```html\r\n\u003cimg src=\"img_chania.jpg\" alt=\"Flowers in Chania\"\u003e\r\n```\r\n\r\nIf the browser cannot find the image, it displays the value of the `alt` attribute:\r\n\r\n##### Example:\r\n```html\r\n\u003cimg src=\"wrongname.gif\" alt=\"Flowers in Chania\"\u003e\r\n```\r\n\r\n**Tip**: Screen readers read HTML code and allow users to \"listen\" to content, helping visually impaired or learning-disabled users.\r\n\r\n\r\n\r\n#### Image Size - Width and Height\r\n\r\nYou can use the `style` attribute to specify the width and height of an image.\r\n\r\n##### Example:\r\n```html\r\n\u003cimg src=\"img_girl.jpg\" alt=\"Girl in a jacket\" style=\"width:500px;height:600px;\"\u003e\r\n```\r\n\r\nAlternatively, use the `width` and `height` attributes:\r\n\r\n##### Example:\r\n```html\r\n\u003cimg src=\"img_girl.jpg\" alt=\"Girl in a jacket\" width=\"500\" height=\"600\"\u003e\r\n```\r\n\r\n**Note**: Always specify image width and height to avoid flickering during load.\r\n\r\n\r\n\r\n##### Width and Height, or Style?\r\n\r\nThe `width`, `height`, and `style` attributes are all valid in HTML. However, using the `style` attribute is recommended to prevent style sheets from affecting image sizes:\r\n\r\n##### Example:\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n\u003cstyle\u003e\r\n img {\r\n width: 100%;\r\n }\r\n\u003c/style\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\n \u003cimg src=\"html5.gif\" alt=\"HTML5 Icon\" width=\"128\" height=\"128\"\u003e\r\n\r\n \u003cimg src=\"html5.gif\" alt=\"HTML5 Icon\" style=\"width:128px;height:128px;\"\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n\r\n\r\n#### Images in Another Folder\r\n\r\nTo include images in a sub-folder, you must include the folder name in the `src` attribute:\r\n\r\n##### Example:\r\n```html\r\n\u003cimg src=\"/images/html5.gif\" alt=\"HTML5 Icon\" style=\"width:128px;height:128px;\"\u003e\r\n```\r\n\r\n\r\n\r\n#### Images on Another Server/Website\r\n\r\nTo link to an image on another server, use an absolute (full) URL in the `src` attribute:\r\n\r\n##### Example:\r\n```html\r\n\u003cimg src=\"https://www.nemonet.com/images/nemonet_green.jpg\" alt=\"nemonet.com\"\u003e\r\n```\r\n\r\n**Note**: Be cautious with external images as they might be copyrighted, removed, or changed without notice.\r\n\r\n\r\n\r\n#### Animated Images\r\n\r\nHTML supports animated GIFs:\r\n\r\n##### Example:\r\n```html\r\n\u003cimg src=\"programming.gif\" alt=\"Computer Man\" style=\"width:48px;height:48px;\"\u003e\r\n```\r\n\r\n\r\n\r\n#### Image as a Link\r\n\r\nTo use an image as a link, place the `\u003cimg\u003e` tag inside the `\u003ca\u003e` tag:\r\n\r\n##### Example:\r\n```html\r\n\u003ca href=\"default.asp\"\u003e\r\n \u003cimg src=\"smiley.gif\" alt=\"HTML tutorial\" style=\"width:42px;height:42px;\"\u003e\r\n\u003c/a\u003e\r\n```\r\n\r\n\r\n\r\n#### Image Floating\r\n\r\nUse the CSS `float` property to float an image to the right or left of a text:\r\n\r\n##### Example (float right):\r\n```html\r\n\u003cp\u003e\u003cimg src=\"smiley.gif\" alt=\"Smiley face\" style=\"float:right;width:42px;height:42px;\"\u003e\r\nThe image will float to the right of the text.\u003c/p\u003e\r\n```\r\n\r\n#### Example (float left):\r\n```html\r\n\u003cp\u003e\u003cimg src=\"smiley.gif\" alt=\"Smiley face\" style=\"float:left;width:42px;height:42px;\"\u003e\r\nThe image will float to the left of the text.\u003c/p\u003e\r\n```\r\n\r\n**Tip**: Learn more about CSS Float in the [CSS Float Tutorial](#).\r\n\r\n\r\n\r\n#### Common Image Formats\r\n\r\n| Abbreviation | File Format | File Extension |\r\n|--------------|--------------------------------------|---------------------------------------|\r\n| APNG | Animated Portable Network Graphics | `.apng` |\r\n| GIF | Graphics Interchange Format | `.gif` |\r\n| ICO | Microsoft Icon | `.ico`, `.cur` |\r\n| JPEG | Joint Photographic Expert Group image| `.jpg`, `.jpeg`, `.jfif`, `.pjpeg`, `.pjp` |\r\n| PNG | Portable Network Graphics | `.png` |\r\n| SVG | Scalable Vector Graphics | `.svg` |\r\n\r\n\r\n\r\n#### Chapter Summary\r\n\r\n- Use the HTML `\u003cimg\u003e` element to define an image.\r\n- Use the HTML `src` attribute to define the image URL.\r\n- Use the HTML `alt` attribute to define alternate text for an image.\r\n- Use the `width` and `height` attributes or CSS properties to define the image size.\r\n- Use the CSS `float` property to float images left or right.\r\n\r\n**Note**: Loading large images can slow down your webpage. Use images wisely.\r\n\r\n\r\n### HTML Background Images\r\n\r\nA background image can be specified for almost any HTML element.\r\n\r\n#### Background Image on an HTML Element\r\n\r\nTo add a background image to an HTML element, use the HTML `style` attribute and the CSS `background-image` property:\r\n\r\n##### Example\r\n\r\nAdd a background image to an HTML element:\r\n\r\n```html\r\n\u003cp style=\"background-image: url('img_girl.jpg');\"\u003e\r\n```\r\n\r\nYou can also specify the background image in the `\u003cstyle\u003e` element, in the `\u003chead\u003e` section:\r\n\r\n##### Example\r\n\r\nSpecify the background image in the `\u003cstyle\u003e` element:\r\n\r\n```html\r\n\u003cstyle\u003e\r\np {\r\n background-image: url('img_girl.jpg');\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n#### Background Image on a Page\r\n\r\nIf you want the entire page to have a background image, you must specify the background image on the `\u003cbody\u003e` element:\r\n\r\n##### Example\r\n\r\nAdd a background image for the entire page:\r\n\r\n```html\r\n\u003cstyle\u003e\r\nbody {\r\n background-image: url('img_girl.jpg');\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n#### Background Repeat\r\n\r\nIf the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:\r\n\r\n##### Example\r\n\r\n```html\r\n\u003cstyle\u003e\r\nbody {\r\n background-image: url('example_img_girl.jpg');\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\nTo avoid the background image from repeating itself, set the `background-repeat` property to `no-repeat`.\r\n\r\n##### Example\r\n\r\n```html\r\n\u003cstyle\u003e\r\nbody {\r\n background-image: url('example_img_girl.jpg');\r\n background-repeat: no-repeat;\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n#### Background Cover\r\n\r\nIf you want the background image to cover the entire element, you can set the `background-size` property to `cover`.\r\n\r\nAlso, to make sure the entire element is always covered, set the `background-attachment` property to `fixed`:\r\n\r\nThis way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):\r\n\r\n##### Example\r\n\r\n```html\r\n\u003cstyle\u003e\r\nbody {\r\n background-image: url('img_girl.jpg');\r\n background-repeat: no-repeat;\r\n background-attachment: fixed;\r\n background-size: cover;\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n#### Background Stretch\r\n\r\nIf you want the background image to stretch to fit the entire element, you can set the `background-size` property to `100% 100%`:\r\n\r\nTry resizing the browser window, and you will see that the image will stretch, but always cover the entire element.\r\n\r\n##### Example\r\n\r\n```html\r\n\u003cstyle\u003e\r\nbody {\r\n background-image: url('img_girl.jpg');\r\n background-repeat: no-repeat;\r\n background-attachment: fixed;\r\n background-size: 100% 100%;\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n\r\n### HTML `\u003cpicture\u003e` Element\r\n\r\nThe HTML `\u003cpicture\u003e` element allows you to display different pictures for different devices or screen sizes.\r\n\r\n#### The HTML `\u003cpicture\u003e` Element\r\n\r\nThe HTML `\u003cpicture\u003e` element gives web developers more flexibility in specifying image resources.\r\n\r\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.\r\n\r\nEach `\u003csource\u003e` element has a `media` attribute that defines when the image is the most suitable.\r\n\r\n##### Example\r\n\r\nShow different images for different screen sizes:\r\n\r\n```html\r\n\u003cpicture\u003e\r\n \u003csource media=\"(min-width: 650px)\" srcset=\"img_food.jpg\"\u003e\r\n \u003csource media=\"(min-width: 465px)\" srcset=\"img_car.jpg\"\u003e\r\n \u003cimg src=\"img_girl.jpg\"\u003e\r\n\u003c/picture\u003e\r\n```\r\n\r\n**Note:** Always specify an `\u003cimg\u003e` element as the last child element of the `\u003cpicture\u003e` element. The `\u003cimg\u003e` element is used by browsers that do not support the `\u003cpicture\u003e` element, or if none of the `\u003csource\u003e` tags match.\r\n\r\n#### When to Use the `\u003cpicture\u003e` Element\r\n\r\nThere are two main purposes for the `\u003cpicture\u003e` element:\r\n\r\n1. **Bandwidth**\r\n\r\n If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first `\u003csource\u003e` element with matching attribute values and ignore any of the following elements.\r\n\r\n2. **Format Support**\r\n\r\n Some browsers or devices may not support all image formats. By using the `\u003cpicture\u003e` element, you can add images of all formats, and the browser will use the first format it recognizes and ignore any of the following elements.\r\n\r\n##### Example\r\n\r\nThe browser will use the first image format it recognizes:\r\n\r\n```html\r\n\u003cpicture\u003e\r\n \u003csource srcset=\"img_avatar.png\"\u003e\r\n \u003csource srcset=\"img_girl.jpg\"\u003e\r\n \u003cimg src=\"img_beatles.gif\" alt=\"Beatles\" style=\"width:auto;\"\u003e\r\n\u003c/picture\u003e\r\n```\r\n\r\n**Note:** The browser will use the first `\u003csource\u003e` element with matching attribute values and ignore any following `\u003csource\u003e` elements.\r\n\r\n---\r\n\r\n\r\n### HTML Favicon [⬆️](#table-of-contents)\r\n\r\nA favicon is a small image displayed next to the page title in the browser tab.\r\n\r\n#### How To Add a Favicon in HTML\r\n\r\nYou can use any image you like as your favicon. You can also create your own favicon on sites like [favicon.cc](https://www.favicon.cc).\r\n\r\n**Tip:** A favicon is a small image, so it should be a simple image with high contrast.\r\n\r\nA favicon image is displayed to the left of the page title in the browser tab, like this:\r\n\r\n*Example of favicon*\r\n\r\nTo add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called `images`, and save your favicon image in this folder. A common name for a favicon image is `favicon.ico`.\r\n\r\nNext, add a `\u003clink\u003e` element to your `index.html` file, after the `\u003ctitle\u003e` element, like this:\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n \u003ctitle\u003eMy Page Title\u003c/title\u003e\r\n \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"/images/favicon.ico\"\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\n\u003ch1\u003eThis is a Heading\u003c/h1\u003e\r\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\nNow, save the `index.html` file and reload it in your browser. Your browser tab should now display your favicon image to the left of the page title.\r\n\r\n#### Favicon File Format Support\r\n\r\nThe following table shows the file format support for a favicon image:\r\n\r\n| Browser | ICO | PNG | GIF | JPEG | SVG |\r\n|---------|-----|-----|-----|------|-----|\r\n| Edge | Yes | Yes | Yes | Yes | Yes |\r\n| Chrome | Yes | Yes | Yes | Yes | Yes |\r\n| Firefox | Yes | Yes | Yes | Yes | Yes |\r\n| Opera | Yes | Yes | Yes | Yes | Yes |\r\n| Safari | Yes | Yes | Yes | Yes | Yes |\r\n\r\n#### Chapter Summary\r\n\r\n- Use the HTML `\u003clink\u003e` element to insert a favicon\r\n\r\n---\r\n\r\n\r\n### HTML Page Title [⬆️](#table-of-contents)\r\n\r\nEvery web page should have a page title to describe the meaning of the page.\r\n\r\nThe `\u003ctitle\u003e` element adds a title to your page:\r\n\r\n#### Example\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n \u003ctitle\u003eHTML Tutorial\u003c/title\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\nThe content of the document......\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\nThe title is shown in the browser's title bar:\r\n\r\nThe title should describe the content and the meaning of the page.\r\n\r\nThe page title is very important for search engine optimization (SEO). The text is used by search engine algorithms to decide the order when listing pages in search results.\r\n\r\nThe `\u003ctitle\u003e` element:\r\n\r\n- Defines a title in the browser toolbar\r\n- Provides a title for the page when it is added to favorites\r\n- Displays a title for the page in search engine results\r\n\r\nSo, try to make the title as accurate and meaningful as possible!\r\n\r\n---\r\n\r\n### HTML Tables [⬆️](#table-of-contents)\r\n\r\nHTML tables allow web developers to arrange data into rows and columns.\r\n\r\n#### Example\r\n\r\n| Company | Contact | Country |\r\n|-----------------------------|-------------------|---------|\r\n| Alfreds Futterkiste | Maria Anders | Germany |\r\n| Centro comercial Moctezuma | Francisco Chang | Mexico |\r\n| Ernst Handel | Roland Mendel | Austria |\r\n| Island Trading | Helen Bennett | UK |\r\n| Laughing Bacchus Winecellars| Yoshi Tannamuri | Canada |\r\n| Magazzini Alimentari Riuniti| Giovanni Rovelli | Italy |\r\n\r\n#### Define an HTML Table\r\n\r\nA table in HTML consists of table cells inside rows and columns.\r\n\r\n##### Example\r\n\r\nA simple HTML table:\r\n```html\r\n\u003ctable\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eCompany\u003c/th\u003e\r\n \u003cth\u003eContact\u003c/th\u003e\r\n \u003cth\u003eCountry\u003c/th\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eAlfreds Futterkiste\u003c/td\u003e\r\n \u003ctd\u003eMaria Anders\u003c/td\u003e\r\n \u003ctd\u003eGermany\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eCentro comercial Moctezuma\u003c/td\u003e\r\n \u003ctd\u003eFrancisco Chang\u003c/td\u003e\r\n \u003ctd\u003eMexico\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n#### Table Cells\r\n\r\nEach table cell is defined by a `\u003ctd\u003e` and a `\u003c/td\u003e` tag.\r\n\r\n`\u003ctd\u003e` stands for table data.\r\n\r\nEverything between `\u003ctd\u003e` and `\u003c/td\u003e` is the content of the table cell.\r\n\r\n##### Example\r\n```html\r\n\u003ctable\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eEmil\u003c/td\u003e\r\n \u003ctd\u003eTobias\u003c/td\u003e\r\n \u003ctd\u003eLinus\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n*Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.*\r\n\r\n#### Table Rows\r\n\r\nEach table row starts with a `\u003ctr\u003e` and ends with a `\u003c/tr\u003e` tag.\r\n\r\n`\u003ctr\u003e` stands for table row.\r\n\r\n##### Example\r\n```html\r\n\u003ctable\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eEmil\u003c/td\u003e\r\n \u003ctd\u003eTobias\u003c/td\u003e\r\n \u003ctd\u003eLinus\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003e16\u003c/td\u003e\r\n \u003ctd\u003e14\u003c/td\u003e\r\n \u003ctd\u003e10\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\nYou can have as many rows as you like in a table; just make sure that the number of cells is the same in each row.\r\n\r\n*Note: There are times when a row can have fewer or more cells than another. You will learn about that in a later chapter.*\r\n\r\n#### Table Headers\r\n\r\nSometimes you want your cells to be table header cells. In those cases, use the `\u003cth\u003e` tag instead of the `\u003ctd\u003e` tag:\r\n\r\n`\u003cth\u003e` stands for table header.\r\n\r\n##### Example\r\n\r\nLet the first row be table header cells:\r\n```html\r\n\u003ctable\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003ePerson 1\u003c/th\u003e\r\n \u003cth\u003ePerson 2\u003c/th\u003e\r\n \u003cth\u003ePerson 3\u003c/th\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eEmil\u003c/td\u003e\r\n \u003ctd\u003eTobias\u003c/td\u003e\r\n \u003ctd\u003eLinus\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003e16\u003c/td\u003e\r\n \u003ctd\u003e14\u003c/td\u003e\r\n \u003ctd\u003e10\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\nBy default, the text in `\u003cth\u003e` elements is bold and centered, but you can change that with CSS.\r\n\r\n\r\n### HTML Table Borders\r\n\r\nHTML tables can have borders of different styles and shapes.\r\n\r\n#### How To Add a Border\r\n\r\nTo add a border, use the CSS `border` property on `table`, `th`, and `td` elements:\r\n\r\n##### Example\r\n```css\r\ntable, th, td {\r\n border: 1px solid black;\r\n}\r\n```\r\n\r\n#### Collapsed Table Borders\r\n\r\nTo avoid having double borders like in the example above, set the CSS `border-collapse` property to `collapse`.\r\n\r\nThis will make the borders collapse into a single border:\r\n\r\n### Example\r\n```css\r\ntable, th, td {\r\n border: 1px solid black;\r\n border-collapse: collapse;\r\n}\r\n```\r\n\r\n#### Style Table Borders\r\n\r\nIf you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:\r\n\r\n##### Example\r\n```css\r\ntable, th, td {\r\n border: 1px solid white;\r\n border-collapse: collapse;\r\n}\r\nth, td {\r\n background-color: #96D4D4;\r\n}\r\n```\r\n\r\n#### Round Table Borders\r\n\r\nWith the `border-radius` property, the borders get rounded corners:\r\n\r\n### Example\r\n```css\r\ntable, th, td {\r\n border: 1px solid black;\r\n border-radius: 10px;\r\n}\r\n```\r\n\r\nSkip the border around the table by leaving out `table` from the CSS selector:\r\n\r\n##### Example\r\n```css\r\nth, td {\r\n border: 1px solid black;\r\n border-radius: 10px;\r\n}\r\n```\r\n\r\n#### Dotted Table Borders\r\n\r\nWith the `border-style` property, you can set the appearance of the border.\r\n\r\nThe following values are allowed:\r\n\r\n- `dotted`\r\n- `dashed`\r\n- `solid`\r\n- `double`\r\n- `groove`\r\n- `ridge`\r\n- `inset`\r\n- `outset`\r\n- `none`\r\n- `hidden`\r\n\r\n##### Example\r\n```css\r\nth, td {\r\n border-style: dotted;\r\n}\r\n```\r\n\r\n#### Border Color\r\n\r\nWith the `border-color` property, you can set the color of the border.\r\n\r\n##### Example\r\n```css\r\nth, td {\r\n border-color: #96D4D4;\r\n}\r\n```\r\n\r\n### HTML Table Sizes\r\n\r\nHTML tables can have different sizes for each column, row, or the entire table.\r\n\r\nUse the `style` attribute with the `width` or `height` properties to specify the size of a table, row, or column.\r\n\r\n#### HTML Table Width\r\n\r\nTo set the width of a table, add the `style` attribute to the `\u003ctable\u003e` element:\r\n\r\n**Example**\r\n\r\nSet the width of the table to 100%:\r\n\r\n```html\r\n\u003ctable style=\"width:100%\"\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eFirstname\u003c/th\u003e\r\n \u003cth\u003eLastname\u003c/th\u003e\r\n \u003cth\u003eAge\u003c/th\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eJill\u003c/td\u003e\r\n \u003ctd\u003eSmith\u003c/td\u003e\r\n \u003ctd\u003e50\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eEve\u003c/td\u003e\r\n \u003ctd\u003eJackson\u003c/td\u003e\r\n \u003ctd\u003e94\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n*Note: Using a percentage as the size unit for a width means how wide this element will be compared to its parent element, which in this case is the `\u003cbody\u003e` element.*\r\n\r\n#### HTML Table Column Width\r\n\r\nTo set the size of a specific column, add the `style` attribute to a `\u003cth\u003e` or `\u003ctd\u003e` element:\r\n\r\n**Example**\r\n\r\nSet the width of the first column to 70%:\r\n\r\n```html\r\n\u003ctable style=\"width:100%\"\u003e\r\n \u003ctr\u003e\r\n \u003cth style=\"width:70%\"\u003eFirstname\u003c/th\u003e\r\n \u003cth\u003eLastname\u003c/th\u003e\r\n \u003cth\u003eAge\u003c/th\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eJill\u003c/td\u003e\r\n \u003ctd\u003eSmith\u003c/td\u003e\r\n \u003ctd\u003e50\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eEve\u003c/td\u003e\r\n \u003ctd\u003eJackson\u003c/td\u003e\r\n \u003ctd\u003e94\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n#### HTML Table Row Height\r\n\r\nTo set the height of a specific row, add the `style` attribute to a table row element:\r\n\r\n**Example**\r\n\r\nSet the height of the second row to 200 pixels:\r\n\r\n```html\r\n\u003ctable style=\"width:100%\"\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eFirstname\u003c/th\u003e\r\n \u003cth\u003eLastname\u003c/th\u003e\r\n \u003cth\u003eAge\u003c/th\u003e\r\n \u003c/tr\u003e\r\n \u003ctr style=\"height:200px\"\u003e\r\n \u003ctd\u003eJill\u003c/td\u003e\r\n \u003ctd\u003eSmith\u003c/td\u003e\r\n \u003ctd\u003e50\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eEve\u003c/td\u003e\r\n \u003ctd\u003eJackson\u003c/td\u003e\r\n \u003ctd\u003e94\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n\r\n### HTML Table Headers\r\n\r\nHTML tables can have headers for each column or row, or for many columns/rows.\r\n\r\n| | EMIL | TOBIAS | LINUS |\r\n|------|------|--------|-------|\r\n| 8:00 | | | |\r\n| 9:00 | | | |\r\n| 10:00| | | |\r\n| 11:00| | | |\r\n| 12:00| | | |\r\n| 13:00| | | |\r\n\r\n| Time | MON | TUE | WED | THU | FRI |\r\n|------|------|--------|-------|-------|-------|\r\n| 8:00 | | | | | |\r\n| 9:00 | | | | | |\r\n| 10:00| | | | | |\r\n| 11:00| | | | | |\r\n| 12:00| | | | | |\r\n\r\n#### DECEMBER\r\n\r\nHTML Table Headers are defined with `\u003cth\u003e` elements. Each `\u003cth\u003e` element represents a table cell.\r\n\r\n##### Example\r\n\r\n```html\r\n\u003ctable\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eFirstname\u003c/th\u003e\r\n \u003cth\u003eLastname\u003c/th\u003e\r\n \u003cth\u003eAge\u003c/th\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eJill\u003c/td\u003e\r\n \u003ctd\u003eSmith\u003c/td\u003e\r\n \u003ctd\u003e50\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eEve\u003c/td\u003e\r\n \u003ctd\u003eJackson\u003c/td\u003e\r\n \u003ctd\u003e94\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n##### Vertical Table Headers\r\n\r\nTo use the first column as table headers, define the first cell in each row as a `\u003cth\u003e` element:\r\n\r\n##### Example\r\n\r\n```html\r\n\u003ctable\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eFirstname\u003c/th\u003e\r\n \u003ctd\u003eJill\u003c/td\u003e\r\n \u003ctd\u003eEve\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eLastname\u003c/th\u003e\r\n \u003ctd\u003eSmith\u003c/td\u003e\r\n \u003ctd\u003eJackson\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eAge\u003c/th\u003e\r\n \u003ctd\u003e94\u003c/td\u003e\r\n \u003ctd\u003e50\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n##### Align Table Headers\r\n\r\nBy default, table headers are bold and centered:\r\n\r\n| Firstname | Lastname | Age |\r\n|-----------|----------|-----|\r\n| Jill | Smith | 50 |\r\n| Eve | Jackson | 94 |\r\n\r\nTo left-align the table headers, use the CSS `text-align` property:\r\n\r\n##### Example\r\n\r\n```css\r\nth {\r\n text-align: left;\r\n}\r\n```\r\n\r\n##### Header for Multiple Columns\r\n\r\nYou can have a header that spans over two or more columns.\r\n\r\n| Name | Age |\r\n|------------|-----|\r\n| Jill Smith | 50 |\r\n| Eve Jackson| 94 |\r\n\r\nTo do this, use the `colspan` attribute on the `\u003cth\u003e` element:\r\n\r\n##### Example\r\n\r\n```html\r\n\u003ctable\u003e\r\n \u003ctr\u003e\r\n \u003cth colspan=\"2\"\u003eName\u003c/th\u003e\r\n \u003cth\u003eAge\u003c/th\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eJill\u003c/td\u003e\r\n \u003ctd\u003eSmith\u003c/td\u003e\r\n \u003ctd\u003e50\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eEve\u003c/td\u003e\r\n \u003ctd\u003eJackson\u003c/td\u003e\r\n \u003ctd\u003e94\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\nYou will learn more about `colspan` and `rowspan` in the Table colspan \u0026 rowspan chapter.\r\n\r\n##### Table Caption\r\n\r\nYou can add a caption that serves as a heading for the entire table.\r\n\r\n| Month | Savings |\r\n|----------|---------|\r\n| January | $100 |\r\n| February | $50 |\r\n\r\nTo add a caption to a table, use the `\u003ccaption\u003e` tag:\r\n\r\n##### Example\r\n\r\n```html\r\n\u003ctable style=\"width:100%\"\u003e\r\n \u003ccaption\u003eMonthly savings\u003c/caption\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eMonth\u003c/th\u003e\r\n \u003cth\u003eSavings\u003c/th\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eJanuary\u003c/td\u003e\r\n \u003ctd\u003e$100\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eFebruary\u003c/td\u003e\r\n \u003ctd\u003e$50\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n**Note:** The `\u003ccaption\u003e` tag should be inserted immediately after the `\u003ctable\u003e` tag.\r\n\r\n\r\n### HTML Table Padding \u0026 Spacing\r\n\r\nHTML tables can adjust the padding inside the cells, and also the space between the cells.\r\n\r\n#### With Padding\r\n| hello | hello | hello |\r\n|-------|-------|-------|\r\n| hello | hello | hello |\r\n| hello | hello | hello |\r\n\r\n#### With Spacing\r\n| hello | hello | hello |\r\n|-------|-------|-------|\r\n| hello | hello | hello |\r\n| hello | hello | hello |\r\n\r\n#### HTML Table - Cell Padding\r\n\r\nCell padding is the space between the cell edges and the cell content.\r\n\r\nBy default, the padding is set to `0`.\r\n\r\nTo add padding on table cells, use the CSS `padding` property:\r\n\r\n##### Example\r\n```css\r\nth, td {\r\n padding: 15px;\r\n}\r\n```\r\n\r\nTo add padding only above the content, use the `padding-top` property.\r\n\r\nAnd the other sides with the `padding-bottom`, `padding-left`, and `padding-right` properties:\r\n\r\n##### Example\r\n```css\r\nth, td {\r\n padding-top: 10px;\r\n padding-bottom: 20px;\r\n padding-left: 30px;\r\n padding-right: 40px;\r\n}\r\n```\r\n\r\n#### HTML Table - Cell Spacing\r\n\r\nCell spacing is the space between each cell.\r\n\r\nBy default, the space is set to `2` pixels.\r\n\r\nTo change the space between table cells, use the CSS `border-spacing` property on the table element:\r\n\r\n##### Example\r\n```css\r\ntable {\r\n border-spacing: 30px;\r\n}\r\n```\r\n\r\n\r\n### HTML Table Colspan \u0026 Rowspan\r\n\r\nHTML tables can have cells that span over multiple rows and/or columns.\r\n\r\n| **NAME** | | | | | \r\n| -------- | ---------- | ---------- | ---------- | ---------- |\r\n| **APRIL**| | | | |\r\n| **2022** | | **FIESTA** | | |\r\n\r\n#### HTML Table - Colspan\r\n\r\nTo make a cell span over multiple columns, use the `colspan` attribute:\r\n\r\n##### Example\r\n\r\n```html\r\n\u003ctable\u003e\r\n \u003ctr\u003e\r\n \u003cth colspan=\"2\"\u003eName\u003c/th\u003e\r\n \u003cth\u003eAge\u003c/th\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eJill\u003c/td\u003e\r\n \u003ctd\u003eSmith\u003c/td\u003e\r\n \u003ctd\u003e43\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eEve\u003c/td\u003e\r\n \u003ctd\u003eJackson\u003c/td\u003e\r\n \u003ctd\u003e57\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n**Note:** The value of the `colspan` attribute represents the number of columns to span.\r\n\r\n#### HTML Table - Rowspan\r\n\r\nTo make a cell span over multiple rows, use the `rowspan` attribute:\r\n\r\n##### Example\r\n\r\n```html\r\n\u003ctable\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eName\u003c/th\u003e\r\n \u003ctd\u003eJill\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003cth rowspan=\"2\"\u003ePhone\u003c/th\u003e\r\n \u003ctd\u003e555-1234\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003e555-8745\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n**Note:** The value of the `rowspan` attribute represents the number of rows to span.\r\n\r\n\r\n### HTML Table Styling\r\n\r\nUse CSS to make your tables look better.\r\n\r\n#### HTML Table - Zebra Stripes\r\n\r\nIf you add a background color on every other table row, you will get a nice zebra stripes effect.\r\n\r\n| 1 | 2 | 3 | 4 |\r\n|----|----|----|----|\r\n| 5 | 6 | 7 | 8 |\r\n| 9 | 10 | 11 | 12 |\r\n| 13 | 14 | 15 | 16 |\r\n| 17 | 18 | 19 | 20 |\r\n\r\nTo style every other table row element, use the `:nth-child(even)` selector like this:\r\n\r\n**Example:**\r\n```css\r\ntr:nth-child(even) {\r\n background-color: #D6EEEE;\r\n}\r\n```\r\n\r\n**Note:** If you use `(odd)` instead of `(even)`, the styling will occur on rows 1, 3, 5, etc., instead of 2, 4, 6, etc.\r\n\r\n#### HTML Table - Vertical Zebra Stripes\r\n\r\nTo make vertical zebra stripes, style every other column, instead of every other row.\r\n\r\n| 1 | 2 | 3 | 4 |\r\n|----|----|----|----|\r\n| 5 | 6 | 7 | 8 |\r\n| 9 | 10 | 11 | 12 |\r\n| 13 | 14 | 15 | 16 |\r\n| 17 | 18 | 19 | 20 |\r\n\r\nSet the `:nth-child(even)` for table data elements like this:\r\n\r\n**Example:**\r\n```css\r\ntd:nth-child(even), th:nth-child(even) {\r\n background-color: #D6EEEE;\r\n}\r\n```\r\n\r\n**Note:** Put the `:nth-child()` selector on both `th` and `td` elements if you want to have the styling on both headers and regular table cells.\r\n\r\n#### Combine Vertical and Horizontal Zebra Stripes\r\n\r\nYou can combine the styling from the two examples above and you will have stripes on every other row and every other column.\r\n\r\nIf you use a transparent color you will get an overlapping effect.\r\n\r\nUse an `rgba()` color to specify the transparency of the color:\r\n\r\n**Example:**\r\n```css\r\ntr:nth-child(even) {\r\n background-color: rgba(150, 212, 212, 0.4);\r\n}\r\n\r\nth:nth-child(even), td:nth-child(even) {\r\n background-color: rgba(150, 212, 212, 0.4);\r\n}\r\n```\r\n\r\n#### Horizontal Dividers\r\n\r\n| First Name | Last Name | Savings |\r\n|------------|-----------|---------|\r\n| Peter | Griffin | $100 |\r\n| Lois | Griffin | $150 |\r\n| Joe | Swanson | $300 |\r\n\r\nIf you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.\r\n\r\nAdd the `border-bottom` property to all `tr` elements to get horizontal dividers:\r\n\r\n**Example:**\r\n```css\r\ntr {\r\n border-bottom: 1px solid #ddd;\r\n}\r\n```\r\n\r\n#### Hoverable Table\r\n\r\nUse the `:hover` selector on `tr` to highlight table rows on mouse over:\r\n\r\n| First Name | Last Name | Savings |\r\n|------------|-----------|---------|\r\n| Peter | Griffin | $100 |\r\n| Lois | Griffin | $150 |\r\n| Joe | Swanson | $300 |\r\n\r\n**Example:**\r\n```css\r\ntr:hover {background-color: #D6EEEE;}\r\n```\r\n\r\n\r\n### HTML Table Colgroup\r\n\r\nThe `\u003ccolgroup\u003e` element is used to style specific columns of a table.\r\n\r\n#### HTML Table Colgroup\r\n\r\nIf you want to style the first two columns of a table, use the `\u003ccolgroup\u003e` and `\u003ccol\u003e` elements.\r\n\r\n##### Example Table\r\n| MON | TUE | WED | THU | FRI | SAT | SUN |\r\n|-----|-----|-----|-----|-----|-----|-----|\r\n| 1 | 2 | 3 | 4 | 5 | 6 | 7 |\r\n| 8 | 9 | 10 | 11 | 12 | 13 | 14 |\r\n| 15 | 16 | 17 | 18 | 19 | 20 | 21 |\r\n| 22 | 23 | 24 | 25 | 26 | 27 | 28 |\r\n\r\nThe `\u003ccolgroup\u003e` element should be used as a container for the column specifications.\r\n\r\nEach group is specified with a `\u003ccol\u003e` element. \r\nThe `span` attribute specifies how many columns that get the style. \r\nThe `style` attribute specifies the style to give the columns.\r\n\r\n\u003e **Note:** There is a very limited selection of legal CSS properties for colgroups.\r\n\r\n##### Example\r\n```html\r\n\u003ctable\u003e\r\n \u003ccolgroup\u003e\r\n \u003ccol span=\"2\" style=\"background-color: #D6EEEE\"\u003e\r\n \u003c/colgroup\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eMON\u003c/th\u003e\r\n \u003cth\u003eTUE\u003c/th\u003e\r\n \u003cth\u003eWED\u003c/th\u003e\r\n \u003cth\u003eTHU\u003c/th\u003e\r\n \u003cth\u003eFRI\u003c/th\u003e\r\n \u003cth\u003eSAT\u003c/th\u003e\r\n \u003cth\u003eSUN\u003c/th\u003e\r\n \u003c/tr\u003e\r\n ...\r\n\u003c/table\u003e\r\n```\r\n\r\n\u003e **Note:** The `\u003ccolgroup\u003e` tag must be a child of a `\u003ctable\u003e` element and should be placed before any other table elements like `\u003cthead\u003e`, `\u003ctr\u003e`, `\u003ctd\u003e`, etc., but after the `\u003ccaption\u003e` element, if present.\r\n\r\n#### Legal CSS Properties\r\n\r\nThere is only a very limited selection of CSS properties that are allowed to be used in the colgroup:\r\n\r\n- `width` property\r\n- `visibility` property\r\n- `background` properties\r\n- `border` properties\r\n\r\nAll other CSS properties will have no effect on your tables.\r\n\r\n#### Multiple Col Elements\r\n\r\nIf you want to style more columns with different styles, use more `\u003ccol\u003e` elements inside the `\u003ccolgroup\u003e`:\r\n\r\n##### Example\r\n```html\r\n\u003ctable\u003e\r\n \u003ccolgroup\u003e\r\n \u003ccol span=\"2\" style=\"background-color: #D6EEEE\"\u003e\r\n \u003ccol span=\"3\" style=\"background-color: pink\"\u003e\r\n \u003c/colgroup\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eMON\u003c/th\u003e\r\n \u003cth\u003eTUE\u003c/th\u003e\r\n \u003cth\u003eWED\u003c/th\u003e\r\n \u003cth\u003eTHU\u003c/th\u003e\r\n \u003cth\u003eFRI\u003c/th\u003e\r\n \u003cth\u003eSAT\u003c/th\u003e\r\n \u003cth\u003eSUN\u003c/th\u003e\r\n \u003c/tr\u003e\r\n ...\r\n\u003c/table\u003e\r\n```\r\n\r\n#### Empty Colgroups\r\n\r\nIf you want to style columns in the middle of a table, insert an \"empty\" `\u003ccol\u003e` element (with no styles) for the columns before:\r\n\r\n##### Example\r\n```html\r\n\u003ctable\u003e\r\n \u003ccolgroup\u003e\r\n \u003ccol span=\"3\"\u003e\r\n \u003ccol span=\"2\" style=\"background-color: pink\"\u003e\r\n \u003c/colgroup\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eMON\u003c/th\u003e\r\n \u003cth\u003eTUE\u003c/th\u003e\r\n \u003cth\u003eWED\u003c/th\u003e\r\n \u003cth\u003eTHU\u003c/th\u003e\r\n \u003cth\u003eFRI\u003c/th\u003e\r\n \u003cth\u003eSAT\u003c/th\u003e\r\n \u003cth\u003eSUN\u003c/th\u003e\r\n \u003c/tr\u003e\r\n ...\r\n\u003c/table\u003e\r\n```\r\n\r\n#### Hide Columns\r\n\r\nYou can hide columns with the `visibility: collapse` property:\r\n\r\n##### Example\r\n```html\r\n\u003ctable\u003e\r\n \u003ccolgroup\u003e\r\n \u003ccol span=\"2\"\u003e\r\n \u003ccol span=\"3\" style=\"visibility: collapse\"\u003e\r\n \u003c/colgroup\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eMON\u003c/th\u003e\r\n \u003cth\u003eTUE\u003c/th\u003e\r\n \u003cth\u003eWED\u003c/th\u003e\r\n \u003cth\u003eTHU\u003c/th\u003e\r\n \u003cth\u003eFRI\u003c/th\u003e\r\n \u003cth\u003eSAT\u003c/th\u003e\r\n \u003cth\u003eSUN\u003c/th\u003e\r\n \u003c/tr\u003e\r\n ...\r\n\u003c/table\u003e\r\n```\r\n\r\n---\r\n\r\n### HTML Lists [⬆️](#table-of-contents)\r\n\r\nHTML lists allow web developers to group a set of related items in lists.\r\n\r\n#### Example\r\n\r\n##### An unordered HTML list:\r\n- Item\r\n- Item\r\n- Item\r\n- Item\r\n\r\n##### An ordered HTML list:\r\n1. First item\r\n2. Second item\r\n3. Third item\r\n4. Fourth item\r\n\r\n#### Unordered HTML List\r\n\r\nAn unordered list starts with the `\u003cul\u003e` tag. Each list item starts with the `\u003cli\u003e` tag.\r\n\r\nThe list items will be marked with bullets (small black circles) by default:\r\n\r\n**Example:**\r\n```html\r\n\u003cul\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n#### Ordered HTML List\r\n\r\nAn ordered list starts with the `\u003col\u003e` tag. Each list item starts with the `\u003cli\u003e` tag.\r\n\r\nThe list items will be marked with numbers by default:\r\n\r\n**Example:**\r\n```html\r\n\u003col\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ol\u003e\r\n```\r\n\r\n#### HTML Description Lists\r\n\r\nHTML also supports description lists.\r\n\r\nA description list is a list of terms, with a description of each term.\r\n\r\nThe `\u003cdl\u003e` tag defines the description list, the `\u003cdt\u003e` tag defines the term (name), and the `\u003cdd\u003e` tag describes each term:\r\n\r\n**Example:**\r\n```html\r\n\u003cdl\u003e\r\n \u003cdt\u003eCoffee\u003c/dt\u003e\r\n \u003cdd\u003e- black hot drink\u003c/dd\u003e\r\n \u003cdt\u003eMilk\u003c/dt\u003e\r\n \u003cdd\u003e- white cold drink\u003c/dd\u003e\r\n\u003c/dl\u003e\r\n```\r\n\r\n\r\n### HTML Unordered Lists\r\n\r\n#### The HTML `\u003cul\u003e` Tag\r\n\r\nThe HTML `\u003cul\u003e` tag defines an unordered (bulleted) list.\r\n\r\n##### Unordered HTML List\r\n\r\nAn unordered list starts with the `\u003cul\u003e` tag. Each list item starts with the `\u003cli\u003e` tag.\r\n\r\nThe list items will be marked with bullets (small black circles) by default:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cul\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n##### Unordered HTML List - Choose List Item Marker\r\n\r\nThe CSS `list-style-type` property is used to define the style of the list item marker. It can have one of the following values:\r\n\r\n| Value | Description |\r\n|---------|---------------------------------------|\r\n| `disc` | Sets the list item marker to a bullet (default) |\r\n| `circle` | Sets the list item marker to a circle |\r\n| `square` | Sets the list item marker to a square |\r\n| `none` | The list items will not be marked |\r\n\r\n**Example - Disc:**\r\n\r\n```html\r\n\u003cul style=\"list-style-type:disc;\"\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n**Example - Circle:**\r\n\r\n```html\r\n\u003cul style=\"list-style-type:circle;\"\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n**Example - Square:**\r\n\r\n```html\r\n\u003cul style=\"list-style-type:square;\"\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n**Example - None:**\r\n\r\n```html\r\n\u003cul style=\"list-style-type:none;\"\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n##### Nested HTML Lists\r\n\r\nLists can be nested (list inside list):\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cul\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\r\n \u003cul\u003e\r\n \u003cli\u003eBlack tea\u003c/li\u003e\r\n \u003cli\u003eGreen tea\u003c/li\u003e\r\n \u003c/ul\u003e\r\n \u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n*Note:* A list item (`\u003cli\u003e`) can contain a new list, and other HTML elements, like images and links, etc.\r\n\r\n##### Horizontal List with CSS\r\n\r\nHTML lists can be styled in many different ways with CSS. One popular way is to style a list horizontally, to create a navigation menu:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n\u003cstyle\u003e\r\nul {\r\n list-style-type: none;\r\n margin: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n background-color: #333333;\r\n}\r\n\r\nli {\r\n float: left;\r\n}\r\n\r\nli a {\r\n display: block;\r\n color: white;\r\n text-align: center;\r\n padding: 16px;\r\n text-decoration: none;\r\n}\r\n\r\nli a:hover {\r\n background-color: #111111;\r\n}\r\n\u003c/style\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\n\u003cul\u003e\r\n \u003cli\u003e\u003ca href=\"#home\"\u003eHome\u003c/a\u003e\u003c/li\u003e\r\n \u003cli\u003e\u003ca href=\"#news\"\u003eNews\u003c/a\u003e\u003c/li\u003e\r\n \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\r\n \u003cli\u003e\u003ca href=\"#about\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\r\n\u003c/ul\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n*Tip:* You can learn much more about CSS in our CSS Tutorial.\r\n\r\n#### Chapter Summary\r\n\r\n- Use the HTML `\u003cul\u003e` element to define an unordered list\r\n- Use the CSS `list-style-type` property to define the list item marker\r\n- Use the HTML `\u003cli\u003e` element to define a list item\r\n- Lists can be nested\r\n- List items can contain other HTML elements\r\n- Use the CSS property `float:left` to display a list horizontally\r\n\r\n\r\n### HTML Ordered Lists\r\n\r\nThe HTML `\u003col\u003e` tag defines an ordered list. An ordered list can be numerical or alphabetical.\r\n\r\n##### Ordered HTML List\r\n\r\nAn ordered list starts with the `\u003col\u003e` tag. Each list item starts with the `\u003cli\u003e` tag.\r\n\r\nThe list items will be marked with numbers by default:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003col\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ol\u003e\r\n```\r\n\r\n##### Ordered HTML List - The Type Attribute\r\n\r\nThe `type` attribute of the `\u003col\u003e` tag defines the type of the list item marker:\r\n\r\n| Type | Description |\r\n|-------|---------------------------------------------------|\r\n| `type=\"1\"` | The list items will be numbered with numbers (default) |\r\n| `type=\"A\"` | The list items will be numbered with uppercase letters |\r\n| `type=\"a\"` | The list items will be numbered with lowercase letters |\r\n| `type=\"I\"` | The list items will be numbered with uppercase roman numbers |\r\n| `type=\"i\"` | The list items will be numbered with lowercase roman numbers |\r\n\r\n**Numbers:**\r\n\r\n```html\r\n\u003col type=\"1\"\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ol\u003e\r\n```\r\n\r\n**Uppercase Letters:**\r\n\r\n```html\r\n\u003col type=\"A\"\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ol\u003e\r\n```\r\n\r\n**Lowercase Letters:**\r\n\r\n```html\r\n\u003col type=\"a\"\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ol\u003e\r\n```\r\n\r\n**Uppercase Roman Numbers:**\r\n\r\n```html\r\n\u003col type=\"I\"\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ol\u003e\r\n```\r\n\r\n**Lowercase Roman Numbers:**\r\n\r\n```html\r\n\u003col type=\"i\"\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ol\u003e\r\n```\r\n\r\n##### Control List Counting\r\n\r\nBy default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the `start` attribute:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003col start=\"50\"\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ol\u003e\r\n```\r\n\r\n##### Nested HTML Lists\r\n\r\nLists can be nested (list inside list):\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003col\u003e\r\n \u003cli\u003eCoffee\u003c/li\u003e\r\n \u003cli\u003eTea\r\n \u003col\u003e\r\n \u003cli\u003eBlack tea\u003c/li\u003e\r\n \u003cli\u003eGreen tea\u003c/li\u003e\r\n \u003c/ol\u003e\r\n \u003c/li\u003e\r\n \u003cli\u003eMilk\u003c/li\u003e\r\n\u003c/ol\u003e\r\n```\r\n\r\n**Note:** A list item (`\u003cli\u003e`) can contain a new list and other HTML elements, like images and links, etc.\r\n\r\n##### Chapter Summary\r\n\r\n- Use the HTML `\u003col\u003e` element to define an ordered list\r\n- Use the HTML `type` attribute to define the numbering type\r\n- Use the HTML `\u003cli\u003e` element to define a list item\r\n- Lists can be nested\r\n- List items can contain other HTML elements\r\n\r\n\r\n### HTML Other Lists\r\n\r\n#### HTML Description Lists\r\n\r\nHTML also supports description lists. \r\n\r\nA description list is a list of terms, with a description of each term.\r\n\r\nThe `\u003cdl\u003e` tag defines the description list, the `\u003cdt\u003e` tag defines the term (name), and the `\u003cdd\u003e` tag describes each term:\r\n\r\n##### Example\r\n\r\n```html\r\n\u003cdl\u003e\r\n \u003cdt\u003eCoffee\u003c/dt\u003e\r\n \u003cdd\u003e- black hot drink\u003c/dd\u003e\r\n \u003cdt\u003eMilk\u003c/dt\u003e\r\n \u003cdd\u003e- white cold drink\u003c/dd\u003e\r\n\u003c/dl\u003e\r\n```\r\n\r\n#### Chapter Summary\r\n\r\n- Use the HTML `\u003cdl\u003e` element to define a description list\r\n- Use the HTML `\u003cdt\u003e` element to define the description term\r\n- Use the HTML `\u003cdd\u003e` element to describe the term in a description list\r\n\r\n\r\n---\r\n\r\n### HTML Block and Inline Elements [⬆️](#table-of-contents)\r\n\r\nEvery HTML element has a default display value, depending on what type of element it is.\r\n\r\nThe two most common display values are **block** and **inline**.\r\n\r\n\r\n\r\n**Block-level Elements**\r\n\r\nA block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.\r\n\r\nA block-level element always takes up the full width available (stretches out to the left and right as far as it can).\r\n\r\nTwo commonly used block elements are: `\u003cp\u003e` and `\u003cdiv\u003e`.\r\n\r\n- The `\u003cp\u003e` element defines a paragraph in an HTML document.\r\n- The `\u003cdiv\u003e` element defines a division or a section in an HTML document.\r\n\r\n**Example**\r\n\r\n```html\r\n\u003cp\u003eHello World\u003c/p\u003e\r\n\u003cdiv\u003eHello World\u003c/div\u003e\r\n```\r\n\r\n**Here are the block-level elements in HTML:**\r\n\r\n- `\u003caddress\u003e`\r\n- `\u003carticle\u003e`\r\n- `\u003caside\u003e`\r\n- `\u003cblockquote\u003e`\r\n- `\u003ccanvas\u003e`\r\n- `\u003cdd\u003e`\r\n- `\u003cdiv\u003e`\r\n- `\u003cdl\u003e`\r\n- `\u003cdt\u003e`\r\n- `\u003cfieldset\u003e`\r\n- `\u003cfigcaption\u003e`\r\n- `\u003cfigure\u003e`\r\n- `\u003cfooter\u003e`\r\n- `\u003cform\u003e`\r\n- `\u003ch1\u003e-\u003ch6\u003e`\r\n- `\u003cheader\u003e`\r\n- `\u003chr\u003e`\r\n- `\u003cli\u003e`\r\n- `\u003cmain\u003e`\r\n- `\u003cnav\u003e`\r\n- `\u003cnoscript\u003e`\r\n- `\u003col\u003e`\r\n- `\u003cp\u003e`\r\n- `\u003cpre\u003e`\r\n- `\u003csection\u003e`\r\n- `\u003ctable\u003e`\r\n- `\u003ctfoot\u003e`\r\n- `\u003cul\u003e`\r\n- `\u003cvideo\u003e`\r\n\r\n\r\n\r\n**Inline Elements**\r\n\r\nAn inline element does not start on a new line.\r\n\r\nAn inline element only takes up as much width as necessary.\r\n\r\n**Example**\r\n\r\n```html\r\n\u003cspan\u003eHello World\u003c/span\u003e\r\n```\r\n\r\n**Here are the inline elements in HTML:**\r\n\r\n- `\u003ca\u003e`\r\n- `\u003cabbr\u003e`\r\n- `\u003cacronym\u003e`\r\n- `\u003cb\u003e`\r\n- `\u003cbdo\u003e`\r\n- `\u003cbig\u003e`\r\n- `\u003cbr\u003e`\r\n- `\u003cbutton\u003e`\r\n- `\u003ccite\u003e`\r\n- `\u003ccode\u003e`\r\n- `\u003cdfn\u003e`\r\n- `\u003cem\u003e`\r\n- `\u003ci\u003e`\r\n- `\u003cimg\u003e`\r\n- `\u003cinput\u003e`\r\n- `\u003ckbd\u003e`\r\n- `\u003clabel\u003e`\r\n- `\u003cmap\u003e`\r\n- `\u003cobject\u003e`\r\n- `\u003coutput\u003e`\r\n- `\u003cq\u003e`\r\n- `\u003csamp\u003e`\r\n- `\u003cscript\u003e`\r\n- `\u003cselect\u003e`\r\n- `\u003csmall\u003e`\r\n- `\u003cspan\u003e`\r\n- `\u003cstrong\u003e`\r\n- `\u003csub\u003e`\r\n- `\u003csup\u003e`\r\n- `\u003ctextarea\u003e`\r\n- `\u003ctime\u003e`\r\n- `\u003ctt\u003e`\r\n- `\u003cvar\u003e`\r\n\r\n**Note:** An inline element cannot contain a block-level element!\r\n\r\n\r\n\r\n**The `\u003cdiv\u003e` Element**\r\n\r\nThe `\u003cdiv\u003e` element is often used as a container for other HTML elements.\r\n\r\nThe `\u003cdiv\u003e` element has no required attributes, but `style`, `class`, and `id` are common.\r\n\r\nWhen used together with CSS, the `\u003cdiv\u003e` element can be used to style blocks of content:\r\n\r\n**Example**\r\n\r\n```html\r\n\u003cdiv style=\"background-color:black;color:white;padding:20px;\"\u003e\r\n \u003ch2\u003eLondon\u003c/h2\u003e\r\n \u003cp\u003eLondon is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.\u003c/p\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nYou will learn more about the `\u003cdiv\u003e` element in the next chapter.\r\n\r\n\r\n\r\n**The `\u003cspan\u003e` Element**\r\n\r\nThe `\u003cspan\u003e` element is an inline container used to mark up a part of a text, or a part of a document.\r\n\r\nThe `\u003cspan\u003e` element has no required attributes, but `style`, `class`, and `id` are common.\r\n\r\nWhen used together with CSS, the `\u003cspan\u003e` element can be used to style parts of the text:\r\n\r\n**Example**\r\n\r\n```html\r\n\u003cp\u003eMy mother has \u003cspan style=\"color:blue;font-weight:bold;\"\u003eblue\u003c/span\u003e eyes and my father has \u003cspan style=\"color:darkolivegreen;font-weight:bold;\"\u003edark green\u003c/span\u003e eyes.\u003c/p\u003e\r\n```\r\n\r\n---\r\n\r\n\r\n### HTML Div Element [⬆️](#table-of-contents)\r\n\r\nThe `\u003cdiv\u003e` element is used as a container for other HTML elements.\r\n\r\n### The `\u003cdiv\u003e` Element\r\n\r\nThe `\u003cdiv\u003e` element is by default a block element, meaning that it takes all available width, and comes with line breaks before and after.\r\n\r\n#### Example\r\n\r\nA `\u003cdiv\u003e` element takes up all available width:\r\n```\r\nLorem Ipsum \u003cdiv\u003eI am a div\u003c/div\u003e dolor sit amet.\r\n```\r\n\r\n#### Result\r\n```\r\nLorem Ipsum\r\nI am a div\r\ndolor sit amet.\r\n```\r\n\r\nThe `\u003cdiv\u003e` element has no required attributes, but `style`, `class`, and `id` are common.\r\n\r\n### `\u003cdiv\u003e` as a Container\r\n\r\nThe `\u003cdiv\u003e` element is often used to group sections of a web page together.\r\n\r\n#### Example\r\n\r\nA `\u003cdiv\u003e` element with HTML elements:\r\n```\r\n\u003cdiv\u003e\r\n \u003ch2\u003eLondon\u003c/h2\u003e\r\n \u003cp\u003eLondon is the capital city of England.\u003c/p\u003e\r\n \u003cp\u003eLondon has over 13 million inhabitants.\u003c/p\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### Result\r\n```\r\nLondon\r\n\r\nLondon is the capital city of England.\r\n\r\nLondon has over 13 million inhabitants.\r\n```\r\n\r\n### Center Align a `\u003cdiv\u003e` Element\r\n\r\nIf you have a `\u003cdiv\u003e` element that is not 100% wide and you want to center-align it, set the CSS `margin` property to `auto`.\r\n\r\n#### Example\r\n```\r\n\u003cstyle\u003e\r\ndiv {\r\n width: 300px;\r\n margin: auto;\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n#### Result\r\n```\r\nLondon\r\n\r\nLondon is the capital city of England.\r\n\r\nLondon has over 13 million inhabitants.\r\n```\r\n\r\n### Multiple `\u003cdiv\u003e` Elements\r\n\r\nYou can have many `\u003cdiv\u003e` containers on the same page.\r\n\r\n#### Example\r\n```\r\n\u003cdiv\u003e\r\n \u003ch2\u003eLondon\u003c/h2\u003e\r\n \u003cp\u003eLondon is the capital city of England.\u003c/p\u003e\r\n \u003cp\u003eLondon has over 13 million inhabitants.\u003c/p\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv\u003e\r\n \u003ch2\u003eOslo\u003c/h2\u003e\r\n \u003cp\u003eOslo is the capital city of Norway.\u003c/p\u003e\r\n \u003cp\u003eOslo has over 600,000 inhabitants.\u003c/p\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv\u003e\r\n \u003ch2\u003eRome\u003c/h2\u003e\r\n \u003cp\u003eRome is the capital city of Italy.\u003c/p\u003e\r\n \u003cp\u003eRome has almost 3 million inhabitants.\u003c/p\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### Result\r\n```\r\nLondon\r\n\r\nLondon is the capital city of England.\r\n\r\nLondon has over 13 million inhabitants.\r\n\r\nOslo\r\n\r\nOslo is the capital city of Norway.\r\n\r\nOslo has over 600,000 inhabitants.\r\n\r\nRome\r\n\r\nRome is the capital city of Italy.\r\n\r\nRome has almost 3 million inhabitants.\r\n```\r\n\r\n### Aligning `\u003cdiv\u003e` Elements Side by Side\r\n\r\nWhen building web pages, you often want to have two or more `\u003cdiv\u003e` elements side by side.\r\n\r\n#### Example\r\n\r\n```\r\nLondon\r\n\r\nLondon is the capital city of England.\r\n\r\nLondon has over 13 million inhabitants.\r\n\r\nOslo\r\n\r\nOslo is the capital city of Norway.\r\n\r\nOslo has over 600,000 inhabitants.\r\n\r\nRome\r\n\r\nRome is the capital city of Italy.\r\n\r\nRome has almost 3 million inhabitants.\r\n```\r\n\r\nThere are different methods for aligning elements side by side, all include some CSS styling. We will look at the most common methods:\r\n\r\n#### Float\r\n\r\nThe CSS `float` property was not originally meant to align `\u003cdiv\u003e` elements side-by-side, but has been used for this purpose for many years.\r\n\r\nThe CSS `float` property is used for positioning and formatting content and allows elements to float next to each other instead of on top of each other.\r\n\r\n##### Example\r\n\r\nHow to use float to align div elements side by side:\r\n```\r\n\u003cstyle\u003e\r\n.mycontainer {\r\n width: 100%;\r\n overflow: auto;\r\n}\r\n.mycontainer div {\r\n width: 33%;\r\n float: left;\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n##### Result\r\n```\r\nLondon\r\n\r\nLondon is the capital city of England.\r\n\r\nLondon has over 13 million inhabitants.\r\n\r\nOslo\r\n\r\nOslo is the capital city of Norway.\r\n\r\nOslo has over 600,000 inhabitants.\r\n\r\nRome\r\n\r\nRome is the capital city of Italy.\r\n\r\nRome has almost 3 million inhabitants.\r\n```\r\n\r\nLearn more about float in our CSS float tutorial.\r\n\r\n#### Inline-block\r\n\r\nIf you change the `\u003cdiv\u003e` element's display property from block to inline-block, the `\u003cdiv\u003e` elements will no longer add a line break before and after, and will be displayed side by side instead of on top of each other.\r\n\r\n##### Example\r\n\r\nHow to use `display: inline-block` to align div elements side by side:\r\n```\r\n\u003cstyle\u003e\r\ndiv {\r\n width: 30%;\r\n display: inline-block;\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n##### Result\r\n```\r\nLondon\r\n\r\nLondon is the capital city of England.\r\n\r\nLondon has over 13 million inhabitants.\r\n\r\nOslo\r\n\r\nOslo is the capital city of Norway.\r\n\r\nOslo has over 600,000 inhabitants.\r\n\r\nRome\r\n\r\nRome is the capital city of Italy.\r\n\r\nRome has almost 3 million inhabitants.\r\n```\r\n\r\n#### Flex\r\n\r\nThe CSS Flexbox Layout Module was introduced to make it easier to design flexible, responsive layout structures without using float or positioning.\r\n\r\nTo make the CSS flex method work, surround the `\u003cdiv\u003e` elements with another `\u003cdiv\u003e` element and give it the status of a flex container.\r\n\r\n##### Example\r\n\r\nHow to use flex to align div elements side by side:\r\n```\r\n\u003cstyle\u003e\r\n.mycontainer {\r\n display: flex;\r\n}\r\n.mycontainer \u003e div {\r\n width: 33%;\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n##### Result\r\n```\r\nLondon\r\n\r\nLondon is the capital city of England.\r\n\r\nLondon has over 13 million inhabitants.\r\n\r\nOslo\r\n\r\nOslo is the capital city of Norway.\r\n\r\nOslo has over 600,000 inhabitants.\r\n\r\nRome\r\n\r\nRome is the capital city of Italy.\r\n\r\nRome has almost 3 million inhabitants.\r\n```\r\n\r\nLearn more about flex in our CSS flexbox tutorial.\r\n\r\n#### Grid\r\n\r\nThe CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.\r\n\r\nSounds almost the same as flex, but has the ability to define more than one row and position each row individually.\r\n\r\nThe CSS grid method requires that you surround the `\u003cdiv\u003e` elements with another `\u003cdiv\u003e` element and give it the status of a grid container, and you must specify the width of each column.\r\n\r\n##### Example\r\n\r\nHow to use grid to align `\u003cdiv\u003e` elements side by side:\r\n```\r\n\u003cstyle\u003e\r\n.grid-container {\r\n display: grid;\r\n grid-template-columns: 33% 33% 33%;\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n##### Result\r\n```\r\nLondon\r\n\r\nLondon is the capital city of England.\r\n\r\nLondon has over 13 million inhabitants.\r\n\r\nOslo\r\n\r\nOslo is the capital city of Norway.\r\n\r\nOslo has over 600,000 inhabitants.\r\n\r\nRome\r\n\r\nRome is the capital city of Italy.\r\n\r\nRome has almost 3 million inhabitants.\r\n```\r\n\r\nLearn more about grid in our CSS grid tutorial.\r\n\r\n---\r\n\r\n\r\n### HTML class Attribute [⬆️](#table-of-contents)\r\n\r\n#### Overview\r\n\r\nThe HTML `class` attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class.\r\n\r\n#### Using The class Attribute\r\n\r\nThe `class` attribute is often used to point to a class name in a style sheet. It can also be used by JavaScript to access and manipulate elements with the specific class name.\r\n\r\n##### Example 1: Styling `\u003cdiv\u003e` Elements\r\n\r\nIn the following example, we have three `\u003cdiv\u003e` elements with a `class` attribute set to `\"city\"`. All of these `\u003cdiv\u003e` elements will be styled equally according to the `.city` style definition in the head section:\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n\u003cstyle\u003e\r\n.city {\r\n background-color: tomato;\r\n color: white;\r\n border: 2px solid black;\r\n margin: 20px;\r\n padding: 20px;\r\n}\r\n\u003c/style\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\n\u003cdiv class=\"city\"\u003e\r\n \u003ch2\u003eLondon\u003c/h2\u003e\r\n \u003cp\u003eLondon is the capital of England.\u003c/p\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv class=\"city\"\u003e\r\n \u003ch2\u003eParis\u003c/h2\u003e\r\n \u003cp\u003eParis is the capital of France.\u003c/p\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv class=\"city\"\u003e\r\n \u003ch2\u003eTokyo\u003c/h2\u003e\r\n \u003cp\u003eTokyo is the capital of Japan.\u003c/p\u003e\r\n\u003c/div\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n##### Example 2: Styling `\u003cspan\u003e` Elements\r\n\r\nIn this example, we have two `\u003cspan\u003e` elements with a `class` attribute set to `\"note\"`. Both `\u003cspan\u003e` elements will be styled equally according to the `.note` style definition in the head section:\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n\u003cstyle\u003e\r\n.note {\r\n font-size: 120%;\r\n color: red;\r\n}\r\n\u003c/style\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\n\u003ch1\u003eMy \u003cspan class=\"note\"\u003eImportant\u003c/span\u003e Heading\u003c/h1\u003e\r\n\u003cp\u003eThis is some \u003cspan class=\"note\"\u003eimportant\u003c/span\u003e text.\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n#### Tips\r\n\r\n- The `class` attribute can be used on any HTML element.\r\n- The class name is case-sensitive.\r\n- You can learn much more about CSS in our [CSS Tutorial](#).\r\n\r\n#### The Syntax For Class\r\n\r\nTo create a class, write a period (`.`) character followed by a class name. Then, define the CSS properties within curly braces `{}`:\r\n\r\n##### Example: Creating a Class Named \"city\"\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n\u003cstyle\u003e\r\n.city {\r\n background-color: tomato;\r\n color: white;\r\n padding: 10px;\r\n}\r\n\u003c/style\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\n\u003ch2 class=\"city\"\u003eLondon\u003c/h2\u003e\r\n\u003cp\u003eLondon is the capital of England.\u003c/p\u003e\r\n\r\n\u003ch2 class=\"city\"\u003eParis\u003c/h2\u003e\r\n\u003cp\u003eParis is the capital of France.\u003c/p\u003e\r\n\r\n\u003ch2 class=\"city\"\u003eTokyo\u003c/h2\u003e\r\n\u003cp\u003eTokyo is the capital of Japan.\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n#### Multiple Classes\r\n\r\nHTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g., `\u003cdiv class=\"city main\"\u003e`. The element will be styled according to all the classes specified.\r\n\r\n##### Example: Combining Classes\r\n\r\n```html\r\n\u003ch2 class=\"city main\"\u003eLondon\u003c/h2\u003e\r\n\u003ch2 class=\"city\"\u003eParis\u003c/h2\u003e\r\n\u003ch2 class=\"city\"\u003eTokyo\u003c/h2\u003e\r\n```\r\n\r\n#### Different Elements Sharing the Same Class\r\n\r\nDifferent HTML elements can point to the same class name.\r\n\r\n##### Example: Sharing the \"city\" Class\r\n\r\n```html\r\n\u003ch2 class=\"city\"\u003eParis\u003c/h2\u003e\r\n\u003cp class=\"city\"\u003eParis is the capital of France\u003c/p\u003e\r\n```\r\n\r\n#### Use of The class Attribute in JavaScript\r\n\r\nThe class name can also be used by JavaScript to perform tasks on specific elements. JavaScript can access elements with a specific class name using the `getElementsByClassName()` method.\r\n\r\n##### Example: Hiding Elements with JavaScript\r\n\r\n```html\r\n\u003cscript\u003e\r\nfunction myFunction() {\r\n var x = document.getElementsByClassName(\"city\");\r\n for (var i = 0; i \u003c x.length; i++) {\r\n x[i].style.display = \"none\";\r\n }\r\n}\r\n\u003c/script\u003e\r\n```\r\n\r\nDon't worry if you don't understand the code in the example above. You will learn more about JavaScript in our [HTML JavaScript chapter](#), or you can study our [JavaScript Tutorial](#).\r\n\r\n\r\n---\r\n\r\n\r\n### HTML id Attribute\r\n\r\nThe HTML `id` attribute is used to specify a unique id for an HTML element.\r\n\r\nYou cannot have more than one element with the same id in an HTML document.\r\n\r\n#### Using The id Attribute [⬆️](#table-of-contents)\r\n\r\nThe `id` attribute specifies a unique id for an HTML element. The value of the `id` attribute must be unique within the HTML document.\r\n\r\nThe `id` attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.\r\n\r\nThe syntax for `id` is: write a hash character (`#`), followed by an id name. Then, define the CSS properties within curly braces `{}`.\r\n\r\nIn the following example, we have an `\u003ch1\u003e` element that points to the id name \"myHeader\". This `\u003ch1\u003e` element will be styled according to the `#myHeader` style definition in the head section:\r\n\r\n##### Example\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n\u003cstyle\u003e\r\n#myHeader {\r\n background-color: lightblue;\r\n color: black;\r\n padding: 40px;\r\n text-align: center;\r\n}\r\n\u003c/style\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\n\u003ch1 id=\"myHeader\"\u003eMy Header\u003c/h1\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n**Note:** The id name is case sensitive!\r\n\r\n**Note:** The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).\r\n\r\n#### Difference Between Class and ID\r\n\r\nA class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:\r\n\r\n##### Example\r\n\r\n```html\r\n\u003cstyle\u003e\r\n/* Style the element with the id \"myHeader\" */\r\n#myHeader {\r\n background-color: lightblue;\r\n color: black;\r\n padding: 40px;\r\n text-align: center;\r\n}\r\n\r\n/* Style all elements with the class name \"city\" */\r\n.city {\r\n background-color: tomato;\r\n color: white;\r\n padding: 10px;\r\n}\r\n\u003c/style\u003e\r\n\r\n\u003c!-- An element with a unique id --\u003e\r\n\u003ch1 id=\"myHeader\"\u003eMy Cities\u003c/h1\u003e\r\n\r\n\u003c!-- Multiple elements with same class --\u003e\r\n\u003ch2 class=\"city\"\u003eLondon\u003c/h2\u003e\r\n\u003cp\u003eLondon is the capital of England.\u003c/p\u003e\r\n\r\n\u003ch2 class=\"city\"\u003eParis\u003c/h2\u003e\r\n\u003cp\u003eParis is the capital of France.\u003c/p\u003e\r\n\r\n\u003ch2 class=\"city\"\u003eTokyo\u003c/h2\u003e\r\n\u003cp\u003eTokyo is the capital of Japan.\u003c/p\u003e\r\n```\r\n\r\n**Tip:** You can learn much more about CSS in our [CSS Tutorial](#).\r\n\r\n#### HTML Bookmarks with ID and Links\r\n\r\nHTML bookmarks are used to allow readers to jump to specific parts of a webpage.\r\n\r\nBookmarks can be useful if your page is very long.\r\n\r\nTo use a bookmark, you must first create it, and then add a link to it.\r\n\r\nThen, when the link is clicked, the page will scroll to the location with the bookmark.\r\n\r\n##### Example\r\n\r\nFirst, create a bookmark with the id attribute:\r\n\r\n```html\r\n\u003ch2 id=\"C4\"\u003eChapter 4\u003c/h2\u003e\r\n```\r\n\r\nThen, add a link to the bookmark (\"Jump to Chapter 4\"), from within the same page:\r\n\r\n```html\r\n\u003ca href=\"#C4\"\u003eJump to Chapter 4\u003c/a\u003e\r\n```\r\n\r\nOr, add a link to the bookmark (\"Jump to Chapter 4\"), from another page:\r\n\r\n```html\r\n\u003ca href=\"html_demo.html#C4\"\u003eJump to Chapter 4\u003c/a\u003e\r\n```\r\n\r\n#### Using The id Attribute in JavaScript\r\n\r\nThe `id` attribute can also be used by JavaScript to perform some tasks for that specific element.\r\n\r\nJavaScript can access an element with a specific id with the `getElementById()` method:\r\n\r\n##### Example\r\n\r\nUse the `id` attribute to manipulate text with JavaScript:\r\n\r\n```html\r\n\u003cscript\u003e\r\nfunction displayResult() {\r\n document.getElementById(\"myHeader\").innerHTML = \"Have a nice day!\";\r\n}\r\n\u003c/script\u003e\r\n```\r\n\r\n**Tip:** Study JavaScript in the [HTML JavaScript chapter](#), or in our [JavaScript Tutorial](#).\r\n\r\n\r\n---\r\n\r\n### HTML Iframes [⬆️](#table-of-contents)\r\n\r\n##### An HTML iframe is used to display a web page within a web page.\r\n\r\n##### HTML Iframe Syntax\r\n\r\nThe HTML `\u003ciframe\u003e` tag specifies an inline frame.\r\n\r\nAn inline frame is used to embed another document within the current HTML document.\r\n\r\n**Syntax:**\r\n\r\n```html\r\n\u003ciframe src=\"url\" title=\"description\"\u003e\u003c/iframe\u003e\r\n```\r\n\r\n*Tip:* It is a good practice to always include a `title` attribute for the `\u003ciframe\u003e`. This is used by screen readers to read out what the content of the iframe is.\r\n\r\n##### Iframe - Set Height and Width\r\n\r\nUse the `height` and `width` attributes to specify the size of the iframe.\r\n\r\nThe height and width are specified in pixels by default:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003ciframe src=\"demo_iframe.htm\" height=\"200\" width=\"300\" title=\"Iframe Example\"\u003e\u003c/iframe\u003e\r\n```\r\n\r\nOr you can add the `style` attribute and use the CSS `height` and `width` properties:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003ciframe src=\"demo_iframe.htm\" style=\"height:200px;width:300px;\" title=\"Iframe Example\"\u003e\u003c/iframe\u003e\r\n```\r\n\r\n##### Iframe - Remove the Border\r\n\r\nBy default, an iframe has a border around it.\r\n\r\nTo remove the border, add the `style` attribute and use the CSS `border` property:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003ciframe src=\"demo_iframe.htm\" style=\"border:none;\" title=\"Iframe Example\"\u003e\u003c/iframe\u003e\r\n```\r\n\r\nWith CSS, you can also change the size, style, and color of the iframe's border:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003ciframe src=\"demo_iframe.htm\" style=\"border:2px solid red;\" title=\"Iframe Example\"\u003e\u003c/iframe\u003e\r\n```\r\n\r\n##### Iframe - Target for a Link\r\n\r\nAn iframe can be used as the target frame for a link.\r\n\r\nThe `target` attribute of the link must refer to the `name` attribute of the iframe:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003ciframe src=\"demo_iframe.htm\" name=\"iframe_a\" title=\"Iframe Example\"\u003e\u003c/iframe\u003e\r\n\r\n\u003cp\u003e\u003ca href=\"https://www.nemonet.com\" target=\"iframe_a\"\u003enemonet.com\u003c/a\u003e\u003c/p\u003e\r\n```\r\n\r\n#### Chapter Summary\r\n\r\n- The HTML `\u003ciframe\u003e` tag specifies an inline frame.\r\n- The `src` attribute defines the URL of the page to embed.\r\n- Always include a `title` attribute (for screen readers).\r\n- The `height` and `width` attributes specify the size of the iframe.\r\n- Use `border:none;` to remove the border around the iframe.\r\n\r\n\r\n---\r\n\r\n\r\n### HTML JavaScript [⬆️](#table-of-contents)\r\n\r\nJavaScript makes HTML pages more dynamic and interactive.\r\n\r\n**Example**\r\n\r\n*My First JavaScript*\r\n\r\n\r\n\r\n**The HTML `\u003cscript\u003e` Tag**\r\n\r\nThe HTML `\u003cscript\u003e` tag is used to define a client-side script (JavaScript).\r\n\r\nThe `\u003cscript\u003e` element either contains script statements, or it points to an external script file through the `src` attribute.\r\n\r\nCommon uses for JavaScript include image manipulation, form validation, and dynamic changes of content.\r\n\r\nTo select an HTML element, JavaScript most often uses the `document.getElementById()` method.\r\n\r\nThis JavaScript example writes \"Hello JavaScript!\" into an HTML element with `id=\"demo\"`:\r\n\r\n**Example**\r\n\r\n```html\r\n\u003cscript\u003e\r\ndocument.getElementById(\"demo\").innerHTML = \"Hello JavaScript!\";\r\n\u003c/script\u003e\r\n```\r\n\r\n*Tip: You can learn much more about JavaScript in our [JavaScript Tutorial](#).*\r\n\r\n\r\n\r\n**A Taste of JavaScript**\r\n\r\nHere are some examples of what JavaScript can do:\r\n\r\n**Example**\r\n\r\n*JavaScript can change content:*\r\n\r\n```javascript\r\ndocument.getElementById(\"demo\").innerHTML = \"Hello JavaScript!\";\r\n```\r\n\r\n**Example**\r\n\r\n*JavaScript can change styles:*\r\n\r\n```javascript\r\ndocument.getElementById(\"demo\").style.fontSize = \"25px\";\r\ndocument.getElementById(\"demo\").style.color = \"red\";\r\ndocument.getElementById(\"demo\").style.backgroundColor = \"yellow\";\r\n```\r\n\r\n**Example**\r\n\r\n*JavaScript can change attributes:*\r\n\r\n```javascript\r\ndocument.getElementById(\"image\").src = \"picture.gif\";\r\n```\r\n\r\n\r\n\r\n**The HTML `\u003cnoscript\u003e` Tag**\r\n\r\nThe HTML `\u003cnoscript\u003e` tag defines alternate content to be displayed to users who have disabled scripts in their browser or have a browser that doesn't support scripts:\r\n\r\n**Example**\r\n\r\n```html\r\n\u003cscript\u003e\r\ndocument.getElementById(\"demo\").innerHTML = \"Hello JavaScript!\";\r\n\u003c/script\u003e\r\n\u003cnoscript\u003eSorry, your browser does not support JavaScript!\u003c/noscript\u003e\r\n```\r\n\r\n---\r\n\r\n\r\n### HTML File Paths [⬆️](#table-of-contents)\r\n\r\nA file path describes the location of a file in a web site's folder structure.\r\n\r\n#### File Path Examples\r\n\r\n| Path | Description |\r\n|------------------------------|--------------------------------------------------------------|\r\n| `\u003cimg src=\"picture.jpg\"\u003e` | The \"picture.jpg\" file is located in the same folder as the current page. |\r\n| `\u003cimg src=\"images/picture.jpg\"\u003e` | The \"picture.jpg\" file is located in the images folder in the current folder. |\r\n| `\u003cimg src=\"/images/picture.jpg\"\u003e` | The \"picture.jpg\" file is located in the images folder at the root of the current web. |\r\n| `\u003cimg src=\"../picture.jpg\"\u003e` | The \"picture.jpg\" file is located in the folder one level up from the current folder. |\r\n\r\n#### HTML File Paths\r\n\r\nA file path describes the location of a file in a web site's folder structure.\r\n\r\nFile paths are used when linking to external files, like:\r\n\r\n- Web pages\r\n- Images\r\n- Style sheets\r\n- JavaScripts\r\n\r\n##### Absolute File Paths\r\n\r\nAn absolute file path is the full URL to a file:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cimg src=\"https://www.nemonet.com/images/picture.jpg\" alt=\"Mountain\"\u003e\r\n```\r\n\r\nThe `\u003cimg\u003e` tag is explained in the chapter: HTML Images.\r\n\r\n##### Relative File Paths\r\n\r\nA relative file path points to a file relative to the current page.\r\n\r\nIn the following example, the file path points to a file in the images folder located at the root of the current web:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cimg src=\"/images/picture.jpg\" alt=\"Mountain\"\u003e\r\n```\r\n\r\nIn the following example, the file path points to a file in the images folder located in the current folder:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cimg src=\"images/picture.jpg\" alt=\"Mountain\"\u003e\r\n```\r\n\r\nIn the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003cimg src=\"../images/picture.jpg\" alt=\"Mountain\"\u003e\r\n```\r\n\r\n#### Best Practice\r\n\r\nIt is best practice to use relative file paths (if possible).\r\n\r\nWhen using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.\r\n\r\n\r\n---\r\n\r\n\r\n### HTML - The Head Element [⬆️](#table-of-contents)\r\n\r\n#### The HTML `\u003chead\u003e` Element\r\n\r\nThe HTML `\u003chead\u003e` element is a container for the following elements: `\u003ctitle\u003e`, `\u003cstyle\u003e`, `\u003cmeta\u003e`, `\u003clink\u003e`, `\u003cscript\u003e`, and `\u003cbase\u003e`.\r\n\r\nThe `\u003chead\u003e` element is a container for metadata (data about data) and is placed between the `\u003chtml\u003e` tag and the `\u003cbody\u003e` tag.\r\n\r\nHTML metadata is data about the HTML document. Metadata is not displayed.\r\n\r\nMetadata typically define the document title, character set, styles, scripts, and other meta information.\r\n\r\n#### The HTML `\u003ctitle\u003e` Element\r\n\r\nThe `\u003ctitle\u003e` element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.\r\n\r\nThe `\u003ctitle\u003e` element is required in HTML documents!\r\n\r\nThe content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.\r\n\r\nThe `\u003ctitle\u003e` element:\r\n- Defines a title in the browser toolbar\r\n- Provides a title for the page when it is added to favorites\r\n- Displays a title for the page in search engine results\r\n\r\nSo, try to make the title as accurate and meaningful as possible!\r\n\r\n##### A Simple HTML Document:\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n \u003ctitle\u003eA Meaningful Page Title\u003c/title\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\nThe content of the document......\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n#### The HTML `\u003cstyle\u003e` Element\r\n\r\nThe `\u003cstyle\u003e` element is used to define style information for a single HTML page:\r\n\r\n```html\r\n\u003cstyle\u003e\r\n body {background-color: powderblue;}\r\n h1 {color: red;}\r\n p {color: blue;}\r\n\u003c/style\u003e\r\n```\r\n\r\n#### The HTML `\u003clink\u003e` Element\r\n\r\nThe `\u003clink\u003e` element defines the relationship between the current document and an external resource.\r\n\r\nThe `\u003clink\u003e` tag is most often used to link to external style sheets:\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"mystyle.css\"\u003e\r\n```\r\n\r\n**Tip:** To learn all about CSS, visit our CSS Tutorial.\r\n\r\n#### The HTML `\u003cmeta\u003e` Element\r\n\r\nThe `\u003cmeta\u003e` element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.\r\n\r\nThe metadata will not be displayed on the page but is used by browsers (how to display content or reload the page), search engines (keywords), and other web services.\r\n\r\n##### Examples:\r\n\r\n- Define the character set used:\r\n ```html\r\n \u003cmeta charset=\"UTF-8\"\u003e\r\n ```\r\n- Define keywords for search engines:\r\n ```html\r\n \u003cmeta name=\"keywords\" content=\"HTML, CSS, JavaScript\"\u003e\r\n ```\r\n- Define a description of your web page:\r\n ```html\r\n \u003cmeta name=\"description\" content=\"Free Web tutorials\"\u003e\r\n ```\r\n- Define the author of a page:\r\n ```html\r\n \u003cmeta name=\"author\" content=\"John Doe\"\u003e\r\n ```\r\n- Refresh document every 30 seconds:\r\n ```html\r\n \u003cmeta http-equiv=\"refresh\" content=\"30\"\u003e\r\n ```\r\n- Setting the viewport to make your website look good on all devices:\r\n ```html\r\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\r\n ```\r\n\r\n##### Example of `\u003cmeta\u003e` Tags:\r\n\r\n```html\r\n\u003cmeta charset=\"UTF-8\"\u003e\r\n\u003cmeta name=\"description\" content=\"Free Web tutorials\"\u003e\r\n\u003cmeta name=\"keywords\" content=\"HTML, CSS, JavaScript\"\u003e\r\n\u003cmeta name=\"author\" content=\"John Doe\"\u003e\r\n```\r\n\r\n#### Setting The Viewport\r\n\r\nThe viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.\r\n\r\nYou should include the following `\u003cmeta\u003e` element in all your web pages:\r\n\r\n```html\r\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\r\n```\r\n\r\nThis gives the browser instructions on how to control the page's dimensions and scaling.\r\n\r\nThe `width=device-width` part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).\r\n\r\nThe `initial-scale=1.0` part sets the initial zoom level when the page is first loaded by the browser.\r\n\r\n##### Example of Viewport Meta Tag:\r\n\r\n**Tip:** If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.\r\n\r\n- Without the viewport meta tag\r\n- With the viewport meta tag\r\n\r\n#### The HTML `\u003cscript\u003e` Element\r\n\r\nThe `\u003cscript\u003e` element is used to define client-side JavaScripts.\r\n\r\nThe following JavaScript writes \"Hello JavaScript!\" into an HTML element with id=\"demo\":\r\n\r\n```html\r\n\u003cscript\u003e\r\nfunction myFunction() {\r\n document.getElementById(\"demo\").innerHTML = \"Hello JavaScript!\";\r\n}\r\n\u003c/script\u003e\r\n```\r\n\r\n**Tip:** To learn all about JavaScript, visit our JavaScript Tutorial.\r\n\r\n#### The HTML `\u003cbase\u003e` Element\r\n\r\nThe `\u003cbase\u003e` element specifies the base URL and/or target for all relative URLs in a page.\r\n\r\nThe `\u003cbase\u003e` tag must have either an `href` or a `target` attribute present, or both.\r\n\r\nThere can only be one single `\u003cbase\u003e` element in a document!\r\n\r\n##### Example:\r\n\r\nSpecify a default URL and a default target for all links on a page:\r\n\r\n```html\r\n\u003chead\u003e\r\n \u003cbase href=\"https://www.nemonet.com/\" target=\"_blank\"\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n \u003cimg src=\"images/stickman.gif\" width=\"24\" height=\"39\" alt=\"Stickman\"\u003e\r\n \u003ca href=\"tags/tag_base.asp\"\u003eHTML base Tag\u003c/a\u003e\r\n\u003c/body\u003e\r\n```\r\n\r\n#### Chapter Summary\r\n\r\n- The `\u003chead\u003e` element is a container for metadata (data about data)\r\n- The `\u003chead\u003e` element is placed between the `\u003chtml\u003e` tag and the `\u003cbody\u003e` tag\r\n- The `\u003ctitle\u003e` element is required and it defines the title of the document\r\n- The `\u003cstyle\u003e` element is used to define style information for a single document\r\n- The `\u003clink\u003e` tag is most often used to link to external style sheets\r\n- The `\u003cmeta\u003e` element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings\r\n- The `\u003cscript\u003e` element is used to define client-side JavaScripts\r\n- The `\u003cbase\u003e` element specifies the base URL and/or target for all relative URLs in a page\r\n\r\n#### HTML Head Elements\r\n\r\n| Tag | Description |\r\n|----------|----------------------------------------------------|\r\n| `\u003chead\u003e` | Defines information about the document |\r\n| `\u003ctitle\u003e`| Defines the title of a document |\r\n| `\u003cbase\u003e` | Defines a default address or a default target for all links on a page |\r\n| `\u003clink\u003e` | Defines the relationship between a document and an external resource |\r\n| `\u003cmeta\u003e` | Defines metadata about an HTML document |\r\n| `\u003cscript\u003e`| Defines a client-side script |\r\n| `\u003cstyle\u003e` | Defines style information for a document |\r\n\r\n\r\n---\r\n\r\n\r\n### HTML Layout Elements and Techniques [⬆️](#table-of-contents)\r\n\r\nWebsites often display content in multiple columns (like a magazine or a newspaper).\r\n\r\n#### Example\r\n\r\n\u003cimg src=\"./Images/pro/nn.jpg\" style=\"height: 350px; width: auto;\" alt=\"Description of image\"\u003e\r\n\r\n\r\n#### HTML Layout Elements\r\n\r\nHTML has several semantic elements that define the different parts of a web page:\r\n\r\n##### HTML5 Semantic Elements\r\n\r\n\u003cimg src=\"./Images/pro/nn2.jpg\" style=\"height: 300px; width: auto;\" alt=\"Description of image\"\u003e\r\n\r\n- `\u003cheader\u003e` - Defines a header for a document or a section\r\n- `\u003cnav\u003e` - Defines a set of navigation links\r\n- `\u003csection\u003e` - Defines a section in a document\r\n- `\u003carticle\u003e` - Defines an independent, self-contained content\r\n- `\u003caside\u003e` - Defines content aside from the content (like a sidebar)\r\n- `\u003cfooter\u003e` - Defines a footer for a document or a section\r\n- `\u003cdetails\u003e` - Defines additional details that the user can open and close on demand\r\n- `\u003csummary\u003e` - Defines a heading for the `\u003cdetails\u003e` element\r\n\r\nYou can read more about semantic elements in our HTML Semantics chapter.\r\n\r\n#### HTML Layout Techniques\r\n\r\nThere are four different techniques to create multicolumn layouts. Each technique has its pros and cons:\r\n\r\n- CSS framework\r\n- CSS float property\r\n- CSS flexbox\r\n- CSS grid\r\n\r\n##### CSS Frameworks\r\n\r\nIf you want to create your layout fast, you can use a CSS framework, like Tailwind or Bootstrap.\r\n\r\nEver heard about TYP Coding Class Spaces? Here you can create your website from scratch or use a template, and host it for free.\r\n\r\n*No credit card required*\r\n*100% FREE*\r\n\r\n##### CSS Float Layout\r\n\r\nIt is common to do entire web layouts using the CSS float property. \r\n\r\nFloat is easy to learn - you just need to remember how the float and clear properties work. \r\n\r\n**Disadvantages:** Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our [CSS Float](#) and Clear chapter.\r\n\r\n**Example**\r\n\r\n\u003cimg src=\"./Images/pro/nn3.jpg\" style=\"height: 350px; width: auto;\" alt=\"Description of image\"\u003e\r\n\r\n### CSS Flexbox Layout\r\n\r\nUse of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.\r\n\r\nLearn more about flexbox in our [CSS Flexbox]() chapter.\r\n\r\n**Example**\r\n\r\n\u003cimg src=\"./Images/pro/nn4.jpg\" style=\"height: 350px; width: auto;\" alt=\"Description of image\"\u003e\r\n\r\n### CSS Grid Layout\r\n\r\nThe CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.\r\n\r\nLearn more about CSS grids in our [CSS Grid]() Intro chapter.\r\n\r\n\r\n---\r\n\r\n\r\n### HTML Responsive Web Design [⬆️](#table-of-contents)\r\n\r\nResponsive web design is about creating web pages that look good on all devices!\r\n\r\nA responsive web design will automatically adjust for different screen sizes and viewports.\r\n\r\n#### What is Responsive Web Design?\r\n\r\nResponsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a website, to make it look good on all devices (desktops, tablets, and phones).\r\n\r\n##### Setting The Viewport\r\n\r\nTo create a responsive website, add the following `\u003cmeta\u003e` tag to all your web pages:\r\n\r\n```html\r\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\r\n```\r\n\r\nThis will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.\r\n\r\nHere is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:\r\n\r\n- Without the viewport meta tag:\r\n- With the viewport meta tag:\r\n\r\n**Tip:** If you are browsing this page on a phone or a tablet, you can click on the two links above to see the difference.\r\n\r\n##### Responsive Images\r\n\r\nResponsive images are images that scale nicely to fit any browser size.\r\n\r\n##### Using the width Property\r\n\r\nIf the CSS width property is set to 100%, the image will be responsive and scale up and down:\r\n\r\n```html\r\n\u003cimg src=\"img_girl.jpg\" style=\"width:100%;\"\u003e\r\n```\r\n\r\n\r\n##### Using the max-width Property\r\n\r\nIf the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:\r\n\r\n```html\r\n\u003cimg src=\"img_girl.jpg\" style=\"max-width:100%;height:auto;\"\u003e\r\n```\r\n\r\n##### Show Different Images Depending on Browser Width\r\n\r\nThe HTML `\u003cpicture\u003e` element allows you to define different images for different browser window sizes.\r\n\r\nResize the browser window to see how the image below changes depending on the width:\r\n\r\n```html\r\n\u003cpicture\u003e\r\n \u003csource srcset=\"img_smallflower.jpg\" media=\"(max-width: 600px)\"\u003e\r\n \u003csource srcset=\"img_flowers.jpg\" media=\"(max-width: 1500px)\"\u003e\r\n \u003csource srcset=\"flowers.jpg\"\u003e\r\n \u003cimg src=\"img_smallflower.jpg\" alt=\"Flowers\"\u003e\r\n\u003c/picture\u003e\r\n```\r\n\r\n#### Responsive Text Size\r\n\r\nThe text size can be set with a \"vw\" unit, which means the \"viewport width\". That way the text size will follow the size of the browser window:\r\n\r\n```html\r\n\u003ch1 style=\"font-size:10vw\"\u003eHello World\u003c/h1\u003e\r\n```\r\n\r\nViewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.\r\n\r\n### Media Queries\r\n\r\nIn addition to resizing text and images, it is also common to use media queries in responsive web pages. With media queries, you can define completely different styles for different browser sizes.\r\n\r\n**Example:** Resize the browser window to see that the three div elements below will display horizontally on large screens and stack vertically on small screens:\r\n\r\n```html\r\n\u003cstyle\u003e\r\n.left, .right {\r\n float: left;\r\n width: 20%; /* The width is 20%, by default */\r\n}\r\n\r\n.main {\r\n float: left;\r\n width: 60%; /* The width is 60%, by default */\r\n}\r\n\r\n/* Use a media query to add a breakpoint at 800px: */\r\n@media screen and (max-width: 800px) {\r\n .left, .main, .right {\r\n width: 100%; /* The width is 100%, when the viewport is 800px or smaller */\r\n }\r\n}\r\n\u003c/style\u003e\r\n```\r\n\r\n**Tip:** To learn more about Media Queries and Responsive Web Design, go to our [Responsive Web Design Tutorial]().\r\n\r\n\r\n#### Responsive Web Page - Full Example\r\n\r\nA responsive web page should look good on large desktop screens and on small mobile phones.\r\n\r\nEver heard about TYP Coding Class Spaces? Here you can create your website from scratch or use a template, and host it for free.\r\n\r\n *No credit card required*\r\n *100% FREE*\r\n\r\n#### Responsive Web Design - Frameworks\r\n\r\nAll popular CSS Frameworks offer responsive design. They are free and easy to use.\r\n\r\n##### Tailwind\r\n\r\nTailwind is a modern CSS framework with support for desktop, tablet, and mobile design by default. It is smaller and faster than similar CSS frameworks and designed to be independent of jQuery or any other JavaScript library.\r\n\r\n**Tailwind Demo**\r\n\r\nResize the page to see the responsiveness!\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml lang=\"en\"\u003e\r\n\u003chead\u003e\r\n \u003cmeta charset=\"UTF-8\"\u003e\r\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\r\n \u003ctitle\u003eTailwind CSS Example\u003c/title\u003e\r\n \u003clink href=\"https://cdn.jsdelivr.net/npm/tailwindcss@3.3.2/dist/tailwind.min.css\" rel=\"stylesheet\"\u003e\r\n\u003c/head\u003e\r\n\u003cbody class=\"bg-gray-100 text-gray-900\"\u003e\r\n\r\n \u003cdiv class=\"bg-green-500 text-white text-center py-4\"\u003e\r\n \u003ch1 class=\"text-3xl font-bold\"\u003eTailwind CSS Demo\u003c/h1\u003e\r\n \u003cp class=\"mt-2\"\u003eResize this responsive page!\u003c/p\u003e\r\n \u003c/div\u003e\r\n\r\n \u003cdiv class=\"max-w-4xl mx-auto px-4 py-6\"\u003e\r\n \u003cdiv class=\"grid grid-cols-1 md:grid-cols-3 gap-4\"\u003e\r\n \u003cdiv class=\"bg-white p-4 shadow-lg rounded-lg\"\u003e\r\n \u003ch2 class=\"text-2xl font-semibold\"\u003eLondon\u003c/h2\u003e\r\n \u003cp class=\"mt-2\"\u003eLondon is the capital city of England.\u003c/p\u003e\r\n \u003cp class=\"mt-2\"\u003eIt is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.\u003c/p\u003e\r\n \u003c/div\u003e\r\n\r\n \u003cdiv class=\"bg-white p-4 shadow-lg rounded-lg\"\u003e\r\n \u003ch2 class=\"text-2xl font-semibold\"\u003eParis\u003c/h2\u003e\r\n \u003cp class=\"mt-2\"\u003eParis is the capital of France.\u003c/p\u003e\r\n \u003cp class=\"mt-2\"\u003eThe Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.\u003c/p\u003e\r\n \u003c/div\u003e\r\n\r\n \u003cdiv class=\"bg-white p-4 shadow-lg rounded-lg\"\u003e\r\n \u003ch2 class=\"text-2xl font-semibold\"\u003eTokyo\u003c/h2\u003e\r\n \u003cp class=\"mt-2\"\u003eTokyo is the capital of Japan.\u003c/p\u003e\r\n \u003cp class=\"mt-2\"\u003eIt is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.\u003c/p\u003e\r\n \u003c/div\u003e\r\n \u003c/div\u003e\r\n \u003c/div\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n\r\n```\r\n\r\nTo learn more about Tailwind, read our [Tailwind Tutorial]() which is coming soon.\r\n\r\n##### Bootstrap\r\n\r\nAnother popular CSS framework is Bootstrap:\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml lang=\"en\"\u003e\r\n\u003chead\u003e\r\n\u003ctitle\u003eBootstrap 5 Example\u003c/title\u003e\r\n\u003cmeta charset=\"utf-8\"\u003e\r\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\r\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\n\u003cdiv class=\"container-fluid p-5 bg-primary text-white text-center\"\u003e\r\n \u003ch1\u003eMy First Bootstrap Page\u003c/h1\u003e\r\n \u003cp\u003eResize this responsive page to see the effect!\u003c/p\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv class=\"container mt-5\"\u003e\r\n \u003cdiv class=\"row\"\u003e\r\n \u003cdiv class=\"col-sm-4\"\u003e\r\n \u003ch3\u003eColumn 1\u003c/h3\u003e\r\n \u003cp\u003eLorem ipsum...\u003c/p\u003e\r\n \u003c/div\u003e\r\n \u003cdiv class=\"col-sm-4\"\u003e\r\n \u003ch3\u003eColumn 2\u003c/h3\u003e\r\n \u003cp\u003eLorem ipsum...\u003c/p\u003e\r\n \u003c/div\u003e\r\n \u003cdiv class=\"col-sm-4\"\u003e\r\n \u003ch3\u003eColumn 3\u003c/h3\u003e\r\n \u003cp\u003eLorem ipsum...\u003c/p\u003e\r\n \u003c/div\u003e\r\n \u003c/div\u003e\r\n\u003c/div\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\nTo learn more about Bootstrap, go to our [Bootstrap Tutorial]() Which is coming soon.\r\n\r\n\r\n---\r\n\r\n### HTML Computer Code Elements [⬆️](#table-of-contents)\r\n\r\nHTML contains several elements for defining user input and computer code.\r\n\r\n#### Example\r\n\r\n```html\r\n\u003ccode\u003e\r\nx = 5;\r\ny = 6;\r\nz = x + y;\r\n\u003c/code\u003e\r\n```\r\n\r\n#### HTML `\u003ckbd\u003e` For Keyboard Input\r\n\r\nThe HTML `\u003ckbd\u003e` element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.\r\n\r\n##### Example\r\n\r\nDefine some text as keyboard input in a document:\r\n\r\n```html\r\n\u003cp\u003eSave the document by pressing \u003ckbd\u003eCtrl + S\u003c/kbd\u003e\u003c/p\u003e\r\n```\r\n\r\n##### Result\r\n\r\nSave the document by pressing Ctrl + S\r\n\r\n#### HTML `\u003csamp\u003e` For Program Output\r\n\r\nThe HTML `\u003csamp\u003e` element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.\r\n\r\n##### Example\r\n\r\nDefine some text as sample output from a computer program in a document:\r\n\r\n```html\r\n\u003cp\u003eMessage from my computer:\u003c/p\u003e\r\n\u003cp\u003e\u003csamp\u003eFile not found.\u003cbr\u003ePress F1 to continue\u003c/samp\u003e\u003c/p\u003e\r\n```\r\n\r\n##### Result\r\n\r\nMessage from my computer:\r\n\r\nFile not found. \r\nPress F1 to continue\r\n\r\n#### HTML `\u003ccode\u003e` For Computer Code\r\n\r\nThe HTML `\u003ccode\u003e` element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.\r\n\r\n##### Example\r\n\r\nDefine some text as computer code in a document:\r\n\r\n```html\r\n\u003ccode\u003e\r\nx = 5;\r\ny = 6;\r\nz = x + y;\r\n\u003c/code\u003e\r\n```\r\n\r\n##### Result\r\n\r\nx = 5; \r\ny = 6; \r\nz = x + y;\r\n\r\nNotice that the `\u003ccode\u003e` element does not preserve extra whitespace and line-breaks.\r\n\r\nTo fix this, you can put the `\u003ccode\u003e` element inside a `\u003cpre\u003e` element:\r\n\r\n##### Example\r\n\r\n```html\r\n\u003cpre\u003e\r\n\u003ccode\u003e\r\nx = 5;\r\ny = 6;\r\nz = x + y;\r\n\u003c/code\u003e\r\n\u003c/pre\u003e\r\n```\r\n\r\n##### Result\r\n\r\nx = 5; \r\ny = 6; \r\nz = x + y;\r\n\r\n#### HTML `\u003cvar\u003e` For Variables\r\n\r\nThe HTML `\u003cvar\u003e` element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.\r\n\r\n##### Example\r\n\r\nDefine some text as variables in a document:\r\n\r\n```html\r\n\u003cp\u003eThe area of a triangle is: 1/2 x \u003cvar\u003eb\u003c/var\u003e x \u003cvar\u003eh\u003c/var\u003e, where \u003cvar\u003eb\u003c/var\u003e is the base, and \u003cvar\u003eh\u003c/var\u003e is the vertical height.\u003c/p\u003e\r\n```\r\n\r\n##### Result\r\n\r\nThe area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.\r\n\r\n#### Chapter Summary\r\n\r\n- The `\u003ckbd\u003e` element defines keyboard input\r\n- The `\u003csamp\u003e` element defines sample output from a computer program\r\n- The `\u003ccode\u003e` element defines a piece of computer code\r\n- The `\u003cvar\u003e` element defines a variable in programming or in a mathematical expression\r\n- The `\u003cpre\u003e` element defines preformatted text\r\n\r\n\r\n---\r\n\r\n### HTML Semantic Elements [⬆️](#table-of-contents)\r\n\r\n**Semantic elements** = elements with a meaning.\r\n\r\n#### What are Semantic Elements?\r\n\r\nA semantic element clearly describes its meaning to both the browser and the developer.\r\n\r\n**Examples of non-semantic elements:** `\u003cdiv\u003e` and `\u003cspan\u003e` - Tells nothing about its content.\r\n\r\n**Examples of semantic elements:** `\u003cform\u003e`, `\u003ctable\u003e`, and `\u003carticle\u003e` - Clearly defines its content.\r\n\r\n#### Semantic Elements in HTML\r\n\r\nMany websites contain HTML code like:\r\n\r\n```html\r\n\u003cdiv id=\"nav\"\u003e\r\n \u003cdiv class=\"header\"\u003e\r\n \u003cdiv id=\"footer\"\u003e\r\n```\r\n\r\nto indicate navigation, header, and footer.\r\n\r\nIn HTML, there are some semantic elements that can be used to define different parts of a web page:\r\n\r\n- `\u003carticle\u003e`\r\n- `\u003caside\u003e`\r\n- `\u003cdetails\u003e`\r\n- `\u003cfigcaption\u003e`\r\n- `\u003cfigure\u003e`\r\n- `\u003cfooter\u003e`\r\n- `\u003cheader\u003e`\r\n- `\u003cmain\u003e`\r\n- `\u003cmark\u003e`\r\n- `\u003cnav\u003e`\r\n- `\u003csection\u003e`\r\n- `\u003csummary\u003e`\r\n- `\u003ctime\u003e`\r\n\r\n#### HTML `\u003csection\u003e` Element\r\n\r\nThe `\u003csection\u003e` element defines a section in a document.\r\n\r\nAccording to W3C's HTML documentation: *\"A section is a thematic grouping of content, typically with a heading.\"*\r\n\r\n**Examples of where a `\u003csection\u003e` element can be used:**\r\n\r\n- Chapters\r\n- Introduction\r\n- News items\r\n- Contact information\r\n\r\nA web page could normally be split into sections for introduction, content, and contact information.\r\n\r\n##### Example\r\n\r\nTwo sections in a document:\r\n\r\n```html\r\n\u003csection\u003e\r\n \u003ch1\u003eWWF\u003c/h1\u003e\r\n \u003cp\u003eThe World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.\u003c/p\u003e\r\n\u003c/section\u003e\r\n\r\n\u003csection\u003e\r\n \u003ch1\u003eWWF's Panda symbol\u003c/h1\u003e\r\n \u003cp\u003eThe Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.\u003c/p\u003e\r\n\u003c/section\u003e\r\n```\r\n\r\n#### HTML `\u003carticle\u003e` Element\r\n\r\nThe `\u003carticle\u003e` element specifies independent, self-contained content.\r\n\r\nAn article should make sense on its own, and it should be possible to distribute it independently from the rest of the website.\r\n\r\n**Examples of where the `\u003carticle\u003e` element can be used:**\r\n\r\n- Forum posts\r\n- Blog posts\r\n- User comments\r\n- Product cards\r\n- Newspaper articles\r\n\r\n##### Example\r\n\r\nThree articles with independent, self-contained content:\r\n\r\n```html\r\n\u003carticle\u003e\r\n \u003ch2\u003eGoogle Chrome\u003c/h2\u003e\r\n \u003cp\u003eGoogle Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!\u003c/p\u003e\r\n\u003c/article\u003e\r\n\r\n\u003carticle\u003e\r\n \u003ch2\u003eMozilla Firefox\u003c/h2\u003e\r\n \u003cp\u003eMozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.\u003c/p\u003e\r\n\u003c/article\u003e\r\n\r\n\u003carticle\u003e\r\n \u003ch2\u003eMicrosoft Edge\u003c/h2\u003e\r\n \u003cp\u003eMicrosoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.\u003c/p\u003e\r\n\u003c/article\u003e\r\n```\r\n\r\n##### Example 2\r\n\r\nUse CSS to style the `\u003carticle\u003e` element:\r\n\r\n```html\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n\u003cstyle\u003e\r\n.all-browsers {\r\n margin: 0;\r\n padding: 5px;\r\n background-color: lightgray;\r\n}\r\n\r\n.all-browsers \u003e h1, .browser {\r\n margin: 10px;\r\n padding: 5px;\r\n}\r\n\r\n.browser {\r\n background: white;\r\n}\r\n\r\n.browser \u003e h2, p {\r\n margin: 4px;\r\n font-size: 90%;\r\n}\r\n\u003c/style\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\n\u003carticle class=\"all-browsers\"\u003e\r\n \u003ch1\u003eMost Popular Browsers\u003c/h1\u003e\r\n \u003carticle class=\"browser\"\u003e\r\n \u003ch2\u003eGoogle Chrome\u003c/h2\u003e\r\n \u003cp\u003eGoogle Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!\u003c/p\u003e\r\n \u003c/article\u003e\r\n \u003carticle class=\"browser\"\u003e\r\n \u003ch2\u003eMozilla Firefox\u003c/h2\u003e\r\n \u003cp\u003eMozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.\u003c/p\u003e\r\n \u003c/article\u003e\r\n \u003carticle class=\"browser\"\u003e\r\n \u003ch2\u003eMicrosoft Edge\u003c/h2\u003e\r\n \u003cp\u003eMicrosoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.\u003c/p\u003e\r\n \u003c/article\u003e\r\n\u003c/article\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n#### Nesting `\u003carticle\u003e` in `\u003csection\u003e` or Vice Versa?\r\n\r\nThe `\u003carticle\u003e` element specifies independent, self-contained content.\r\n\r\nThe `\u003csection\u003e` element defines a section in a document.\r\n\r\nCan we use the definitions to decide how to nest those elements? No, we cannot!\r\n\r\nSo, you will find HTML pages with `\u003csection\u003e` elements containing `\u003carticle\u003e` elements, and `\u003carticle\u003e` elements containing `\u003csection\u003e` elements.\r\n\r\n#### HTML `\u003cheader\u003e` Element\r\n\r\nThe `\u003cheader\u003e` element represents a container for introductory content or a set of navigational links.\r\n\r\nA `\u003cheader\u003e` element typically contains:\r\n\r\n- One or more heading elements (`\u003ch1\u003e` - `\u003ch6\u003e`)\r\n- Logo or icon\r\n- Authorship information\r\n\r\n**Note:** You can have several `\u003cheader\u003e` elements in one HTML document. However, `\u003cheader\u003e` cannot be placed within a `\u003cfooter\u003e`, `\u003caddress\u003e`, or another `\u003cheader\u003e` element.\r\n\r\n##### Example\r\n\r\nA header for an `\u003carticle\u003e`:\r\n\r\n```html\r\n\u003carticle\u003e\r\n \u003cheader\u003e\r\n \u003ch1\u003eWhat Does WWF Do?\u003c/h1\u003e\r\n \u003cp\u003eWWF's mission:\u003c/p\u003e\r\n \u003c/header\u003e\r\n \u003cp\u003eWWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.\u003c/p\u003e\r\n\u003c/article\u003e\r\n```\r\n\r\n#### HTML `\u003cfooter\u003e` Element\r\n\r\nThe `\u003cfooter\u003e` element defines a footer for a document or section.\r\n\r\nA `\u003cfooter\u003e` element typically contains:\r\n\r\n- Authorship information\r\n- Copyright information\r\n- Contact information\r\n- Sitemap\r\n- Back to top links\r\n- Related documents\r\n\r\nYou can have several `\u003cfooter\u003e` elements in one document.\r\n\r\n##### Example\r\n\r\nA footer section in a document:\r\n\r\n```html\r\n\u003cfooter\u003e\r\n \u003cp\u003eAuthor: Hege Refsnes\u003c/p\u003e\r\n \u003cp\u003e\u003ca href=\"mailto:hege@example.com\"\u003ehege@example.com\u003c/a\u003e\u003c/p\u003e\r\n\u003c/footer\u003e\r\n```\r\n\r\n#### HTML `\u003cnav\u003e` Element\r\n\r\nThe `\u003cnav\u003e` element defines a set of navigation links.\r\n\r\nNotice that NOT all links of a document should be inside a `\u003cnav\u003e` element. The `\u003cnav\u003e` element is intended only for major blocks of navigation links.\r\n\r\nBrowsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.\r\n\r\n##### Example\r\n\r\nA set of navigation links:\r\n\r\n```html\r\n\u003cnav\u003e\r\n \u003ca href=\"/html/\"\u003eHTML\u003c/a\u003e |\r\n \u003ca href=\"/css/\"\u003eCSS\u003c/a\u003e |\r\n \u003ca href=\"/js/\"\u003eJavaScript\u003c/a\u003e |\r\n \u003ca href=\"/jquery/\"\u003ejQuery\u003c/a\u003e\r\n\u003c/nav\u003e\r\n```\r\n\r\n#### HTML `\u003caside\u003e` Element\r\n\r\nThe `\u003caside\u003e` element defines some content aside from the content it is placed in (like a sidebar).\r\n\r\nThe `\u003caside\u003e` content should be indirectly related to the surrounding content.\r\n\r\n##### Example\r\n\r\nDisplay some content aside from the content it is placed in:\r\n\r\n```html\r\n\u003cp\u003eMy family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!\u003c/p\u003e\r\n\r\n\u003caside\u003e\r\n \u003ch4\u003eEpcot Center\u003c/h4\u003e\r\n \u003cp\u003eEpcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.\u003c/p\u003e\r\n\u003c/aside\u003e\r\n```\r\n\r\n##### Example 2\r\n\r\nUse CSS to style the `\u003caside\u003e` element:\r\n\r\n```html\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n\u003cstyle\u003e\r\naside {\r\n width: 30%;\r\n padding-left: 15px;\r\n margin-left: 15px;\r\n float: right;\r\n font-style: italic;\r\n background-color: lightgray;\r\n}\r\n\u003c/style\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\n\u003cp\u003eMy family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!\u003c/p\u003e\r\n\r\n\u003caside\u003e\r\n \u003cp\u003eThe Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.\u003c/p\u003e\r\n\u003c/aside\u003e\r\n\r\n\u003cp\u003eMy family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!\u003c/p\u003e\r\n\u003cp\u003eMy family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n#### HTML `\u003cfigure\u003e` and `\u003cfigcaption\u003e` Elements\r\n\r\nThe `\u003cfigure\u003e` tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.\r\n\r\nThe `\u003cfigcaption\u003e` tag defines a caption for a `\u003cfigure\u003e` element. The `\u003cfigcaption\u003e` element can be placed as the first or as the last child of a `\u003cfigure\u003e` element.\r\n\r\nThe `\u003cimg\u003e` element defines the actual image/illustration.\r\n\r\n##### Example\r\n\r\n```html\r\n\u003cfigure\u003e\r\n \u003cimg src=\"pic_trulli.jpg\"\r\n\r\n alt=\"Trulli\"\u003e\r\n \u003cfigcaption\u003eFig1. - Trulli, Puglia, Italy.\u003c/figcaption\u003e\r\n\u003c/figure\u003e\r\n```\r\n\r\n#### Why Semantic Elements?\r\n\r\nAccording to the W3C: *\"A semantic Web allows data to be shared and reused across applications, enterprises, and communities.\"*\r\n\r\n#### Semantic Elements in HTML\r\n\r\nBelow is a list of some of the semantic elements in HTML.\r\n\r\n| Tag | Description |\r\n|---------------|-----------------------------------------------------|\r\n| `\u003carticle\u003e` | Defines independent, self-contained content |\r\n| `\u003caside\u003e` | Defines content aside from the page content |\r\n| `\u003cdetails\u003e` | Defines additional details that the user can view or hide |\r\n| `\u003cfigcaption\u003e`| Defines a caption for a `\u003cfigure\u003e` element |\r\n| `\u003cfigure\u003e` | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |\r\n| `\u003cfooter\u003e` | Defines a footer for a document or section |\r\n| `\u003cheader\u003e` | Specifies a header for a document or section |\r\n| `\u003cmain\u003e` | Specifies the main content of a document |\r\n| `\u003cmark\u003e` | Defines marked/highlighted text |\r\n| `\u003cnav\u003e` | Defines navigation links |\r\n| `\u003csection\u003e` | Defines a section in a document |\r\n| `\u003csummary\u003e` | Defines a visible heading for a `\u003cdetails\u003e` element |\r\n| `\u003ctime\u003e` | Defines a date/time |\r\n\r\n\r\n---\r\n\r\n### HTML Style Guide [⬆️](#table-of-contents)\r\n\r\nA consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.\r\n\r\n#### Always Declare Document Type\r\n\r\nAlways declare the document type as the first line in your document.\r\n\r\nThe correct document type for HTML is:\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n```\r\n\r\n#### Use Lowercase Element Names\r\n\r\nHTML allows mixing uppercase and lowercase letters in element names. However, we recommend using lowercase element names because:\r\n\r\n- Mixing uppercase and lowercase names looks bad\r\n- Developers normally use lowercase names\r\n- Lowercase looks cleaner\r\n- Lowercase is easier to write\r\n\r\n**Good:**\r\n```html\r\n\u003cbody\u003e\r\n \u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\u003c/body\u003e\r\n```\r\n\r\n**Bad:**\r\n```html\r\n\u003cBODY\u003e\r\n \u003cP\u003eThis is a paragraph.\u003c/P\u003e\r\n\u003c/BODY\u003e\r\n```\r\n\r\n#### Close All HTML Elements\r\n\r\nIn HTML, you do not have to close all elements (for example the `\u003cp\u003e` element). However, we strongly recommend closing all HTML elements.\r\n\r\n**Good:**\r\n```html\r\n\u003csection\u003e\r\n \u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n \u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\u003c/section\u003e\r\n```\r\n\r\n**Bad:**\r\n```html\r\n\u003csection\u003e\r\n \u003cp\u003eThis is a paragraph.\r\n \u003cp\u003eThis is a paragraph.\r\n\u003c/section\u003e\r\n```\r\n\r\n#### Use Lowercase Attribute Names\r\n\r\nHTML allows mixing uppercase and lowercase letters in attribute names. However, we recommend using lowercase attribute names because:\r\n\r\n- Mixing uppercase and lowercase names looks bad\r\n- Developers normally use lowercase names\r\n- Lowercase looks cleaner\r\n- Lowercase is easier to write\r\n\r\n**Good:**\r\n```html\r\n\u003ca href=\"https://www.nemonet.com/html/\"\u003eVisit our HTML tutorial\u003c/a\u003e\r\n```\r\n\r\n**Bad:**\r\n```html\r\n\u003ca HREF=\"https://www.nemonet.com/html/\"\u003eVisit our HTML tutorial\u003c/a\u003e\r\n```\r\n\r\n#### Always Quote Attribute Values\r\n\r\nHTML allows attribute values without quotes. However, we recommend quoting attribute values because:\r\n\r\n- Developers normally quote attribute values\r\n- Quoted values are easier to read\r\n- You MUST use quotes if the value contains spaces\r\n\r\n**Good:**\r\n```html\r\n\u003ctable class=\"striped\"\u003e\r\n```\r\n\r\n**Bad:**\r\n```html\r\n\u003ctable class=striped\u003e\r\n```\r\n\r\n**Very bad:**\r\n\r\nThis will not work, because the value contains spaces:\r\n```html\r\n\u003ctable class=table striped\u003e\r\n```\r\n\r\n#### Always Specify alt, width, and height for Images\r\n\r\nAlways specify the `alt` attribute for images. This attribute is important if the image cannot be displayed. Also, always define the width and height of images. This reduces flickering because the browser can reserve space for the image before loading.\r\n\r\n**Good:**\r\n```html\r\n\u003cimg src=\"html5.gif\" alt=\"HTML5\" style=\"width:128px;height:128px\"\u003e\r\n```\r\n\r\n**Bad:**\r\n```html\r\n\u003cimg src=\"html5.gif\"\u003e\r\n```\r\n\r\n#### Spaces and Equal Signs\r\n\r\nHTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.\r\n\r\n**Good:**\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\r\n```\r\n\r\n**Bad:**\r\n```html\r\n\u003clink rel = \"stylesheet\" href = \"styles.css\"\u003e\r\n```\r\n\r\n#### Avoid Long Code Lines\r\n\r\nWhen using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code. Try to avoid too long code lines.\r\n\r\n#### Blank Lines and Indentation\r\n\r\nDo not add blank lines, spaces, or indentations without a reason. For readability, add blank lines to separate large or logical code blocks. For readability, add two spaces of indentation. Do not use the tab key.\r\n\r\n**Good:**\r\n```html\r\n\u003cbody\u003e\r\n\r\n \u003ch1\u003eFamous Cities\u003c/h1\u003e\r\n\r\n \u003ch2\u003eTokyo\u003c/h2\u003e\r\n \u003cp\u003eTokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.\u003c/p\u003e\r\n\r\n \u003ch2\u003eLondon\u003c/h2\u003e\r\n \u003cp\u003eLondon is the capital city of England. It is the most populous city in the United Kingdom.\u003c/p\u003e\r\n\r\n \u003ch2\u003eParis\u003c/h2\u003e\r\n \u003cp\u003eParis is the capital of France. The Paris area is one of the largest population centers in Europe.\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n```\r\n\r\n**Bad:**\r\n```html\r\n\u003cbody\u003e\r\n \u003ch1\u003eFamous Cities\u003c/h1\u003e\r\n \u003ch2\u003eTokyo\u003c/h2\u003e\u003cp\u003eTokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.\u003c/p\u003e\r\n \u003ch2\u003eLondon\u003c/h2\u003e\u003cp\u003eLondon is the capital city of England. It is the most populous city in the United Kingdom.\u003c/p\u003e\r\n \u003ch2\u003eParis\u003c/h2\u003e\u003cp\u003eParis is the capital of France. The Paris area is one of the largest population centers in Europe.\u003c/p\u003e\r\n\u003c/body\u003e\r\n```\r\n\r\n**Good Table Example:**\r\n```html\r\n\u003ctable\u003e\r\n \u003ctr\u003e\r\n \u003cth\u003eName\u003c/th\u003e\r\n \u003cth\u003eDescription\u003c/th\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eA\u003c/td\u003e\r\n \u003ctd\u003eDescription of A\u003c/td\u003e\r\n \u003c/tr\u003e\r\n \u003ctr\u003e\r\n \u003ctd\u003eB\u003c/td\u003e\r\n \u003ctd\u003eDescription of B\u003c/td\u003e\r\n \u003c/tr\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n**Good List Example:**\r\n```html\r\n\u003cul\u003e\r\n \u003cli\u003eLondon\u003c/li\u003e\r\n \u003cli\u003eParis\u003c/li\u003e\r\n \u003cli\u003eTokyo\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n#### Never Skip the `\u003ctitle\u003e` Element\r\n\r\nThe `\u003ctitle\u003e` element is required in HTML. The contents of a page title are very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.\r\n\r\nThe `\u003ctitle\u003e` element:\r\n\r\n- Defines a title in the browser toolbar\r\n- Provides a title for the page when it is added to favorites\r\n- Displays a title for the page in search-engine results\r\n\r\nSo, try to make the title as accurate and meaningful as possible:\r\n```html\r\n\u003ctitle\u003eHTML Style Guide and Coding Conventions\u003c/title\u003e\r\n```\r\n\r\n#### Omitting `\u003chtml\u003e` and `\u003cbody\u003e`?\r\n\r\nAn HTML page will validate without the `\u003chtml\u003e` and `\u003cbody\u003e` tags:\r\n\r\n**Example:**\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chead\u003e\r\n \u003ctitle\u003ePage Title\u003c/title\u003e\r\n\u003c/head\u003e\r\n\r\n\u003ch1\u003eThis is a heading\u003c/h1\u003e\r\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n```\r\n\r\nHowever, we strongly recommend always adding the `\u003chtml\u003e` and `\u003cbody\u003e` tags! Omitting `\u003cbody\u003e` can produce errors in older browsers. Omitting `\u003chtml\u003e` and `\u003cbody\u003e` can also crash DOM and XML software.\r\n\r\n#### Omitting `\u003chead\u003e`?\r\n\r\nThe HTML `\u003chead\u003e` tag can also be omitted. Browsers will add all elements before `\u003cbody\u003e`, to a default `\u003chead\u003e` element.\r\n\r\n**Example:**\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003ctitle\u003ePage Title\u003c/title\u003e\r\n\u003cbody\u003e\r\n\r\n\u003ch1\u003eThis is a heading\u003c/h1\u003e\r\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\nHowever, we recommend using the `\u003chead\u003e` tag.\r\n\r\n#### Close Empty HTML Elements?\r\n\r\nIn HTML, it is optional to close empty elements.\r\n\r\n**Allowed:**\r\n```html\r\n\u003cmeta charset=\"utf-8\"\u003e\r\n```\r\n\r\n**Also Allowed:**\r\n```html\r\n\u003cmeta charset=\"utf-8\" /\u003e\r\n```\r\n\r\nIf you expect XML/XHTML software to access your page, keep the closing slash (`/`), because it is required in XML and XHTML.\r\n\r\n#### Add the `lang` Attribute\r\n\r\nYou should always include the `lang` attribute inside the `\u003chtml\u003e` tag to declare the language of the web page. This is meant to assist search engines and browsers.\r\n\r\n**Example:**\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml lang=\"en-us\"\u003e\r\n\u003chead\u003e\r\n \u003ctitle\u003ePage Title\u003c/title\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n\r\n\u003ch1\u003eThis is a heading\u003c/h1\u003e\r\n\u003cp\u003eThis is a paragraph.\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n#### Meta Data\r\n\r\nTo ensure proper interpretation and correct search engine indexing, both the language and the character encoding `\u003cmeta charset=\"charset\"\u003e` should be defined as early as possible in an HTML document:\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml lang=\"en-us\"\u003e\r\n\u003chead\u003e\r\n \u003cmeta charset=\"UTF-8\"\u003e\r\n \u003ctitle\u003ePage Title\u003c/title\u003e\r\n\u003c/head\u003e\r\n```\r\n\r\n#### Setting The Viewport\r\n\r\nThe viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen. You should include the following `\u003cmeta\u003e` element in all your web pages:\r\n\r\n```html\r\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\r\n```\r\n\r\nThis gives the browser instructions on how to control the page's dimensions and scaling. The `width=device-width` part sets the width of the page to follow the screen-width of the device. The `initial-scale=1.0` part sets the initial zoom level when the page is first loaded by the browser.\r\n\r\n#### HTML Comments\r\n\r\nShort comments should be written on one line, like this:\r\n```html\r\n\u003c!-- This is a comment --\u003e\r\n```\r\n\r\nComments that span more than one line should be written like this:\r\n```html\r\n\u003c!--\r\n This is a long comment example. This is a long comment example.\r\n This is a long comment example. This is a long comment example.\r\n--\u003e\r\n```\r\n\r\nLong comments are easier to observe if they are indented with two spaces.\r\n\r\n#### Using Style Sheets\r\n\r\nUse simple syntax for linking to style sheets (the type attribute is not necessary):\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\r\n```\r\n\r\nShort CSS rules can be written compressed, like this:\r\n```css\r\np.intro {font\r\n\r\n-family:Verdana;font-size:16em;}\r\n```\r\n\r\nLong CSS rules should be written over multiple lines:\r\n```css\r\nbody {\r\n background-color: lightgrey;\r\n font-family: \"Arial Black\", Helvetica, sans-serif;\r\n font-size: 16em;\r\n color: black;\r\n}\r\n```\r\n\r\n- Place the opening bracket on the same line as the selector\r\n- Use one space before the opening bracket\r\n- Use two spaces of indentation\r\n- Use a semicolon after each property-value pair, including the last\r\n- Only use quotes around values if the value contains spaces\r\n- Place the closing bracket on a new line, without leading spaces\r\n\r\n#### Loading JavaScript in HTML\r\n\r\nUse simple syntax for loading external scripts (the type attribute is not necessary):\r\n```html\r\n\u003cscript src=\"myscript.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n#### Accessing HTML Elements with JavaScript\r\n\r\nUsing \"untidy\" HTML code can result in JavaScript errors. These two JavaScript statements will produce different results:\r\n\r\n**Example:**\r\n```javascript\r\ngetElementById(\"Demo\").innerHTML = \"Hello\";\r\n```\r\n\r\n```javascript\r\ngetElementById(\"demo\").innerHTML = \"Hello\";\r\n```\r\n\r\nVisit the [JavaScript Style Guide](https://www.example.com) for more information.\r\n\r\n#### Use Lower Case File Names\r\n\r\nSome web servers (Apache, Unix) are case sensitive about file names: `\"london.jpg\"` cannot be accessed as `\"London.jpg\"`. Other web servers (Microsoft, IIS) are not case sensitive: `\"london.jpg\"` can be accessed as `\"London.jpg\"`. To avoid these problems, always use lowercase file names!\r\n\r\n#### File Extensions\r\n\r\nHTML files should have a `.html` extension (.htm is allowed). CSS files should have a `.css` extension. JavaScript files should have a `.js` extension.\r\n\r\n#### Differences Between .htm and .html?\r\n\r\nThere is no difference between the `.htm` and `.html` file extensions! Both will be treated as HTML by any web browser and web server.\r\n\r\n#### Default Filenames\r\n\r\nWhen a URL does not specify a filename at the end (like \"https://www.nemonet.com/\"), the server just adds a default filename, such as `\"index.html\"`, `\"index.htm\"`, `\"default.html\"`, or `\"default.htm\"`. \r\n\r\nIf your server is configured only with `\"index.html\"` as the default filename, your file must be named `\"index.html\"`, and not `\"default.html\"`. However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.\r\n\r\n\r\n---\r\n\r\n### HTML Entities [⬆️](#table-of-contents)\r\n\r\nReserved characters in HTML must be replaced with entities:\r\n\r\n- `\u003c` (less than) = `\u0026lt;`\r\n- `\u003e` (greater than) = `\u0026gt;`\r\n\r\n#### HTML Character Entities\r\n\r\nSome characters are reserved in HTML.\r\n\r\nIf you use the less than (`\u003c`) or greater than (`\u003e`) signs in your HTML text, the browser might mix them with tags.\r\n\r\nEntity names or entity numbers can be used to display reserved HTML characters.\r\n\r\nEntity names look like this:\r\n```\r\n\u0026entity_name;\r\n```\r\n\r\nEntity numbers look like this:\r\n```\r\n\u0026#entity_number;\r\n```\r\n\r\nTo display a less than sign (`\u003c`) we must write: `\u0026lt;` or `\u0026#60;`\r\n\r\nEntity names are easier to remember than entity numbers.\r\n\r\n#### Non-breaking Space\r\n\r\nA commonly used HTML entity is the non-breaking space: `\u0026nbsp;`\r\n\r\nA non-breaking space is a space that will not break into a new line.\r\n\r\nTwo words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.\r\n\r\nExamples:\r\n- § 10\r\n- 10 km/h\r\n- 10 PM\r\n\r\nAnother common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages.\r\n\r\nIf you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the `\u0026nbsp;` character entity.\r\n\r\nThe non-breaking hyphen (`\u0026#8209;`) is used to define a hyphen character (‑) that does not break into a new line.\r\n\r\n#### Some Useful HTML Character Entities\r\n\r\n| Result | Description | Name | Number |\r\n|--------|-----------------------|------------|---------|\r\n| ` ` | non-breaking space | `\u0026nbsp;` | `\u0026#160;`|\r\n| `\u003c` | less than | `\u0026lt;` | `\u0026#60;` |\r\n| `\u003e` | greater than | `\u0026gt;` | `\u0026#62;` |\r\n| `\u0026` | ampersand | `\u0026amp;` | `\u0026#38;` |\r\n| `\"` | double quotation mark | `\u0026quot;` | `\u0026#34;` |\r\n| `'` | single quotation mark | `\u0026apos;` | `\u0026#39;` |\r\n| `¢` | cent | `\u0026cent;` | `\u0026#162;`|\r\n| `£` | pound | `\u0026pound;` | `\u0026#163;`|\r\n| `¥` | yen | `\u0026yen;` | `\u0026#165;`|\r\n| `€` | euro | `\u0026euro;` | `\u0026#8364;`|\r\n| `©` | copyright | `\u0026copy;` | `\u0026#169;`|\r\n| `®` | trademark | `\u0026reg;` | `\u0026#174;`|\r\n\r\n**Note:** Entity names are case sensitive.\r\n\r\n#### Combining Diacritical Marks\r\n\r\nA diacritical mark is a \"glyph\" added to a letter.\r\n\r\nSome diacritical marks, like grave ( ̀) and acute ( ́) are called accents.\r\n\r\nDiacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in the character set (encoding) used in the page.\r\n\r\nHere are some examples:\r\n\r\n| Mark | Character | Construct | Result |\r\n|------|-----------|-----------|--------|\r\n| ̀ | a | `a\u0026#768;` | `à` |\r\n| ́ | a | `a\u0026#769;` | `á` |\r\n| ̂ | a | `a\u0026#770;` | `â` |\r\n| ̃ | a | `a\u0026#771;` | `ã` |\r\n| ̀ | O | `O\u0026#768;` | `Ò` |\r\n| ́ | O | `O\u0026#769;` | `Ó` |\r\n| ̂ | O | `O\u0026#770;` | `Ô` |\r\n| ̃ | O | `O\u0026#771;` | `Õ` |\r\n\r\n\r\n---\r\n\r\n### HTML Symbols [⬆️](#table-of-contents)\r\n\r\nSymbols or letters that are not present on your keyboard can be added to HTML using entities.\r\n\r\n#### HTML Symbol Entities\r\n\r\nHTML entities were described in the previous chapter.\r\n\r\nMany mathematical, technical, and currency symbols are not present on a normal keyboard.\r\n\r\nTo add such symbols to an HTML page, you can use the entity name or the entity number (a decimal or a hexadecimal reference) for the symbol:\r\n\r\n##### Example\r\n\r\nDisplay the euro sign:\r\n\r\n```html\r\n\u003cp\u003eI will display \u0026euro;\u003c/p\u003e\r\n\u003cp\u003eI will display \u0026#8364;\u003c/p\u003e\r\n\u003cp\u003eI will display \u0026#x20AC;\u003c/p\u003e\r\n```\r\n\r\nWill display as:\r\n\r\nI will display € \r\nI will display € \r\nI will display €\r\n\r\n#### Some Mathematical Symbols Supported by HTML\r\n\r\n| Char | Number | Entity | Description |\r\n|------|--------|--------|---------------------|\r\n| ∀ | \u0026#8704;| \u0026forall;| For all |\r\n| ∂ | \u0026#8706;| \u0026part; | Partial differential |\r\n| ∃ | \u0026#8707;| \u0026exist; | There exists |\r\n| ∅ | \u0026#8709;| \u0026empty; | Empty sets |\r\n| ∇ | \u0026#8711;| \u0026nabla; | Nabla |\r\n| ∈ | \u0026#8712;| \u0026isin; | Element of |\r\n| ∉ | \u0026#8713;| \u0026notin; | Not an element of |\r\n| ∋ | \u0026#8715;| \u0026ni; | Contains as member |\r\n| ∏ | \u0026#8719;| \u0026prod; | N-ary product |\r\n| ∑ | \u0026#8721;| \u0026sum; | N-ary summation |\r\n\r\n#### Some Greek Letters Supported by HTML\r\n\r\n| Char | Number | Entity | Description |\r\n|------|--------|---------|------------------|\r\n| Α | \u0026#913; | \u0026Alpha; | GREEK ALPHA |\r\n| Β | \u0026#914; | \u0026Beta; | GREEK BETA |\r\n| Γ | \u0026#915; | \u0026Gamma; | GREEK GAMMA |\r\n| Δ | \u0026#916; | \u0026Delta; | GREEK DELTA |\r\n| Ε | \u0026#917; | \u0026Epsilon;| GREEK EPSILON |\r\n| Ζ | \u0026#918; | \u0026Zeta; | GREEK ZETA |\r\n\r\n#### Some Other Entities Supported by HTML\r\n\r\n| Char | Number | Entity | Description |\r\n|------|--------|---------|-------------------|\r\n| © | \u0026#169; | \u0026copy; | COPYRIGHT |\r\n| ® | \u0026#174; | \u0026reg; | REGISTERED |\r\n| € | \u0026#8364;| \u0026euro; | EURO SIGN |\r\n| ™ | \u0026#8482;| \u0026trade; | TRADEMARK |\r\n| ← | \u0026#8592;| \u0026larr; | LEFT ARROW |\r\n| ↑ | \u0026#8593;| \u0026uarr; | UP ARROW |\r\n| → | \u0026#8594;| \u0026rarr; | RIGHT ARROW |\r\n| ↓ | \u0026#8595;| \u0026darr; | DOWN ARROW |\r\n| ♠ | \u0026#9824;| \u0026spades;| SPADE |\r\n| ♣ | \u0026#9827;| \u0026clubs; | CLUB |\r\n| ♥ | \u0026#9829;| \u0026hearts;| HEART |\r\n| ♦ | \u0026#9830;| \u0026diams; | DIAMOND |\r\n\r\n\r\n---\r\n\r\n\r\n### Using Emojis in HTML [⬆️](#table-of-contents)\r\n\r\nEmojis are characters from the UTF-8 character set: 😄 😍 💗\r\n\r\n| Emoji | Value |\r\n|-------|--------|\r\n| 🗻 | \u0026#128507; |\r\n| 🗼 | \u0026#128508; |\r\n| 🗽 | \u0026#128509; |\r\n| 🗾 | \u0026#128510; |\r\n| 🗿 | \u0026#128511; |\r\n| 😀 | \u0026#128512; |\r\n| 😁 | \u0026#128513; |\r\n| 😂 | \u0026#128514; |\r\n| 😃 | \u0026#128515; |\r\n| 😄 | \u0026#128516; |\r\n| 😅 | \u0026#128517; |\r\n\r\n#### Full HTML Emoji Reference\r\n\r\n**HTML Emojis Examples:**\r\n\r\n🚀🚁🚂🚃🚄\r\n\r\n**HTML Emoji Transport Symbols:**\r\n\r\n💺💻💼💽💾\r\n\r\n**HTML Emoji Office Symbols:**\r\n\r\n👮👯👰👱👲\r\n\r\n**HTML Emoji People Symbols:**\r\n\r\n🐂🐃🐄🐅🐆\r\n\r\n#### What are Emojis?\r\n\r\nEmojis look like images, or icons, but they are not.\r\n\r\nThey are letters (characters) from the UTF-8 (Unicode) character set.\r\n\r\nUTF-8 covers almost all of the characters and symbols in the world.\r\n\r\n#### The HTML charset Attribute\r\n\r\nTo display an HTML page correctly, a web browser must know the character set used in the page.\r\n\r\nThis is specified in the `\u003cmeta\u003e` tag:\r\n\r\n```html\r\n\u003cmeta charset=\"UTF-8\"\u003e\r\n```\r\n\r\nIf not specified, UTF-8 is the default character set in HTML.\r\n\r\n#### UTF-8 Characters\r\n\r\nMany UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):\r\n\r\n- A is 65\r\n- B is 66\r\n- C is 67\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003cmeta charset=\"UTF-8\"\u003e\r\n\u003cbody\u003e\r\n\r\n\u003cp\u003eI will display A B C\u003c/p\u003e\r\n\u003cp\u003eI will display \u0026#65; \u0026#66; \u0026#67;\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n**Example Explained**\r\n\r\nThe `\u003cmeta charset=\"UTF-8\"\u003e` element defines the character set.\r\n\r\nThe characters A, B, and C, are displayed by the numbers 65, 66, and 67.\r\n\r\nTo let the browser understand that you are displaying a character, you must start the entity number with `\u0026#` and end it with `;` (semicolon).\r\n\r\n#### Emoji Characters\r\n\r\nEmojis are also characters from the UTF-8 alphabet:\r\n\r\n- 😄 is 128516\r\n- 😍 is 128525\r\n- 💗 is 128151\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003cmeta charset=\"UTF-8\"\u003e\r\n\u003cbody\u003e\r\n\r\n\u003ch1\u003eMy First Emoji\u003c/h1\u003e\r\n\r\n\u003cp\u003e\u0026#128512;\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\nSince Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.\r\n\r\n**Example:**\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003cmeta charset=\"UTF-8\"\u003e\r\n\u003cbody\u003e\r\n\r\n\u003ch1\u003eSized Emojis\u003c/h1\u003e\r\n\r\n\u003cp style=\"font-size:48px\"\u003e\r\n\u0026#128512; \u0026#128516; \u0026#128525; \u0026#128151;\r\n\u003c/p\u003e\r\n\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n---\r\n\r\n### HTML Encoding (Character Sets) [⬆️](#table-of-contents)\r\n\r\nTo display an HTML page correctly, a web browser must know which character set to use.\r\n\r\n#### The HTML `charset` Attribute\r\n\r\nThe character set is specified in the `\u003cmeta\u003e` tag:\r\n\r\n**Example:**\r\n```html\r\n\u003cmeta charset=\"UTF-8\"\u003e\r\n```\r\n\r\nThe HTML5 specification encourages web developers to use the UTF-8 character set. UTF-8 covers almost all of the characters and symbols in the world!\r\n\r\n##### Unicode and Web Growth\r\n\r\n- Full UTF-8 Reference\r\n\r\n#### The ASCII Character Set\r\n\r\nASCII was the first character encoding standard for the web. It defined 128 different characters that could be used on the internet:\r\n\r\n- English letters (A-Z)\r\n- Numbers (0-9)\r\n- Special characters like `! $ + - ( ) @ \u003c \u003e`\r\n\r\n#### The ANSI Character Set\r\n\r\nANSI (Windows-1252) was the original Windows character set:\r\n\r\n- Identical to ASCII for the first 127 characters\r\n- Special characters from 128 to 159\r\n- Identical to UTF-8 from 160 to 255\r\n\r\n**Example:**\r\n```html\r\n\u003cmeta charset=\"Windows-1252\"\u003e\r\n```\r\n\r\n#### The ISO-8859-1 Character Set\r\n\r\nISO-8859-1 was the default character set for HTML 4, supporting 256 different character codes. HTML 4 also supported UTF-8.\r\n\r\n- Identical to ASCII for the first 127 characters\r\n- Does not use the characters from 128 to 159\r\n- Identical to ANSI and UTF-8 from 160 to 255\r\n\r\n**HTML 4 Example:**\r\n```html\r\n\u003cmeta http-equiv=\"Content-Type\" content=\"text/html;charset=ISO-8859-1\"\u003e\r\n```\r\n\r\n**HTML 5 Example:**\r\n```html\r\n\u003cmeta charset=\"ISO-8859-1\"\u003e\r\n```\r\n\r\n#### The UTF-8 Character Set\r\n\r\n- Identical to ASCII for values 0 to 127\r\n- Does not use the characters from 128 to 159\r\n- Identical to ANSI and ISO-8859-1 from 160 to 255\r\n- Extends beyond 255, covering thousands of additional characters\r\n\r\n**Example:**\r\n```html\r\n\u003cmeta charset=\"UTF-8\"\u003e\r\n```\r\n\r\n- Full HTML Character Set Reference\r\n\r\n#### Differences Between Character Sets\r\n\r\n| Number | ASCII | ANSI | ISO-8859-1 | UTF-8 | Description |\r\n|--------|-------|------|------------|-------|--------------------------|\r\n| 32 | | | | | space |\r\n| 33 | ! | ! | ! | ! | exclamation mark |\r\n| 34 | \" | \" | \" | \" | quotation mark |\r\n| 35 | # | # | # | # | number sign |\r\n| 36 | $ | $ | $ | $ | dollar sign |\r\n| 37 | % | % | % | % | percent sign |\r\n| 38 | \u0026 | \u0026 | \u0026 | \u0026 | ampersand |\r\n| 39 | ' | ' | ' | ' | apostrophe |\r\n| 40 | ( | ( | ( | ( | left parenthesis |\r\n| 41 | ) | ) | ) | ) | right parenthesis |\r\n| 42 | * | * | * | * | asterisk |\r\n| 43 | + | + | + | + | plus sign |\r\n| 44 | , | , | , | , | comma |\r\n| 45 | - | - | - | - | hyphen-minus |\r\n| 46 | . | . | . | . | full stop |\r\n| 47 | / | / | / | / | solidus |\r\n| 48 | 0 | 0 | 0 | 0 | digit zero |\r\n| 49 | 1 | 1 | 1 | 1 | digit one |\r\n| 50 | 2 | 2 | 2 | 2 | digit two |\r\n| 51 | 3 | 3 | 3 | 3 | digit three |\r\n| 52 | 4 | 4 | 4 | 4 | digit four |\r\n| 53 | 5 | 5 | 5 | 5 | digit five |\r\n| 54 | 6 | 6 | 6 | 6 | digit six |\r\n| 55 | 7 | 7 | 7 | 7 | digit seven |\r\n| 56 | 8 | 8 | 8 | 8 | digit eight |\r\n| 57 | 9 | 9 | 9 | 9 | digit nine |\r\n| 58 | : | : | : | : | colon |\r\n| 59 | ; | ; | ; | ; | semicolon |\r\n| 60 | \u003c | \u003c | \u003c | \u003c | less than |\r\n| 61 | = | = | = | = | equals sign |\r\n| 62 | \u003e | \u003e | \u003e | \u003e | greater than |\r\n| 63 | ? | ? | ? | ? | question mark |\r\n| 64 | @ | @ | @ | @ | commercial at |\r\n| 65 | A | A | A | A | Latin A |\r\n| 66 | B | B | B | B | Latin B |\r\n| 67 | C | C | C | C | Latin C |\r\n| 68 | D | D | D | D | Latin D |\r\n| 69 | E | E | E | E | Latin E |\r\n| 70 | F | F | F | F | Latin F |\r\n| 71 | G | G | G | G | Latin G |\r\n| 72 | H | H | H | H | Latin H |\r\n| 73 | I | I | I | I | Latin I |\r\n| 74 | J | J | J | J | Latin J |\r\n| 75 | K | K | K | K | Latin K |\r\n| 76 | L | L | L | L | Latin L |\r\n| 77 | M | M | M | M | Latin M |\r\n| 78 | N | N | N | N | Latin N |\r\n| 79 | O | O | O | O | Latin O |\r\n| 80 | P | P | P | P | Latin P |\r\n| 81 | Q | Q | Q | Q | Latin Q |\r\n| 82 | R | R | R | R | Latin R |\r\n| 83 | S | S | S | S | Latin S |\r\n| 84 | T | T | T | T | Latin T |\r\n| 85 | U | U | U | U | Latin U |\r\n| 86 | V | V | V | V | Latin V |\r\n| 87 | W | W | W | W | Latin W |\r\n| 88 | X | X | X | X | Latin X |\r\n| 89 | Y | Y | Y | Y | Latin Y |\r\n| 90 | Z | Z | Z | Z | Latin Z |\r\n| 91 | [ | [ | [ | [ | left square bracket |\r\n| 92 | \\ | \\ | \\ | \\ | reverse solidus |\r\n| 93 | ] | ] | ] | ] | right square bracket |\r\n| 94 | ^ | ^ | ^ | ^ | circumflex accent |\r\n| 95 | _ | _ | _ | _ | low line |\r\n| 96 | ` | ` | ` | ` | grave accent |\r\n| 97 | a | a | a | a | Latin small a |\r\n| 98 | b | b | b | b | Latin small b |\r\n| 99 | c | c | c | c | Latin small c |\r\n|100 | d | d | d | d | Latin small d |\r\n|101 | e | e | e | e | Latin small e |\r\n|102 | f | f | f | f | Latin small f |\r\n|103 | g | g | g | g | Latin small g |\r\n|104 | h | h | h | h | Latin small h |\r\n|105 | i | i | i | i | Latin small i |\r\n|106 | j | j | j | j | Latin small j |\r\n|107 | k | k | k | k | Latin small k |\r\n|108 | l | l | l | l | Latin small l |\r\n|109 | m | m | m | m | Latin small m |\r\n|110 | n | n | n | n | Latin small n |\r\n|111 | o | o | o | o | Latin small o |\r\n|112 | p | p | p | p | Latin small p |\r\n|113 | q | q | q | q | Latin small q |\r\n|114 | r | r | r | r | Latin small r |\r\n|115 | s | s | s | s | Latin small s |\r\n|116 | t | t | t | t | Latin small t |\r\n|117 | u | u | u | u | Latin small u |\r\n|118 | v | v | v | v | Latin small v |\r\n|119 | w | w | w | w | Latin small w |\r\n|120 | x | x | x | x | Latin small x |\r\n|121 | y | y | y | y | Latin small y |\r\n|122 | z | z | z | z | Latin small z |\r\n|123 | { | { | { | { | left curly bracket |\r\n|124 | | | | | | | | | vertical bar |\r\n|125 | } | } | } | } | right curly bracket |\r\n|126 | ~ | ~ | ~ | ~ | tilde |\r\n\r\n\r\n---\r\n\r\n### HTML Uniform Resource Locators [⬆️](#table-of-contents)\r\n\r\nA URL is another word for a **web address**.\r\n\r\nA URL can be composed of words (e.g. `nemonet.com`), or an **Internet Protocol (IP) address** (e.g. `127.0.0.1`).\r\n\r\nMost people enter the name when surfing, because names are easier to remember than numbers.\r\n\r\n\r\n\r\n#### URL - Uniform Resource Locator\r\n\r\nWeb browsers request pages from web servers by using a URL.\r\n\r\nA **Uniform Resource Locator (URL)** is used to address a document (or other data) on the web.\r\n\r\nA web address like `https://www.nemonet.com/html/default.asp` follows these syntax rules:\r\n```\r\nscheme://prefix.domain:port/path/filename\r\n```\r\n\r\n##### Explanation:\r\n\r\n- **scheme**: Defines the type of Internet service (most common is `http` or `https`)\r\n- **prefix**: Defines a domain prefix (default for `http` is `www`)\r\n- **domain**: Defines the Internet domain name (like `nemonet.com`)\r\n- **port**: Defines the port number at the host (default for `http` is `80`)\r\n- **path**: Defines a path at the server (If omitted: the root directory of the site)\r\n- **filename**: Defines the name of a document or resource\r\n\r\n\r\n\r\n#### Common URL Schemes\r\n\r\n| Scheme | Short for | Used for |\r\n|---------|---------------------------------------|----------------------------------------------|\r\n| http | HyperText Transfer Protocol | Common web pages. Not encrypted |\r\n| https | Secure HyperText Transfer Protocol | Secure web pages. Encrypted |\r\n| ftp | File Transfer Protocol | Downloading or uploading files |\r\n| file | | A file on your computer |\r\n\r\n\r\n\r\n#### URL Encoding\r\n\r\nURLs can only be sent over the Internet using the **ASCII character-set**. If a URL contains characters outside the ASCII set, the URL has to be converted.\r\n\r\n**URL encoding** converts non-ASCII characters into a format that can be transmitted over the Internet.\r\n\r\nURL encoding replaces non-ASCII characters with a \"%\" followed by hexadecimal digits.\r\n\r\nURLs cannot contain spaces. URL encoding normally replaces a space with a plus (`+`) sign, or `%20`.\r\n\r\n\r\n#### ASCII Encoding Examples\r\n\r\nYour browser will encode input, according to the character-set used in your page.\r\n\r\nThe default character-set in HTML5 is **UTF-8**.\r\n\r\n| Character | From Windows-1252 | From UTF-8 |\r\n|------------|-------------------|--------------|\r\n| € | %80 | %E2%82%AC |\r\n| £ | %A3 | %C2%A3 |\r\n| © | %A9 | %C2%A9 |\r\n| ® | %AE | %C2%AE |\r\n| À | %C0 | %C3%80 |\r\n| Á | %C1 | %C3%81 |\r\n| Â | %C2 | %C3%82 |\r\n| Ã | %C3 | %C3%83 |\r\n| Ä | %C4 | %C3%84 |\r\n| Å | %C5 | %C3%85 |\r\n\r\nFor a complete reference of all URL encodings, visit our [URL Encoding Reference](https://www.nemonet.com/tags/ref_urlencode.ASP).\r\n\r\n---\r\n\r\n### HTML Versus XHTML [⬆️](#table-of-contents)\r\n\r\nXHTML is a stricter, more XML-based version of HTML.\r\n\r\n#### What is XHTML?\r\n- **XHTML** stands for **EXtensible HyperText Markup Language** \r\n- XHTML is a stricter, more XML-based version of HTML \r\n- XHTML is HTML defined as an XML application \r\n- XHTML is supported by all major browsers \r\n\r\n#### Why XHTML?\r\n\r\n**XML** is a markup language where all documents must be marked up correctly (be \"well-formed\").\r\n\r\nXHTML was developed to make HTML more extensible and flexible to work with other data formats (such as XML). In addition, browsers ignore errors in HTML pages and try to display the website even if it has errors in the markup. XHTML enforces stricter error handling.\r\n\r\n_If you want to study XML, please read our XML Tutorial._\r\n\r\n##### The Most Important Differences from HTML:\r\n- `\u003c!DOCTYPE\u003e` is mandatory \r\n- The `xmlns` attribute in `\u003chtml\u003e` is mandatory \r\n- `\u003chtml\u003e`, `\u003chead\u003e`, `\u003ctitle\u003e`, and `\u003cbody\u003e` are mandatory \r\n- Elements must always be properly nested \r\n- Elements must always be closed \r\n- Elements must always be in lowercase \r\n- Attribute names must always be in lowercase \r\n- Attribute values must always be quoted \r\n- Attribute minimization is forbidden \r\n\r\n#### XHTML - `\u003c!DOCTYPE ....\u003e` Is Mandatory\r\n\r\nAn XHTML document must have an XHTML `\u003c!DOCTYPE\u003e` declaration. \r\nThe `\u003chtml\u003e`, `\u003chead\u003e`, `\u003ctitle\u003e`, and `\u003cbody\u003e` elements must also be present, and the `xmlns` attribute in `\u003chtml\u003e` must specify the XML namespace for the document.\r\n\r\n##### Example\r\nHere is an XHTML document with the minimum required tags:\r\n\r\n```xml\r\n\u003c!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\"\r\n\"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\"\u003e\r\n\u003chtml xmlns=\"http://www.w3.org/1999/xhtml\"\u003e\r\n\u003chead\u003e\r\n \u003ctitle\u003eTitle of document\u003c/title\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n some content here...\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n#### XHTML Elements Must be Properly Nested\r\n\r\nIn XHTML, elements must always be properly nested within each other, like this: \r\n- **Correct**: `\u003cb\u003e\u003ci\u003eSome text\u003c/i\u003e\u003c/b\u003e` \r\n- **Wrong**: `\u003cb\u003e\u003ci\u003eSome text\u003c/b\u003e\u003c/i\u003e` \r\n\r\n#### XHTML Elements Must Always be Closed\r\n\r\nIn XHTML, elements must always be closed, like this: \r\n- **Correct**:\r\n```xml\r\n\u003cp\u003eThis is a paragraph\u003c/p\u003e\r\n\u003cp\u003eThis is another paragraph\u003c/p\u003e\r\n``` \r\n- **Wrong**:\r\n```xml\r\n\u003cp\u003eThis is a paragraph\r\n\u003cp\u003eThis is another paragraph\r\n```\r\n\r\n#### XHTML Empty Elements Must Always be Closed\r\n\r\nIn XHTML, empty elements must always be closed, like this: \r\n- **Correct**:\r\n```xml\r\nA break: \u003cbr /\u003e\r\nA horizontal rule: \u003chr /\u003e\r\nAn image: \u003cimg src=\"happy.gif\" alt=\"Happy face\" /\u003e\r\n``` \r\n- **Wrong**:\r\n```xml\r\nA break: \u003cbr\u003e\r\nA horizontal rule: \u003chr\u003e\r\nAn image: \u003cimg src=\"happy.gif\" alt=\"Happy face\"\u003e\r\n```\r\n\r\n#### XHTML Elements Must be in Lowercase\r\n\r\nIn XHTML, element names must always be in lowercase, like this: \r\n- **Correct**:\r\n```xml\r\n\u003cbody\u003e\r\n\u003cp\u003eThis is a paragraph\u003c/p\u003e\r\n\u003c/body\u003e\r\n``` \r\n- **Wrong**:\r\n```xml\r\n\u003cBODY\u003e\r\n\u003cP\u003eThis is a paragraph\u003c/P\u003e\r\n\u003c/BODY\u003e\r\n```\r\n\r\n#### XHTML Attribute Names Must be in Lowercase\r\n\r\nIn XHTML, attribute names must always be in lowercase, like this: \r\n- **Correct**:\r\n```xml\r\n\u003ca href=\"https://www.nemonet.com/html/\"\u003eVisit our HTML tutorial\u003c/a\u003e\r\n``` \r\n- **Wrong**:\r\n```xml\r\n\u003ca HREF=\"https://www.nemonet.com/html/\"\u003eVisit our HTML tutorial\u003c/a\u003e\r\n```\r\n\r\n#### XHTML Attribute Values Must be Quoted\r\n\r\nIn XHTML, attribute values must always be quoted, like this: \r\n- **Correct**:\r\n```xml\r\n\u003ca href=\"https://www.nemonet.com/html/\"\u003eVisit our HTML tutorial\u003c/a\u003e\r\n``` \r\n- **Wrong**:\r\n```xml\r\n\u003ca href=https://www.nemonet.com/html/\u003eVisit our HTML tutorial\u003c/a\u003e\r\n```\r\n\r\n#### XHTML Attribute Minimization is Forbidden\r\n\r\nIn XHTML, attribute minimization is forbidden: \r\n- **Correct**:\r\n```xml\r\n\u003cinput type=\"checkbox\" name=\"vehicle\" value=\"car\" checked=\"checked\" /\u003e\r\n\u003cinput type=\"text\" name=\"lastname\" disabled=\"disabled\" /\u003e\r\n``` \r\n- **Wrong**:\r\n```xml\r\n\u003cinput type=\"checkbox\" name=\"vehicle\" value=\"car\" checked /\u003e\r\n\u003cinput type=\"text\" name=\"lastname\" disabled /\u003e\r\n```\r\n\r\n---\r\n\r\n\u003ch1 align=\"center\"\u003eHTML FORM TUTORIAL \u003c/h1\u003e\r\n\r\n---\r\n\r\n### **HTML Forms** [⬆️](#table-of-contents)\r\n\r\nAn HTML form is used to collect user input. The user input is most often sent to a server for processing.\r\n\r\n#### Example\r\n\r\n**First name:**\r\n\r\n**Last name:**\r\n\r\n#### The `\u003cform\u003e` Element\r\n\r\nThe HTML `\u003cform\u003e` element is used to create an HTML form for user input:\r\n\r\n```html\r\n\u003cform\u003e\r\n \u003c!-- form elements --\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThe `\u003cform\u003e` element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.\r\n\r\nAll the different form elements are covered in this chapter: **HTML Form Elements**.\r\n\r\n#### The `\u003cinput\u003e` Element\r\n\r\nThe HTML `\u003cinput\u003e` element is the most used form element.\r\n\r\nAn `\u003cinput\u003e` element can be displayed in many ways, depending on the `type` attribute.\r\n\r\nHere are some examples:\r\n\r\n| Type | Description |\r\n|-----------------------|----------------------------------------------------|\r\n| `\u003cinput type=\"text\"\u003e` | Displays a single-line text input field |\r\n| `\u003cinput type=\"radio\"\u003e` | Displays a radio button (for selecting one choice) |\r\n| `\u003cinput type=\"checkbox\"\u003e`| Displays a checkbox (for selecting multiple choices) |\r\n| `\u003cinput type=\"submit\"\u003e`| Displays a submit button (for submitting the form) |\r\n| `\u003cinput type=\"button\"\u003e`| Displays a clickable button |\r\n\r\nAll the different input types are covered in this chapter: **HTML Input Types**.\r\n\r\n#### Text Fields\r\n\r\nThe `\u003cinput type=\"text\"\u003e` defines a single-line input field for text input.\r\n\r\n##### Example\r\n\r\nA form with input fields for text:\r\n\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThis is how the HTML code above will be displayed in a browser:\r\n\r\n\u003cimg src=\"./Images/pro/nn5.jpg\" width=\"auto\" height=\"auto\"\u003e\r\n\r\n*Note:* The form itself is not visible. Also note that the default width of an input field is 20 characters.\r\n\r\n#### The `\u003clabel\u003e` Element\r\n\r\nNotice the use of the `\u003clabel\u003e` element in the example above.\r\n\r\nThe `\u003clabel\u003e` tag defines a label for many form elements.\r\n\r\nThe `\u003clabel\u003e` element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.\r\n\r\nThe `\u003clabel\u003e` element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the `\u003clabel\u003e` element, it toggles the radio button/checkbox.\r\n\r\nThe `for` attribute of the `\u003clabel\u003e` tag should be equal to the `id` attribute of the `\u003cinput\u003e` element to bind them together.\r\n\r\n#### Radio Buttons\r\n\r\nThe `\u003cinput type=\"radio\"\u003e` defines a radio button.\r\n\r\nRadio buttons let a user select ONE of a limited number of choices.\r\n\r\n##### Example\r\n\r\nA form with radio buttons:\r\n\r\n```html\r\n\u003cp\u003eChoose your favorite Web language:\u003c/p\u003e\r\n\r\n\u003cform\u003e\r\n \u003cinput type=\"radio\" id=\"html\" name=\"fav_language\" value=\"HTML\"\u003e\r\n \u003clabel for=\"html\"\u003eHTML\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"radio\" id=\"css\" name=\"fav_language\" value=\"CSS\"\u003e\r\n \u003clabel for=\"css\"\u003eCSS\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"radio\" id=\"javascript\" name=\"fav_language\" value=\"JavaScript\"\u003e\r\n \u003clabel for=\"javascript\"\u003eJavaScript\u003c/label\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThis is how the HTML code above will be displayed in a browser:\r\n\r\n\u003cimg src=\"./Images/pro/nn6.jpg\" width=\"auto\" height=\"auto\"\u003e\r\n\r\n#### Checkboxes\r\n\r\nThe `\u003cinput type=\"checkbox\"\u003e` defines a checkbox.\r\n\r\nCheckboxes let a user select ZERO or MORE options of a limited number of choices.\r\n\r\n##### Example\r\n\r\nA form with checkboxes:\r\n\r\n```html\r\n\u003cform\u003e\r\n \u003cinput type=\"checkbox\" id=\"vehicle1\" name=\"vehicle1\" value=\"Bike\"\u003e\r\n \u003clabel for=\"vehicle1\"\u003e I have a bike\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"checkbox\" id=\"vehicle2\" name=\"vehicle2\" value=\"Car\"\u003e\r\n \u003clabel for=\"vehicle2\"\u003e I have a car\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"checkbox\" id=\"vehicle3\" name=\"vehicle3\" value=\"Boat\"\u003e\r\n \u003clabel for=\"vehicle3\"\u003e I have a boat\u003c/label\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThis is how the HTML code above will be displayed in a browser:\r\n\r\n\u003cimg src=\"./Images/pro/nn7.jpg\"\u003e\r\n\r\n#### The Submit Button\r\n\r\nThe `\u003cinput type=\"submit\"\u003e` defines a button for submitting the form data to a form-handler.\r\n\r\nThe form-handler is typically a file on the server with a script for processing input data.\r\n\r\nThe form-handler is specified in the form's `action` attribute.\r\n\r\n##### Example\r\n\r\nA form with a submit button:\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" value=\"John\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThis is how the HTML code above will be displayed in a browser:\r\n\r\n\u003cimg src=\"./Images/pro/nn8.jpg\"\u003e\r\n\r\n#### The Name Attribute for `\u003cinput\u003e`\r\n\r\nNotice that each input field must have a `name` attribute to be submitted.\r\n\r\nIf the `name` attribute is omitted, the value of the input field will not be sent at all.\r\n\r\n##### Example\r\n\r\nThis example will not submit the value of the \"First name\" input field:\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" value=\"John\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n\r\n---\r\n\r\n\r\n\r\n### HTML Form Attributes [⬆️](#table-of-contents)\r\n\r\nThis chapter describes the different attributes for the HTML `\u003cform\u003e` element.\r\n\r\n#### The Action Attribute\r\n\r\nThe action attribute defines the action to be performed when the form is submitted.\r\n\r\nUsually, the form data is sent to a file on the server when the user clicks on the submit button.\r\n\r\nIn the example below, the form data is sent to a file called \"action_page.php\". This file contains a server-side script that handles the form data:\r\n\r\n##### Example\r\n\r\nOn submit, send form data to \"action_page.php\":\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" value=\"John\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n**Tip**: If the action attribute is omitted, the action is set to the current page.\r\n\r\n#### The Target Attribute\r\n\r\nThe target attribute specifies where to display the response that is received after submitting the form.\r\n\r\nThe target attribute can have one of the following values:\r\n\r\n| Value | Description |\r\n|---------|-------------|\r\n| _blank | The response is displayed in a new window or tab |\r\n| _self | The response is displayed in the current window |\r\n| _parent | The response is displayed in the parent frame |\r\n| _top | The response is displayed in the full body of the window |\r\n| framename | The response is displayed in a named iframe |\r\n\r\nThe default value is _self which means that the response will open in the current window.\r\n\r\n##### Example\r\n\r\nHere, the submitted result will open in a new browser tab:\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\" target=\"_blank\"\u003e\r\n```\r\n\r\n#### The Method Attribute\r\n\r\nThe method attribute specifies the HTTP method to be used when submitting the form data.\r\n\r\nThe form-data can be sent as URL variables (with `method=\"get\"`) or as HTTP post transaction (with `method=\"post\"`).\r\n\r\nThe default HTTP method when submitting form data is GET. \r\n\r\n##### Example\r\n\r\nThis example uses the GET method when submitting the form data:\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\" method=\"get\"\u003e\r\n```\r\n\r\n##### Example\r\n\r\nThis example uses the POST method when submitting the form data:\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\" method=\"post\"\u003e\r\n```\r\n\r\n##### Notes on GET:\r\n\r\n- Appends the form data to the URL, in name/value pairs\r\n- **NEVER** use GET to send sensitive data! (the submitted form data is visible in the URL!)\r\n- The length of a URL is limited (2048 characters)\r\n- Useful for form submissions where a user wants to bookmark the result\r\n- GET is good for non-secure data, like query strings in Google\r\n\r\n##### Notes on POST:\r\n\r\n- Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)\r\n- POST has no size limitations, and can be used to send large amounts of data.\r\n- Form submissions with POST cannot be bookmarked\r\n\r\n**Tip**: Always use POST if the form data contains sensitive or personal information!\r\n\r\n#### The Autocomplete Attribute\r\n\r\nThe autocomplete attribute specifies whether a form should have autocomplete on or off.\r\n\r\nWhen autocomplete is on, the browser automatically complete values based on values that the user has entered before.\r\n\r\n##### Example\r\n\r\nA form with autocomplete on:\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\" autocomplete=\"on\"\u003e\r\n```\r\n\r\n#### The Novalidate Attribute\r\n\r\nThe novalidate attribute is a boolean attribute.\r\n\r\nWhen present, it specifies that the form-data (input) should not be validated when submitted.\r\n\r\n##### Example\r\n\r\nA form with a novalidate attribute:\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\" novalidate\u003e \r\n```\r\n\r\n---\r\n\r\n\r\n### HTML Form Elements [⬆️](#table-of-contents)\r\n\r\nThis chapter describes all the different HTML form elements.\r\n\r\n#### The HTML `\u003cform\u003e` Elements\r\n\r\nThe HTML `\u003cform\u003e` element can contain one or more of the following form elements:\r\n\r\n- `\u003cinput\u003e`\r\n- `\u003clabel\u003e`\r\n- `\u003cselect\u003e`\r\n- `\u003ctextarea\u003e`\r\n- `\u003cbutton\u003e`\r\n- `\u003cfieldset\u003e`\r\n- `\u003clegend\u003e`\r\n- `\u003cdatalist\u003e`\r\n- `\u003coutput\u003e`\r\n- `\u003coption\u003e`\r\n- `\u003coptgroup\u003e`\r\n\r\n#### The `\u003cinput\u003e` Element\r\n\r\nOne of the most used form elements is the `\u003cinput\u003e` element.\r\n\r\nThe `\u003cinput\u003e` element can be displayed in several ways, depending on the `type` attribute.\r\n\r\n**Example**:\r\n```html\r\n\u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\r\n\u003cinput type=\"text\" id=\"fname\" name=\"fname\"\u003e\r\n```\r\n\r\nAll the different values of the `type` attribute are covered in the next chapter: HTML Input Types.\r\n\r\n#### The `\u003clabel\u003e` Element\r\n\r\nThe `\u003clabel\u003e` element defines a label for several form elements.\r\n\r\nThe `\u003clabel\u003e` element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.\r\n\r\nThe `\u003clabel\u003e` element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) – because when the user clicks the text within the `\u003clabel\u003e` element, it toggles the radio button/checkbox.\r\n\r\nThe `for` attribute of the `\u003clabel\u003e` tag should be equal to the `id` attribute of the `\u003cinput\u003e` element to bind them together.\r\n\r\n#### The `\u003cselect\u003e` Element\r\n\r\nThe `\u003cselect\u003e` element defines a drop-down list:\r\n\r\n**Example**:\r\n```html\r\n\u003clabel for=\"cars\"\u003eChoose a car:\u003c/label\u003e\r\n\u003cselect id=\"cars\" name=\"cars\"\u003e\r\n \u003coption value=\"volvo\"\u003eVolvo\u003c/option\u003e\r\n \u003coption value=\"saab\"\u003eSaab\u003c/option\u003e\r\n \u003coption value=\"fiat\"\u003eFiat\u003c/option\u003e\r\n \u003coption value=\"audi\"\u003eAudi\u003c/option\u003e\r\n\u003c/select\u003e\r\n```\r\n\r\nThe `\u003coption\u003e` element defines an option that can be selected. By default, the first item in the drop-down list is selected. To define a pre-selected option, add the `selected` attribute to the option:\r\n\r\n**Example**:\r\n```html\r\n\u003coption value=\"fiat\" selected\u003eFiat\u003c/option\u003e\r\n```\r\n\r\n#### Visible Values:\r\n\r\nUse the `size` attribute to specify the number of visible values:\r\n\r\n**Example**:\r\n```html\r\n\u003clabel for=\"cars\"\u003eChoose a car:\u003c/label\u003e\r\n\u003cselect id=\"cars\" name=\"cars\" size=\"3\"\u003e\r\n \u003coption value=\"volvo\"\u003eVolvo\u003c/option\u003e\r\n \u003coption value=\"saab\"\u003eSaab\u003c/option\u003e\r\n \u003coption value=\"fiat\"\u003eFiat\u003c/option\u003e\r\n \u003coption value=\"audi\"\u003eAudi\u003c/option\u003e\r\n\u003c/select\u003e\r\n```\r\n\r\n#### Allow Multiple Selections:\r\n\r\nUse the `multiple` attribute to allow the user to select more than one value:\r\n\r\n**Example**:\r\n```html\r\n\u003clabel for=\"cars\"\u003eChoose a car:\u003c/label\u003e\r\n\u003cselect id=\"cars\" name=\"cars\" size=\"4\" multiple\u003e\r\n \u003coption value=\"volvo\"\u003eVolvo\u003c/option\u003e\r\n \u003coption value=\"saab\"\u003eSaab\u003c/option\u003e\r\n \u003coption value=\"fiat\"\u003eFiat\u003c/option\u003e\r\n \u003coption value=\"audi\"\u003eAudi\u003c/option\u003e\r\n\u003c/select\u003e\r\n```\r\n\r\n#### The `\u003ctextarea\u003e` Element\r\n\r\nThe `\u003ctextarea\u003e` element defines a multi-line input field (a text area):\r\n\r\n**Example**:\r\n```html\r\n\u003ctextarea name=\"message\" rows=\"10\" cols=\"30\"\u003e\r\nThe cat was playing in the garden.\r\n\u003c/textarea\u003e\r\n```\r\n\r\nThe `rows` attribute specifies the visible number of lines in a text area, and the `cols` attribute specifies the visible width of a text area.\r\n\r\nYou can also define the size of the text area using CSS:\r\n\r\n**Example**:\r\n```html\r\n\u003ctextarea name=\"message\" style=\"width:200px; height:600px;\"\u003e\r\nThe cat was playing in the garden.\r\n\u003c/textarea\u003e\r\n```\r\n\r\n#### The `\u003cbutton\u003e` Element\r\n\r\nThe `\u003cbutton\u003e` element defines a clickable button:\r\n\r\n**Example**:\r\n```html\r\n\u003cbutton type=\"button\" onclick=\"alert('Hello World!')\"\u003eClick Me!\u003c/button\u003e\r\n```\r\n\r\nAlways specify the `type` attribute for the button element. Different browsers may use different default types for the button element.\r\n\r\n#### The `\u003cfieldset\u003e` and `\u003clegend\u003e` Elements\r\n\r\nThe `\u003cfieldset\u003e` element is used to group related data in a form. The `\u003clegend\u003e` element defines a caption for the `\u003cfieldset\u003e` element.\r\n\r\n**Example**:\r\n```html\r\n\u003cform action=\"/action_page.php\"\u003e\r\n \u003cfieldset\u003e\r\n \u003clegend\u003ePersonalia:\u003c/legend\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" value=\"John\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n \u003c/fieldset\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The `\u003cdatalist\u003e` Element\r\n\r\nThe `\u003cdatalist\u003e` element specifies a list of pre-defined options for an `\u003cinput\u003e` element. Users will see a drop-down list of the pre-defined options as they input data.\r\n\r\nThe `list` attribute of the `\u003cinput\u003e` element must refer to the `id` attribute of the `\u003cdatalist\u003e` element.\r\n\r\n**Example**:\r\n```html\r\n\u003cform action=\"/action_page.php\"\u003e\r\n \u003cinput list=\"browsers\"\u003e\r\n \u003cdatalist id=\"browsers\"\u003e\r\n \u003coption value=\"Edge\"\u003e\r\n \u003coption value=\"Firefox\"\u003e\r\n \u003coption value=\"Chrome\"\u003e\r\n \u003coption value=\"Opera\"\u003e\r\n \u003coption value=\"Safari\"\u003e\r\n \u003c/datalist\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The `\u003coutput\u003e` Element\r\n\r\nThe `\u003coutput\u003e` element represents the result of a calculation (like one performed by a script).\r\n\r\n**Example**:\r\nPerform a calculation and show the result in an `\u003coutput\u003e` element:\r\n```html\r\n\u003cform action=\"/action_page.php\" oninput=\"x.value=parseInt(a.value)+parseInt(b.value)\"\u003e\r\n 0\r\n \u003cinput type=\"range\" id=\"a\" name=\"a\" value=\"50\"\u003e\r\n 100 +\r\n \u003cinput type=\"number\" id=\"b\" name=\"b\" value=\"50\"\u003e\r\n =\r\n \u003coutput name=\"x\" for=\"a b\"\u003e\u003c/output\u003e\r\n \u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\"\u003e\r\n\u003c/form\u003e\r\n```\r\n---\r\n\r\n### HTML Input Types [⬆️](#table-of-contents)\r\n\r\nThis chapter describes the different types for the HTML `\u003cinput\u003e` element.\r\n\r\n#### HTML Input Types\r\n\r\nHere are the different input types you can use in HTML:\r\n\r\n```\r\n \u003cinput type=\"button\"\u003e\r\n \u003cinput type=\"checkbox\"\u003e\r\n \u003cinput type=\"color\"\u003e\r\n \u003cinput type=\"date\"\u003e\r\n \u003cinput type=\"datetime-local\"\u003e\r\n \u003cinput type=\"email\"\u003e\r\n \u003cinput type=\"file\"\u003e\r\n \u003cinput type=\"hidden\"\u003e\r\n \u003cinput type=\"image\"\u003e\r\n \u003cinput type=\"month\"\u003e\r\n \u003cinput type=\"number\"\u003e\r\n \u003cinput type=\"password\"\u003e\r\n \u003cinput type=\"radio\"\u003e\r\n \u003cinput type=\"range\"\u003e\r\n \u003cinput type=\"reset\"\u003e\r\n \u003cinput type=\"search\"\u003e\r\n \u003cinput type=\"submit\"\u003e\r\n \u003cinput type=\"tel\"\u003e\r\n \u003cinput type=\"text\"\u003e\r\n \u003cinput type=\"time\"\u003e\r\n \u003cinput type=\"url\"\u003e\r\n \u003cinput type=\"week\"\u003e\r\n```\r\n\r\nTip: The default value of the type attribute is `\"text\"`.\r\n\r\n#### Input Type Text\r\n\r\n`\u003cinput type=\"text\"\u003e` defines a single-line text input field:\r\n\r\n**Example**\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThis is how the HTML code above will be displayed in a browser:\r\n\r\n\u003cimg src=\"./Images/pro/nn5.jpg\"\u003e\r\n\r\n#### Input Type Password\r\n\r\n`\u003cinput type=\"password\"\u003e` defines a password field:\r\n\r\n**Example**\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"username\"\u003eUsername:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"username\" name=\"username\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"pwd\"\u003ePassword:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"password\" id=\"pwd\" name=\"pwd\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThis is how the HTML code above will be displayed in a browser:\r\n\r\n\u003cimg src=\"./Images/pro/nn9.jpg\"\u003e\r\n\r\nThe characters in a password field are masked (shown as asterisks or circles).\r\n\r\n#### Input Type Submit\r\n\r\n`\u003cinput type=\"submit\"\u003e` defines a button for submitting form data to a form-handler.\r\n\r\nThe form-handler is typically a server page with a script for processing input data.\r\n\r\nThe form-handler is specified in the form's action attribute:\r\n\r\n**Example**\r\n```html\r\n\u003cform action=\"/action_page.php\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" value=\"John\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThis is how the HTML code above will be displayed in a browser:\r\n\r\n\u003cimg src=\"./Images/pro/nn8.jpg\"\u003e\r\n\r\nIf you omit the submit button's `value` attribute, the button will get a default text:\r\n\r\n**Example**\r\n```html\r\n\u003cform action=\"/action_page.php\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" value=\"John\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### Input Type Reset\r\n\r\n`\u003cinput type=\"reset\"\u003e` defines a reset button that will reset all form values to their default values:\r\n\r\n**Example**\r\n```html\r\n\u003cform action=\"/action_page.php\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" value=\"John\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n \u003cinput type=\"reset\" value=\"Reset\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThis is how the HTML code above will be displayed in a browser:\r\n\r\n\u003cimg src=\"./Images/pro/nn10.jpg\"\u003e\r\n\r\n#### Input Type Radio\r\n\r\n`\u003cinput type=\"radio\"\u003e` defines a radio button.\r\n\r\nRadio buttons let a user select **ONLY ONE** of a limited number of choices:\r\n\r\n**Example**\r\n```html\r\n\u003cp\u003eChoose your favorite Web language:\u003c/p\u003e\r\n\r\n\u003cform\u003e\r\n \u003cinput type=\"radio\" id=\"html\" name=\"fav_language\" value=\"HTML\"\u003e\r\n \u003clabel for=\"html\"\u003eHTML\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"radio\" id=\"css\" name=\"fav_language\" value=\"CSS\"\u003e\r\n \u003clabel for=\"css\"\u003eCSS\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"radio\" id=\"javascript\" name=\"fav_language\" value=\"JavaScript\"\u003e\r\n \u003clabel for=\"javascript\"\u003eJavaScript\u003c/label\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThis is how the HTML code above will be displayed in a browser:\r\n\r\n\u003cimg src=\"./Images/pro/nn11.jpg\"\u003e \r\n\r\n#### Input Type Checkbox\r\n\r\n`\u003cinput type=\"checkbox\"\u003e` defines a checkbox.\r\n\r\nCheckboxes let a user select **ZERO or MORE** options of a limited number of choices.\r\n\r\n**Example**\r\n```html\r\n\u003cform\u003e\r\n \u003cinput type=\"checkbox\" id=\"vehicle1\" name=\"vehicle1\" value=\"Bike\"\u003e\r\n \u003clabel for=\"vehicle1\"\u003e I have a bike\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"checkbox\" id=\"vehicle2\" name=\"vehicle2\" value=\"Car\"\u003e\r\n \u003clabel for=\"vehicle2\"\u003e I have a car\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"checkbox\" id=\"vehicle3\" name=\"vehicle3\" value=\"Boat\"\u003e\r\n \u003clabel for=\"vehicle3\"\u003e I have a boat\u003c/label\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThis is how the HTML code above will be displayed in a browser:\r\n\r\n\u003cimg src=\"./Images/pro/nn7.jpg\"\u003e \r\n\r\n#### Input Type Button\r\n\r\n`\u003cinput type=\"button\"\u003e` defines a button:\r\n\r\n**Example**\r\n```html\r\n\u003cinput type=\"button\" onclick=\"alert('Hello World!')\" value=\"Click Me!\"\u003e\r\n```\r\n\r\nThis is how the HTML code above will be displayed in a browser:\r\n\r\n#### Input Type Color\r\n\r\nThe `\u003cinput type=\"color\"\u003e` is used for input fields that should contain a color.\r\n\r\nDepending on browser support, a color picker can show up in the input field.\r\n\r\n**Example**\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"favcolor\"\u003eSelect your favorite color:\u003c/label\u003e\r\n \u003cinput type=\"color\" id=\"favcolor\" name=\"favcolor\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### Input Type Date\r\n\r\nThe `\u003cinput type=\"date\"\u003e` is used for input fields that should contain a date.\r\n\r\nDepending on browser support, a date picker can show up in the input field.\r\n\r\n**Example**\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"birthday\"\u003eBirthday:\u003c/label\u003e\r\n \u003cinput type=\"date\" id=\"birthday\" name=\"birthday\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nYou can also use the `min` and `max` attributes to add restrictions to dates:\r\n\r\n**Example**\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"datemax\"\u003eEnter a date before 1980-01-01:\u003c/label\u003e\r\n \u003cinput type=\"date\" id=\"datemax\" name=\"datemax\" max=\"1979-12-31\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003clabel for=\"datemin\"\u003eEnter a date after 2000-01-01:\u003c/label\u003e\r\n \u003cinput type=\"date\" id=\"datemin\" name=\"datemin\" min=\"2000-01-02\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### Input Type Datetime-local\r\n\r\nThe `\u003cinput type=\"datetime-local\"\u003e` specifies a date and time input field, with no time zone.\r\n\r\nDepending on browser support, a date picker can show up in the input field.\r\n\r\n**Example**\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"birthdaytime\"\u003eBirthday (date and time):\u003c/label\u003e\r\n \u003cinput type=\"datetime-local\" id=\"birthdaytime\" name=\"birthdaytime\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n---\r\n\r\n\r\n### HTML Input Attributes [⬆️](#table-of-contents)\r\n\r\nThis chapter describes the different attributes for the HTML `\u003cinput\u003e` element.\r\n\r\n#### The value Attribute\r\n\r\nThe input value attribute specifies an initial value for an input field:\r\n\r\n**Example**\r\n\r\nInput fields with initial (default) values:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" value=\"John\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The readonly Attribute\r\n\r\nThe input readonly attribute specifies that an input field is read-only.\r\n\r\nA read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).\r\n\r\nThe value of a read-only input field will be sent when submitting the form!\r\n\r\n**Example**\r\n\r\nA read-only input field:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" value=\"John\" readonly\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The disabled Attribute\r\n\r\nThe input disabled attribute specifies that an input field should be disabled.\r\n\r\nA disabled input field is unusable and un-clickable.\r\n\r\nThe value of a disabled input field will not be sent when submitting the form!\r\n\r\n**Example**\r\n\r\nA disabled input field:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" value=\"John\" disabled\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The size Attribute\r\n\r\nThe input size attribute specifies the visible width, in characters, of an input field.\r\n\r\nThe default value for size is 20.\r\n\r\n**Note:** The size attribute works with the following input types: text, search, tel, url, email, and password.\r\n\r\n**Example**\r\n\r\nSet a width for an input field:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" size=\"50\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"pin\"\u003ePIN:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"pin\" name=\"pin\" size=\"4\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The maxlength Attribute\r\n\r\nThe input maxlength attribute specifies the maximum number of characters allowed in an input field.\r\n\r\n**Note:** When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.\r\n\r\n**Example**\r\n\r\nSet a maximum length for an input field:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" size=\"50\"\u003e\u003cbr\u003e\r\n \u003clabel for=\"pin\"\u003ePIN:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"pin\" name=\"pin\" maxlength=\"4\" size=\"4\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The min and max Attributes\r\n\r\nThe input min and max attributes specify the minimum and maximum values for an input field.\r\n\r\nThe min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.\r\n\r\n**Tip:** Use the max and min attributes together to create a range of legal values.\r\n\r\n**Example**\r\n\r\nSet a max date, a min date, and a range of legal values:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"datemax\"\u003eEnter a date before 1980-01-01:\u003c/label\u003e\r\n \u003cinput type=\"date\" id=\"datemax\" name=\"datemax\" max=\"1979-12-31\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n\r\n \u003clabel for=\"datemin\"\u003eEnter a date after 2000-01-01:\u003c/label\u003e\r\n \u003cinput type=\"date\" id=\"datemin\" name=\"datemin\" min=\"2000-01-02\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n\r\n \u003clabel for=\"quantity\"\u003eQuantity (between 1 and 5):\u003c/label\u003e\r\n \u003cinput type=\"number\" id=\"quantity\" name=\"quantity\" min=\"1\" max=\"5\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The multiple Attribute\r\n\r\nThe input multiple attribute specifies that the user is allowed to enter more than one value in an input field.\r\n\r\nThe multiple attribute works with the following input types: email, and file.\r\n\r\n**Example**\r\n\r\nA file upload field that accepts multiple values:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"files\"\u003eSelect files:\u003c/label\u003e\r\n \u003cinput type=\"file\" id=\"files\" name=\"files\" multiple\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The pattern Attribute\r\n\r\nThe input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted.\r\n\r\nThe pattern attribute works with the following input types: text, date, search, url, tel, email, and password.\r\n\r\n**Tip:** Use the global title attribute to describe the pattern to help the user.\r\n\r\n**Tip:** Learn more about regular expressions in our JavaScript tutorial.\r\n\r\n**Example**\r\n\r\nAn input field that can contain only three letters (no numbers or special characters):\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"country_code\"\u003eCountry code:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"country_code\" name=\"country_code\"\r\n pattern=\"[A-Za-z]{3}\" title=\"Three letter country code\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The placeholder Attribute\r\n\r\nThe input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).\r\n\r\nThe short hint is displayed in the input field before the user enters a value.\r\n\r\nThe placeholder attribute works with the following input types: text, search, url, number, tel, email, and password.\r\n\r\n**Example**\r\n\r\nAn input field with a placeholder text:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"phone\"\u003eEnter a phone number:\u003c/label\u003e\r\n \u003cinput type=\"tel\" id=\"phone\" name=\"phone\"\r\n placeholder=\"123-45-678\"\r\n pattern=\"[0-9]{3}-[0-9]{2}-[0-9]{3}\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The required Attribute\r\n\r\nThe input required attribute specifies that an input field must be filled out before submitting the form.\r\n\r\nThe required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.\r\n\r\n**Example**\r\n\r\nA required input field:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"username\"\u003eUsername:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"username\" name=\"username\" required\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The step Attribute\r\n\r\nThe input step attribute specifies the legal number intervals for an input field.\r\n\r\n**Example:** if step=\"3\", legal numbers could be -3, 0, 3, 6, etc.\r\n\r\n**Tip:** This attribute can be used together with the max and min attributes to create a range of legal values.\r\n\r\nThe step attribute works with the following input types: number, range, date, datetime-local, month, time and week.\r\n\r\n**Example**\r\n\r\nAn input field with a specified legal number intervals:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"points\"\u003ePoints:\u003c/label\u003e\r\n \u003cinput type=\"number\" id=\"points\" name=\"points\" step=\"3\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n**Note:** Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must also be checked by the receiver (the server)!\r\n\r\n#### The autofocus Attribute\r\n\r\nThe input autofocus attribute specifies that an input field should automatically get focus when the page loads.\r\n\r\n**Example**\r\n\r\nLet the \"First name\" input field automatically get focus when the page loads:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\" autofocus\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\u003cbr\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The height and width Attributes\r\n\r\nThe input height and width attributes specify the height and width of an `\u003cinput type=\"image\"\u003e` element.\r\n\r\n**Tip:** Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. Without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).\r\n\r\n**Example**\r\n\r\nDefine an image as the submit button, with height and width attributes:\r\n```html\r\n\u003cform\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"image\" src=\"img_submit.gif\" alt=\"Submit\" width=\"48\" height=\"48\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The list Attribute\r\n\r\nThe input list attribute refers to a `\u003cdatalist\u003e` element that contains pre-defined options for an `\u003cinput\u003e` element.\r\n\r\n\r\n\r\n**Example**\r\n\r\nAn `\u003cinput\u003e` element with pre-defined values in a `\u003cdatalist\u003e`:\r\n```html\r\n\u003cform\u003e\r\n \u003cinput list=\"browsers\"\u003e\r\n \u003cdatalist id=\"browsers\"\u003e\r\n \u003coption value=\"Edge\"\u003e\r\n \u003coption value=\"Firefox\"\u003e\r\n \u003coption value=\"Chrome\"\u003e\r\n \u003coption value=\"Opera\"\u003e\r\n \u003coption value=\"Safari\"\u003e\r\n \u003c/datalist\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The autocomplete Attribute\r\n\r\nThe input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.\r\n\r\nAutocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.\r\n\r\nThe autocomplete attribute works with `\u003cform\u003e` and the following `\u003cinput\u003e` types: text, search, url, tel, email, password, datepickers, range, and color.\r\n\r\n**Example**\r\n\r\nAn HTML form with autocomplete on, and off for one input field:\r\n```html\r\n\u003cform action=\"/action_page.php\" autocomplete=\"on\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e\r\n \u003cinput type=\"email\" id=\"email\" name=\"email\" autocomplete=\"off\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n\u003c/form\u003e \r\n```\r\n---\r\n\r\n### HTML Input Form Attributes [⬆️](#table-of-contents)\r\n\r\nThis chapter describes the different form attributes for the HTML `\u003cinput\u003e` element.\r\n\r\n#### The form Attribute\r\n\r\nThe input form attribute specifies the form the `\u003cinput\u003e` element belongs to.\r\n\r\nThe value of this attribute must be equal to the `id` attribute of the `\u003cform\u003e` element it belongs to.\r\n\r\n##### Example\r\n\r\nAn input field located outside of the HTML form (but still a part of the form):\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\" id=\"form1\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n\u003c/form\u003e\r\n\r\n\u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\r\n\u003cinput type=\"text\" id=\"lname\" name=\"lname\" form=\"form1\"\u003e\r\n```\r\n\r\n#### The formaction Attribute\r\n\r\nThe input formaction attribute specifies the URL of the file that will process the input when the form is submitted.\r\n\r\n**Note:** This attribute overrides the action attribute of the `\u003cform\u003e` element.\r\n\r\nThe formaction attribute works with the following input types: `submit` and `image`.\r\n\r\n##### Example\r\n\r\nAn HTML form with two submit buttons, with different actions:\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n \u003cinput type=\"submit\" formaction=\"/action_page2.php\" value=\"Submit as Admin\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The formenctype Attribute\r\n\r\nThe input formenctype attribute specifies how the form-data should be encoded when submitted (only for forms with `method=\"post\"`).\r\n\r\n**Note:** This attribute overrides the enctype attribute of the `\u003cform\u003e` element.\r\n\r\nThe formenctype attribute works with the following input types: `submit` and `image`.\r\n\r\n#### Example\r\n\r\nA form with two submit buttons. The first sends the form-data with default encoding, the second sends the form-data encoded as \"multipart/form-data\":\r\n\r\n```html\r\n\u003cform action=\"/action_page_binary.asp\" method=\"post\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n \u003cinput type=\"submit\" formenctype=\"multipart/form-data\" value=\"Submit as Multipart/form-data\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The formmethod Attribute\r\n\r\nThe input formmethod attribute defines the HTTP method for sending form-data to the action URL.\r\n\r\n**Note:** This attribute overrides the method attribute of the `\u003cform\u003e` element.\r\n\r\nThe formmethod attribute works with the following input types: `submit` and `image`.\r\n\r\nThe form-data can be sent as URL variables (`method=\"get\"`) or as an HTTP post transaction (`method=\"post\"`).\r\n\r\n#### Notes on the \"get\" method:\r\n\r\n- This method appends the form-data to the URL in name/value pairs.\r\n- This method is useful for form submissions where a user wants to bookmark the result.\r\n- There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred.\r\n- Never use the \"get\" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)\r\n\r\n#### Notes on the \"post\" method:\r\n\r\n- This method sends the form-data as an HTTP post transaction.\r\n- Form submissions with the \"post\" method cannot be bookmarked.\r\n- The \"post\" method is more robust and secure than \"get\", and \"post\" does not have size limitations.\r\n\r\n##### Example\r\n\r\nA form with two submit buttons. The first sends the form-data with `method=\"get\"`. The second sends the form-data with `method=\"post\"`:\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\" method=\"get\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit using GET\"\u003e\r\n \u003cinput type=\"submit\" formmethod=\"post\" value=\"Submit using POST\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The formtarget Attribute\r\n\r\nThe input formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.\r\n\r\n**Note:** This attribute overrides the target attribute of the `\u003cform\u003e` element.\r\n\r\nThe formtarget attribute works with the following input types: `submit` and `image`.\r\n\r\n##### Example\r\n\r\nA form with two submit buttons, with different target windows:\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\"\u003e\r\n \u003clabel for=\"fname\"\u003eFirst name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"fname\" name=\"fname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003clabel for=\"lname\"\u003eLast name:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"lname\" name=\"lname\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n \u003cinput type=\"submit\" formtarget=\"_blank\" value=\"Submit to a new window/tab\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The formnovalidate Attribute\r\n\r\nThe input formnovalidate attribute specifies that an `\u003cinput\u003e` element should not be validated when submitted.\r\n\r\n**Note:** This attribute overrides the novalidate attribute of the `\u003cform\u003e` element.\r\n\r\nThe formnovalidate attribute works with the following input types: `submit`.\r\n\r\n##### Example\r\n\r\nA form with two submit buttons (with and without validation):\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\"\u003e\r\n \u003clabel for=\"email\"\u003eEnter your email:\u003c/label\u003e\r\n \u003cinput type=\"email\" id=\"email\" name=\"email\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n \u003cinput type=\"submit\" formnovalidate=\"formnovalidate\" value=\"Submit without validation\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n#### The novalidate Attribute\r\n\r\nThe novalidate attribute is a `\u003cform\u003e` attribute.\r\n\r\nWhen present, novalidate specifies that all of the form-data should not be validated when submitted.\r\n\r\n##### Example\r\n\r\nSpecify that no form-data should be validated on submit:\r\n\r\n```html\r\n\u003cform action=\"/action_page.php\" novalidate\u003e\r\n \u003clabel for=\"email\"\u003eEnter your email:\u003c/label\u003e\r\n \u003cinput type=\"email\" id=\"email\" name=\"email\"\u003e\u003cbr\u003e\u003cbr\u003e\r\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n---\r\n\r\n\r\n**HTML Graphics** COMING SOON\r\n\r\n\r\n---\r\n\r\n\r\n\r\n\r\n### HTML References [⬆️](#table-of-contents)\r\n\r\n1. **HTML Tag List**: [W3Schools HTML Tags](https://www.w3schools.com/tags/default.asp)\r\n2. **HTML Attributes**: [MDN Web Docs - HTML Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)\r\n3. **HTML Global Attributes**: [MDN Web Docs - Global Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)\r\n4. **HTML Browser Support**: [Can I Use](https://caniuse.com/) - Check compatibility of HTML elements and attributes across browsers.\r\n5. **HTML Events**: [MDN Web Docs - HTML DOM Events](https://developer.mozilla.org/en-US/docs/Web/Events)\r\n6. **HTML Colors**: [W3Schools HTML Colors](https://www.w3schools.com/colors/default.asp)\r\n7. **HTML Canvas**: [MDN Web Docs - Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)\r\n8. **HTML Audio/Video**: [MDN Web Docs - Using audio and video in HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) and [video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)\r\n9. **HTML Doctypes**: [W3Schools - HTML Doctype](https://www.w3schools.com/tags/tag_doctype.asp)\r\n10. **HTML Character Sets**: [MDN Web Docs - Character sets](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#character_set)\r\n11. **HTML URL Encode**: [URL Encoding Reference](https://www.w3schools.com/tags/ref_urlencode.asp)\r\n12. **HTML Lang Codes**: [IANA Language Subtag Registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\r\n13. **HTTP Messages**: [MDN Web Docs - HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)\r\n14. **HTTP Methods**: [MDN Web Docs - HTTP Methods](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)\r\n15. **PX to EM Converter**: [PX to EM Conversion Tool](https://www.pxtoem.com/)\r\n16. **Keyboard Shortcuts**: [MDN Web Docs - Keyboard Shortcuts](https://developer.mozilla.org/en-US/docs/MDN/Contributing/Keyboard_shortcuts)\r\n\r\nIf you need more detailed information on any specific topic, let me know!\r\n\r\n---\r\n\r\n\r\n\u003cp align=\"center\"\u003e🙏 kindly follow and give a star 🙏\u003cbr\u003e you can also fork this to contribute\u003c/p\u003e\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-young-programer%2Ftutorial_html-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthe-young-programer%2Ftutorial_html-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-young-programer%2Ftutorial_html-css/lists"}