{"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","funding_links":[],"categories":[],"sub_categories":[],"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 ","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"}