{"id":19606758,"url":"https://github.com/learnwithfair/html-documentation","last_synced_at":"2026-02-26T18:38:19.393Z","repository":{"id":237356829,"uuid":"794366487","full_name":"learnwithfair/html-documentation","owner":"learnwithfair","description":"html-documentation with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]","archived":false,"fork":false,"pushed_at":"2024-05-01T02:03:50.000Z","size":10955,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-26T16:50:00.118Z","etag":null,"topics":["documentation","html","html-documentation","html5","learn-with-fair","learnwithfair","rahatul-rabbi","rahatulrabbi"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/learnwithfair.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-05-01T01:47:41.000Z","updated_at":"2025-01-01T18:30:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"a91fb585-c502-4e58-84c0-84b1035a11b0","html_url":"https://github.com/learnwithfair/html-documentation","commit_stats":null,"previous_names":["learnwithfair/html-documentation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/learnwithfair/html-documentation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fhtml-documentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fhtml-documentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fhtml-documentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fhtml-documentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learnwithfair","download_url":"https://codeload.github.com/learnwithfair/html-documentation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fhtml-documentation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29867571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T18:27:06.972Z","status":"ssl_error","status_checked_at":"2026-02-26T18:26:57.848Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["documentation","html","html-documentation","html5","learn-with-fair","learnwithfair","rahatul-rabbi","rahatulrabbi"],"created_at":"2024-11-11T10:07:07.011Z","updated_at":"2026-02-26T18:38:19.375Z","avatar_url":"https://github.com/learnwithfair.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML-DOCUMENTATION\n\nThanks for visiting my GitHub account!\n\n\u003cimg src =\"https://cdn0.iconfinder.com/data/icons/social-network-9/50/22-512.png\" height = \"200px\" width = \"200px\"/\u003e **HyperText Markup Language (HTML)** is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. [more](https://www.w3schools.com/html/html_intro.asp)\n\n### What is HTML?\n\n- HTML stands for Hyper Text Markup Language\n- HTML is the standard markup language for creating Web pages\n- HTML describes the structure of a Web page\n- HTML consists of a series of elements\n- HTML elements tell the browser how to display the content\n- HTML elements label pieces of content such as \"this is a heading\", \"this is a paragraph\", \"this is a link\", etc.\n\n### [Code-Example](https://github.com/learnwithfair/HTML)\n\n## Source Code (Download)\n\n[Click Here](https://mega.nz/folder/RGFiUApD#PoKIVCwF8IkQhE2PHw1XxQ)\n\n## Required Software (Download)\n\n- VS Code, Download -\u003ehttps://code.visualstudio.com/download\n\n## Project Overview\n\n|                                           |\n| :---------------------------------------: |\n|                  Roadmap                  |\n| ![roadmap](images/full-stuck-roadmap.png) |\n\n|                              |\n| :--------------------------: |\n|           Overview           |\n| ![overview](images/html.png) |\n\n|                                |\n| :----------------------------: |\n|            Outline             |\n| ![outline](images/outline.png) |\n\n## Table of Contents\n\n1. [Introduction to HTML](#1-introduction-to-html)\n   - [What is HTML \u0026 Why HTML?](#11-what-is-html--why-html)\n   - [History of HTML](#12-history-of-html)\n   - [Advantages and disadvantages of HTML](#13-advantages-and-disadvantages-of-html)\n2. [Basic HTML](#2-basic-html)\n\n   - [Tags, contents, elements, attributes](#21-tag-content-attribute-element)\n   - [Debugging](#22-debugging)\n   - [Text Formatting tags](#23-text-formatting-tags)\n   - [Entity, comment, Symbol, Color](#24-entity-comment-symbol-color)\n   - [List - Ordered, Unordered, Description](#25-list---ordered-unordered-description)\n   - [Link](#26-link)\n   - [Image and iframe](#27-image-and-iframe)\n   - [Table](#28-table)\n   - [Form](#29-form)\n\n3. [Advanced HTML](#3-advanced-html)\n\n   - [Multimedia - audio, video](#31-multimedia---audio-video)\n   - [Meta tags \u0026 SEO](#32-meta-tags--seo)\n   - [Semantic HTML](#33-sematic-html)\n   - [Web accessibility](#34-web-accessibility)\n   - [Graphics](#35-graphics)\n   - [HTML5 API](#36-html5-api)\n   - [HTML Templates and Web Components](#37-html-templates-and-web-components)\n\n## 1. Introduction to html\n\n- What is HTML and its role in web development?\n- History of HTML\n- Advantages \u0026 disadvantages of HTML\n\n### 1.1 What is HTML \u0026 Why HTML\n\n- HTML stands for HyperText Markup Language\n- It is not a **programming language** but markup language where tags are responsible for defining the elements and layout of a webpage, including headings, paragraphs, images, links, and more.\n\n### 1.2 History of HTML\n\n- Tim Berners-Lee created HTML in 1990\n- HTML 1.0 - 1990\n  HTML 2.0 - 1993\n  HTML 3.0 - 1995 (Not fully implemented)\n  HTML 3.2 - 1997\n  HTML 4.0 - 1997\n  HTML 4.01 - 1999\n  HTML5 - 2014 (Ongoing development with subsequent versions like HTML5.1, HTML5.2, etc.)\n\n### 1.3 Advantages and disadvantages of HTML\n\n- Advantages of HTML:\n\n1. **Easy to Learn**: HTML has a simple and straightforward syntax, making it easy for beginners to learn and understand.\n\n2. **Platform Independent**: HTML is platform-independent and can be used on any operating system or device that has a web browser.\n\n3. **Wide Browser Support**: HTML is supported by all major web browsers, ensuring compatibility and accessibility across different platforms.\n\n- Disadvantages of HTML:\n\n1. **Limited Styling Options**: HTML has limited styling capabilities compared to CSS (Cascading Style Sheets). While HTML can define basic styles, more complex and detailed styling is better achieved using CSS.\n\n2. **Lack of Interactivity**: HTML on its own is static and lacks interactivity. To add dynamic behavior or functionality to web pages, additional technologies such as JavaScript or server-side languages are required.\n\n3. **Browser Compatibility Issues**: Different web browsers may interpret HTML code differently, leading to potential compatibility issues. Developers must test and ensure cross-browser compatibility.\n\n4. **Security Risks**: HTML alone does not provide built-in security features. Web developers must implement security measures and follow best practices to protect against vulnerabilities, such as cross-site scripting (XSS) attacks.\n\n## 2. Basic HTML\n\n- Tags, element, attributes, basic strcuture of HTML, text formatting tags, links, images, lists, tables, basic forms\n\n### 2.1 Tag content attribute element\n\n#### What is Tag \u0026 its syntax?\n\n- Tag is the heart of html; HTML document is mainly built with tag.\n- Tag Syntax: `\u003ckeyword\u003e` ; Inside the angular brackets we need to write predefined keywords to use html tag.\n- Small / capital letters both can be used when writing html tag; however small letter is prefered.\n- Example: `\u003cp\u003e This is a paragraph \u003c/p\u003e`\n  In the example, `\u003cp\u003e` is an opening tag, `\u003c/p\u003e` is a closing tag and `This is a paragraph` is called content. In between the starting tag to end tag we have content. Everything from starting tag to end tag is called Element\n\n#### What are the types of Tag?\n\n- There are 2 types of html tag: Pair/container tag and empty tag\n- Pair tag has starting and ending; However, empty tag has no closing tag.\n- Some of the example of pair tag and empty tags are given below:\n\n  ```html\n  \u003c!-- Some examples of Pair/Container Tag --\u003e\n  \u003chtml\u003e\n    ...\n  \u003c/html\u003e\n  \u003chead\u003e\n    ...\n  \u003c/head\u003e\n  \u003cbody\u003e\n    ...\n  \u003c/body\u003e\n  \u003cp\u003e...\u003c/p\u003e\n  \u003ch1\u003e...\u003c/h1\u003e\n  \u003cscript\u003e\n    ...\n  \u003c/script\u003e\n  \u003cstyle\u003e\u003c/style\u003e\n  ....\n\n  \u003c!-- Some examples of Empty Tag --\u003e\n  \u003cmeta /\u003e\n  \u003clink /\u003e\n  \u003cbr /\u003e\n  \u003chr /\u003e\n  \u003cimg /\u003e\n  \u003cinput /\u003e\n  ...\n  ```\n\n#### What is attribute \u0026 how to use attribute?\n\n- Attribute helps tag to extend its capabilities\n- In the following example, `\u003cimg/\u003e` is tag; src, height, width are the attributes\n\n  ```html\n  \u003cimg src=\"anis.jpg\" height=\"200\" width=\"200\" /\u003e\n  ```\n\n- Attribute Syntax: `attributeName=\"attributeValue\"`\n\n#### HTML basic structure\n\n- HTML document has 2 important part: head, body\n- In the following example a basic structure of a HTML document\n\n  ```html\n  \u003c!DOCTYPE html\u003e\n  \u003chtml\u003e\n    \u003chead\u003e\n      TITLE, META TAG ETC.\n    \u003c/head\u003e\n    \u003cbody\u003e\n      CONTENT OF THE WEBPAGE\n    \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n\n- Always use `\u003c!DOCTYPE html\u003e` to tell the browser what type of document to expect; remember it is not a tag, just a declaration\n- Every HTML document must have `\u003chtml\u003e` pair tag and Inside `\u003chtml\u003e` tag we use `\u003chead\u003e` and `\u003cbody\u003e` as the example shows above.\n- Inside head tag we use meta tag, set title etc.\n- Inside body tag we write everything that we want to display on web page.\n\n#### Environment setup\n\n- Editor: VScode / Notepad++ / Sublime\n- Browser: Google Chrome / Firefox\n- Version Control: GitHub\n\n#### First HTML Program\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    This is my first webpage \u003cbr /\u003e\n    I am Anisul Islam \u003cbr /\u003e\n    A full stack web developer \u0026 passionate computer science teacher\u003cbr /\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n- Here, lang attribute refers to the language; attribute value en refers to english\n- Inside `\u003chead\u003e` tag we have set title of the webpage using `\u003ctitle\u003e` tag\n- Inside `\u003cbody\u003e` tag we are displaying some text. here `\u003cbr/\u003e` tag creates a line break\n\n#### Headings, Paragraph, Horizontal rule\n\n```html\n\u003cbody\u003e\n  \u003c!--6 heading tags--\u003e\n  \u003ch1\u003eThis is a h1\u003c/h1\u003e\n  \u003ch2\u003eThis is a h2\u003c/h2\u003e\n  \u003ch3\u003eThis is a h3\u003c/h3\u003e\n  \u003ch4\u003eThis is a h4\u003c/h4\u003e\n  \u003ch5\u003eThis is a h5\u003c/h5\u003e\n  \u003ch6\u003eThis is a h6\u003c/h6\u003e\n\n  \u003c!--to create a paragrap use p tag--\u003e\n  \u003cp\u003eThis is a paragraph. I am writing a paragraph here.\u003c/p\u003e\n\n  \u003c!--to create a horizontal rule use hr tag--\u003e\n  \u003chr size=\"2\" /\u003e\n\u003c/body\u003e\n```\n\n- output of the text-formatting tags is below:\n  ![headings](images/headings.png)\n\n- There are 6 HTML heading levels. `\u003ch1\u003e` is the largest level and `\u003ch6\u003e` is the smallest level.\n- by default, heading tags and paragraph tag create new line (block level element)\n- `\u003chr size=\"2\"/\u003e` here `\u003chr/\u003e` is an empty tag responsible for creating horizontal rule and size attribute set the heights of the horizontal rule in pixel\n\n#### Styling html elemnts\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n\n    \u003cstyle\u003e\n      body {\n        background-color: #222;\n      }\n      h1 {\n        /* color: white; */\n        /* color: #fff; */\n        color: rgb(255, 255, 255);\n        text-align: center;\n      }\n    \u003c/style\u003e\n\n    \u003ctitle\u003eDocument\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eBangladesh is my motherland. I miss Bangladesh a lot.\u003c/h1\u003e\n    \u003cp style=\"color: green;\"\u003eI also miss my family\u003c/p\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n- From the example, you can see that for styling html elements inside the html documents we can use style tag or style attribute\n- style attribute in HTML: style=\"property: value; property: value...\" (from the example you can see that `\u003cp\u003e` tag has style attribute where paragraph color is set as green)\n- style tag in HTML: `\u003cstyle\u003e ... \u003c/style\u003e` tag must be used inside the head tag as shown in this example. In this example you can see that `\u003ch1\u003e` and `\u003cbody\u003e` tag has styling property like color, text-align, background-color.\n- To set color of an html element we can use color name / hexadecimal color code / rgb color / hsl code as a value of color property as shown in this example for h1 tag.\n\n### 2.2 Debugging\n\n- Inspect Element: Within the browser developer tools, the \"Inspect Element\" feature allows you to examine and modify the HTML structure in real-time. You can navigate through the document tree, view CSS styles, and experiment with changes to identify and fix layout or formatting issues.\n- Use Comments: Insert comments (`\u003c!-- ... --\u003e`) within your HTML code to temporarily remove or isolate sections of code that might be causing issues. This helps you narrow down the problematic area and identify the source of the problem.\n- After writing your html code you can check the validity on this website https://validator.w3.org/\n\n### 2.3 Text Formatting tags\n\n- Text Formatting tags: Applying formatting to text using tags like strong, em, u, s, sup, sub, blockquote, and code.\n\n```html\n\u003cbody\u003e\n  \u003c!-- b(bold) and strong tag are quite similar --\u003e\n  \u003cb\u003eThis is a bold text\u003c/b\u003e \u003cbr /\u003e\n  \u003cstrong\u003eThis is a strong text\u003c/strong\u003e \u003cbr /\u003e\n\n  \u003c!-- i(italic) and em(emphasize) tag are quite similar --\u003e\n  \u003ci\u003eThis is a italic text\u003c/i\u003e \u003cbr /\u003e\n  \u003cem\u003eThis is a emphasize text\u003c/em\u003e \u003cbr /\u003e\n\n  \u003c!-- u(underline) --\u003e\n  \u003cu\u003eThis is a italic text\u003c/u\u003e \u003cbr /\u003e\n\n  \u003c!--tags can be used inside one another--\u003e\n  \u003cb\u003ebold. \u003ci\u003e italic and bold\u003c/i\u003e\u003c/b\u003e \u003cbr /\u003e\n\n  \u003cmark\u003eImportant task should be highlighted\u003c/mark\u003e \u003cbr /\u003e\n  \u003c!-- del (deleted) --\u003e\n  \u003cdel\u003eThis is a deleted text\u003c/del\u003e \u003cbr /\u003e\n\n  \u003c!-- sup (superscript), sub(subscript) --\u003e\n  H\u003csub\u003e2\u003c/sub\u003eO \u003cbr /\u003e\n  (a+b)\u003csup\u003e2\u003c/sup\u003e \u003cbr /\u003e\n\n  \u003c!-- pre tag helps to show text as you want to formatted --\u003e\n  \u003cpre\u003e\n      This is a\n        life changing documentation\n      Read,learn, enjoy\n        ofcourse share with others\n  \u003c/pre\u003e\n\n  \u003cabbr title=\"google is a search engine\"\u003eGoogle\u003c/abbr\u003e\n  \u003caddress\u003eAnisul Islam 192 anis road, London United Kingdom\u003c/address\u003e\n\n  \u003ch2\u003eWhat our customer thinks?\u003c/h2\u003e\n  \u003cblockquote\u003e\n    \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius\u003c/p\u003e\n    \u003cfooter\u003eJohn Doe\u003c/footer\u003e\n  \u003c/blockquote\u003e\n\n  \u003ccode\u003e console.log(\"hello\"); \u003c/code\u003e\n\u003c/body\u003e\n```\n\noutput of the text-formatting tags is below:\n![text formatting](images/text-formatting.png)\n\n- The `\u003cblockquote\u003e` tag is used to enclose a block of quoted text. It is commonly used to represent quotations, excerpts, or highlighted text. The `\u003cp\u003e` element inside the `\u003cblockquote\u003e` represents the quoted text, and the `\u003cfooter\u003e` element provides attribution or the source of the quote.\n\n- The `\u003ccode\u003e` tag is used to define a section of code or programming instructions. It is commonly used for displaying code snippets or highlighting code within a paragraph.\n\n### 2.4 Entity, comment, Symbol, Color\n\n#### Comment syntax example\n\n```html\n\u003c!-- This is a comment --\u003e\n```\n\n#### Entity syntax example\n\n```html\n\u0026copy; \u0026lt; \u0026gt; \u0026gt; \u0026hearts; \u0026nbsp;\n```\n\n- First example shows the example of a html comment\n- second example shows an example of entity\n- To create an entity first write \u0026 then give a keyword and then give a semicolon\n- `\u0026copy;` will create copyright symbol\n- `\u0026lt;` will create less than symbol\n- `\u0026gt;` will create greater than symbol\n- `\u0026hearts;` will create hearts symbol\n\n#### Sources for adding symbol, icons and emoji\n\n- Unicode character website: https://unicode-table.com/en/\n- W3School emoji link: https://www.w3schools.com/charsets/ref_emoji.asp\n- iconfinder icon link: https://www.iconfinder.com/\n\n- Pick image from [unsplash](https://unsplash.com/)\n- Choose color from\n\n  - [colorhunt](https://colorhunt.co/)\n  - [imagecolorpicker](https://imagecolorpicker.com/)\n  - [htmlcolorcodes](https://htmlcolorcodes.com/)\n\n### 2.5 List - Ordered, Unordered, Description\n\n- Adding list items (li) to organize and present information.\n- Mainly there are 3 types of list available in html: ordered list, unordered list, description list\n\n  - `ol` (ordered list) tag is used for creating ordered list.\n    - `\u003col type=\"...\"\u003e`: Specifies the type of ordered list markers. Values: \"1\" (default) for numeric markers, \"A\", \"a\", \"I\" for uppercase Roman numerals, and \"i\".\n    - `\u003col start=\"...\"\u003e`: Specifies the starting value of an ordered list.\n    - `\u003col reversed\u003e`: Reverses the order of the items in an ordered list.\n  - `ul` (unordered list) tag is used for creating unordered list.\n    - `\u003cul compact\u003e: Sets the spacing between list items to be more compact.`\n    - type Values: \"circle\" for circular markers, \"square\" for square markers, or \"disc\" for filled round markers.\n  - `dl` (description list) tag is used for creating description list, dt (description term), dd (description details)\n  - `li` (list) tag is a common tag for both ordered and unordered list\n    example\n\n  ```html\n  \u003cbody\u003e\n    \u003ch3\u003eWeb development front end skills\u003c/h3\u003e\n    \u003col\u003e\n      \u003cli\u003eHTML\u003c/li\u003e\n      \u003cli\u003eGitHub\u003c/li\u003e\n      \u003cli\u003eFigma\u003c/li\u003e\n      \u003cli\u003eCSS\u003c/li\u003e\n      \u003cli\u003eTailwind CSS / Bootstrap\u003c/li\u003e\n    \u003c/ol\u003e\n\n    \u003cdl\u003e\n      \u003cdt\u003eGoogle\u003c/dt\u003e\n      \u003cdd\u003eGoogle is a search engine\u003c/dd\u003e\n    \u003c/dl\u003e\n  \u003c/body\u003e\n  ```\n\n  output of the list code\n  ![list](images/list.png)\n\n### 2.6 Link\n\n- Linking to other pages within the website and external websites.\n- Creating hyperlinks using the `\u003ca\u003e ... \u003c/a\u003e` tag and understanding attributes like href, target, and rel.\n\n  - Inside `\u003ca\u003e` link `href=\"url\"` attribute is used where we give the address where we want to visit based on click\n  - Inside `\u003ca\u003e` link `target=\"_blank\"` attribute is used to open a new tab for the visited page/site\n  - As shown in the following example we can send email by clicking the link for that we have to use `href=\"mailto:EMAIL_ADDRESS_HERE\"`\n  - As shown in the following example we can call somone by clicking the link for that we have to use `href=\"tel:PHONE_NUMBER_HERE\"`\n\n  ```html\n  \u003cbody\u003e\n    \u003ch3\u003eContact Me\u003c/h3\u003e\n    \u003ca href=\"http://www.studywithanis.com\" target=\"_blank\"\u003ewebsite\u003c/a\u003e \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://www.youtube.com/c/anisulislamrubel\" target=\"_blank\"\n      \u003eYouTube\u003c/a\n    \u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"tel:0017444044000\" target=\"_blank\"\u003eCall me\u003c/a\u003e \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"mailto:anisul2010s@yahoo.co.uk\" target=\"_blank\"\u003eMail Me\u003c/a\u003e\n  \u003c/body\u003e\n  ```\n\n  output of the html link code\n  ![link](images/link.png)\n\n### 2.7 Image and iframe\n\n#### image\n\n- For adding image on webpage we use `\u003cimg /\u003e` tag as shown in the following example.\n- some common attribute for `\u003cimg /\u003e` tag: `src, alt, height, width, title`\n- syntax for adding image: `\u003cimg src=\"imagename\" alt=\"alternative\" title=\"profile image\"\u003e`\n- `src` attribute needs the image address\n- `alt` attribute shows some text about image if image is not found\n- `title` attribute shows some tooltip text when we hover over the image\n- `height` and `width` attribute helps us to set the height and width of image\n- `loading=\"lazy\"` if you have too many images and you want to load them lazily (after loading the other things first then you want to load images)\n- we can use `\u003cimg\u003e` tag inside of `\u003ca\u003e` tag so that when we click an image it will take us to a link. `\u003ca href=\"\" target=\"_blank\"\u003e \u003cimg src=\"\" alt=\"\" /\u003e \u003c/a\u003e`\n\n#### iframe\n\n- iframe helps us to display any website, youtube video or map inside our own webpage  \n  iframe Example\n\n  ```html\n  \u003ciframe\n    width=\"560\"\n    height=\"315\"\n    src=\"https://www.youtube.com/embed/oN8aS_HW4k8\"\n    title=\"YouTube video player\"\n    allowfullscreen\n  \u003e\n  \u003c/iframe\u003e\n  ```\n\n### 2.8 Table\n\n- Understanding table structure, headers, rows, colspan, rowspan and data cells.\n\n#### HTML Basic Table\n\n- `\u003ctable\u003e` tag is used to create table.\n- `\u003cthead\u003e` tag is used to create table head.\n- `\u003ctbody\u003e` tag is used to create table body.\n- `\u003ctfoot\u003e` tag is used to create table footer.\n- `\u003ctr\u003e` tag is used to create table row.\n- `\u003ctd\u003e` tag is used to create table data cell.\n- `\u003cth\u003e` tag is used to create table header cell.\n- `\u003ccaption\u003e` tag is used to create table caption.\n\n- Follow the image to understand td, tr,\n  ![table](images/table.png)\n\n  ```html\n  \u003cbody\u003e\n    \u003ctable\u003e\n      \u003ccaption\u003e\n        Student Table\n      \u003c/caption\u003e\n      \u003cthead\u003e\n        \u003ctr\u003e\n          \u003cth\u003eID\u003c/th\u003e\n          \u003cth\u003eName\u003c/th\u003e\n          \u003cth\u003eGPA\u003c/th\u003e\n        \u003c/tr\u003e\n      \u003c/thead\u003e\n      \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003e101\u003c/td\u003e\n          \u003ctd\u003eAnis\u003c/td\u003e\n          \u003ctd\u003e3.92\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003e102\u003c/td\u003e\n          \u003ctd\u003eRabeya\u003c/td\u003e\n          \u003ctd\u003e3.45\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003e103\u003c/td\u003e\n          \u003ctd\u003eRasel\u003c/td\u003e\n          \u003ctd\u003e3.45\u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/tbody\u003e\n    \u003c/table\u003e\n  \u003c/body\u003e\n  ```\n\n  output of the above html code\n  ![table2](images/table2.png)\n\n#### HTML Table rowspan, colspan\n\n- `rowspan=\"N\"` attribute is used to tell that a cell will expand N number of rows.\n- `colspan=\"N\"` attribute is used to tell that a cell will expand N number of columns.\n- An example of rowspan is given below:\n\n  ```html\n  \u003c!DOCTYPE html\u003e\n  \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n      \u003ctitle\u003eDocument\u003c/title\u003e\n\n      \u003cstyle\u003e\n        table,\n        th,\n        td {\n          border: 1px solid;\n          border-collapse: collapse;\n        }\n      \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003ctable\u003e\n        \u003ccaption\u003e\n          Student Table\n        \u003c/caption\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth\u003eID\u003c/th\u003e\n            \u003cth\u003eName\u003c/th\u003e\n            \u003cth\u003eGPA\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\n            \u003ctd\u003e101\u003c/td\u003e\n            \u003ctd\u003eAnis\u003c/td\u003e\n            \u003ctd\u003e3.92\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003e102\u003c/td\u003e\n            \u003ctd\u003eRabeya\u003c/td\u003e\n            \u003ctd rowspan=\"2\"\u003e3.45\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003e103\u003c/td\u003e\n            \u003ctd\u003eRasel\u003c/td\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n\n  output of the above html code\n  ![table3](images/table3.png)\n\n- An example of rowspan is given below:\n\n  ```html\n  \u003c!DOCTYPE html\u003e\n  \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n      \u003ctitle\u003eDocument\u003c/title\u003e\n\n      \u003cstyle\u003e\n        table,\n        th,\n        td {\n          border: 1px solid;\n          border-collapse: collapse;\n        }\n      \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003ctable\u003e\n        \u003ccaption\u003e\n          Student Table\n        \u003c/caption\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth\u003eID\u003c/th\u003e\n            \u003cth\u003eName\u003c/th\u003e\n            \u003cth colspan=\"2\"\u003ePhone\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\n            \u003ctd\u003e101\u003c/td\u003e\n            \u003ctd\u003eAnis\u003c/td\u003e\n            \u003ctd\u003e017\u003c/td\u003e\n            \u003ctd\u003e018\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003e102\u003c/td\u003e\n            \u003ctd\u003eRabeya\u003c/td\u003e\n            \u003ctd\u003e019\u003c/td\u003e\n            \u003ctd\u003e015\u003c/td\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n\n  output of the above html code\n  ![table4](images/table4.png)\n\n- An example of colspan and rowspan is given below:\n\n  ```html\n  \u003c!DOCTYPE html\u003e\n  \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n      \u003ctitle\u003eDocument\u003c/title\u003e\n\n      \u003cstyle\u003e\n        table,\n        th,\n        td {\n          border: 1px solid;\n          border-collapse: collapse;\n        }\n      \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003ctable\u003e\n        \u003ccaption\u003e\n          Student Table\n        \u003c/caption\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth\u003eID\u003c/th\u003e\n            \u003cth\u003eName\u003c/th\u003e\n            \u003cth\u003eGPA\u003c/th\u003e\n            \u003cth colspan=\"2\"\u003ePhone\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\n            \u003ctd\u003e101\u003c/td\u003e\n            \u003ctd\u003eAnis\u003c/td\u003e\n            \u003ctd rowspan=\"2\"\u003e3.45\u003c/td\u003e\n            \u003ctd\u003e017\u003c/td\u003e\n            \u003ctd\u003e018\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003e102\u003c/td\u003e\n            \u003ctd\u003eRabeya\u003c/td\u003e\n            \u003ctd\u003e019\u003c/td\u003e\n            \u003ctd\u003e015\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003e102\u003c/td\u003e\n            \u003ctd\u003eRabeya\u003c/td\u003e\n            \u003ctd\u003e3.95\u003c/td\u003e\n            \u003ctd\u003e019\u003c/td\u003e\n            \u003ctd\u003e015\u003c/td\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n\n  output of the above html code\n  ![table5](images/table5.png)\n\n#### Accessible table\n\n- `\u003cth scope=\"col/row\"\u003e`\n- An example of accessible table using scope is given below:\n\n  ```html\n  \u003c!DOCTYPE html\u003e\n  \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n      \u003ctitle\u003eDocument\u003c/title\u003e\n\n      \u003cstyle\u003e\n        table,\n        th,\n        td {\n          border: 1px solid;\n          border-collapse: collapse;\n        }\n      \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003ctable\u003e\n        \u003ccaption\u003e\n          Student Table\n        \u003c/caption\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth scope=\"col\"\u003eStudent ID\u003c/th\u003e\n            \u003cth scope=\"col\"\u003eName\u003c/th\u003e\n            \u003cth scope=\"col\"\u003eAge\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\n            \u003cth scope=\"row\"\u003e101\u003c/th\u003e\n            \u003ctd\u003eAnis\u003c/td\u003e\n            \u003ctd\u003e31\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003cth scope=\"row\"\u003e102\u003c/th\u003e\n            \u003ctd\u003eRabeya\u003c/td\u003e\n            \u003ctd\u003e30\u003c/td\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n\n  output of the above html code\n  ![table6](images/table6.png)\n\n  An example of table using `\u003ccolgroup\u003e \u0026 \u003ccol\u003e` tags is given below:\n\n  ```html\n  \u003c!DOCTYPE html\u003e\n  \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n      \u003ctitle\u003eDocument\u003c/title\u003e\n\n      \u003cstyle\u003e\n        table,\n        th,\n        td {\n          border: 1px solid;\n          border-collapse: collapse;\n        }\n      \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003ctable\u003e\n        \u003ccaption\u003e\n          Student Table\n        \u003c/caption\u003e\n        \u003ccolgroup\u003e\n          \u003ccol span=\"2\" style=\"background-color: tomato\" /\u003e\n        \u003c/colgroup\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth scope=\"col\"\u003eStudent ID\u003c/th\u003e\n            \u003cth scope=\"col\"\u003eName\u003c/th\u003e\n            \u003cth scope=\"col\"\u003eAge\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\n            \u003cth scope=\"row\"\u003e101\u003c/th\u003e\n            \u003ctd\u003eAnis\u003c/td\u003e\n            \u003ctd\u003e31\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003cth scope=\"row\"\u003e102\u003c/th\u003e\n            \u003ctd\u003eRabeya\u003c/td\u003e\n            \u003ctd\u003e30\u003c/td\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n\n  output of the above html code\n  ![table7](images/table7.png)\n\n### 2.9 Form\n\n- Using form controls like text inputs, checkboxes, radio buttons, dropdowns, and submit buttons.\n- HTML `\u003cform\u003e` Elements:\n\n  - `\u003cform\u003e` element is used to create a html form. form help us to collect user data.\n  - `\u003cinput /\u003e` element is the most used form element.\n  - `\u003clabel\u003e` element is used for labelling form elements. It helps the form elements accessible byguiding the screen reader. `\u003clabel for=\"name\"\u003e` element has `for=\"\"` attribute which value should be equal to `\u003cinput id=\"name\"/\u003e` element's id value.\n  - `\u003cselect\u003e` - helps to create dropdown menu.\n  - `\u003coptgroup label=\"programming\"\u003e` - helps to create options for dropdown menu.\n  - `\u003coption\u003e` - helps to create options for dropdown menu.\n  - `\u003ctextarea\u003e` - helps to create multiple lines text input field.\n  - `\u003cbutton\u003e` - helps to create button.\n  - `\u003cfieldset\u003e`\n  - `\u003clegend\u003e`\n  - `\u003coutput\u003e`\n  - `\u003cdatalist\u003e` \u0026 `list=\"\"` attributes\n\n- form tag attributes:\n\n  - `\u003cform action=\"/home\" method=\"post\" autocomplete=\"on\"\u003e`-\u003e enable the autocomplete option.\n  - `\u003cform action=\"/home\" method=\"post\" autocomplete=\"on\" enctype=\"text/plain\"\u003e`-\u003e sends data without encoding.\n  - `name=\"\"` attribute is used to set the name of any element which is essential for getting data in server side especially.\n\n- input tag type attribute\n\n  - `type=\"\"` attribute can change the visualization of `\u003cinput /\u003e` element.\n  - `\u003cinput type=\"text\"/\u003e` creates a single line text input field.\n  - `\u003cinput type=\"email\"/\u003e` creates a single line email input field.\n  - `\u003cinput type=\"password\"/\u003e` creates a single line password input field.\n  - `\u003cinput type=\"number\"/\u003e` creates a single line number input field.\n  - `\u003cinput type=\"checkbox\"/\u003e` creates a checkbox input field.\n  - `\u003cinput type=\"radio\"/\u003e` creates a radio button input field.\n  - `\u003cinput type=\"button\"/\u003e` creates a clikable button.\n  - `\u003cinput type=\"submit\"/\u003e` creates a submit button for form.\n  - `\u003cinput type=\"color\"/\u003e` creates a color picker input field.\n  - `\u003cinput type=\"date\"/\u003e` creates a date picker.\n  - `\u003cinput type=\"month\"/\u003e` creates a month picker.\n  - `\u003cinput type=\"time\"/\u003e` creates a time picker.\n  - `\u003cinput type=\"week\"/\u003e` creates a week picker.\n  - `\u003cinput type=\"image\"/\u003e` creates a image selector.\n  - `\u003cinput type=\"file\"/\u003e` creates a file selector.\n  - `\u003cinput type=\"url\"/\u003e` creates a url selector.\n  - `\u003cinput type=\"tel\"/\u003e` creates a input field for telephone number.\n  - `\u003cinput type=\"search\"/\u003e` is used for searching.\n  - `\u003cinput type=\"hidden\"/\u003e` creates a input field which is not visible to user.\n  - `\u003cinput type=\"range\" min=\"\" max=\"\"/\u003e` creates a range by setting min and max value, default range is 0 to 100.\n\n  ```html\n  \u003cfieldset\u003e\n    \u003clegend\u003eContact Me\u003c/legend\u003e\n    \u003clabel for=\"email\"\u003e Email: \u003c/label\u003e\n    \u003cinput type=\"email\" id=\"email\" /\u003e\n  \u003c/fieldset\u003e\n  ```\n\n- HTML Forms Validation:\n\n  - `required` attribute specifies that an input element must be filled before submitting the form.\n  - `max=\"\"` attribute is used to set the maximum input value for an input field.\n  - `min=\"\"` attribute is used to set the minimum input value for an input field.\n  - `pattern=\"\"` attribute is used to set a regular expression for validating an input field.\n\n- others\n\n  - `value=\"\"` attribute is used to set initial value for input field.\n  - `readonly` attribute is used to set an input field as readonly.\n  - `checked` attribute is used to set an input field already checked.\n  - `disabled` attribute is used to make a input field disable.\n  - `size=\"\"` attribute is used to set the number of characters for an input field.\n  - `maxlength=\"\"` attribute is used to set the maximum number of characters for an input field.\n\n  - `placeholder=\"\"` attribute is used to give a hint to the users.\n\n  - `step=\"\"` attribute specifies steps for input field.\n  - `autofocus` attribute makes an input field automatically focus when the page is loaded.\n  - `height=\"\" width=\"\"` attribute is used to set input elements height and width.\n  - `list=\"id_of_datalist\"` attribute is used to set input elements height and width.\n\n- A form example is given below:\n\n  ```html\n  \u003cform action=\"/\" method=\"post\"\u003e\n    \u003cdiv\u003e\n      \u003cdatalist id=\"usernames\"\u003e\n        \u003coption value=\"anis\"\u003e\u003c/option\u003e\n        \u003coption value=\"linkon\"\u003e\u003c/option\u003e\n        \u003coption value=\"ridoy\"\u003e\u003c/option\u003e\n      \u003c/datalist\u003e\n\n      \u003clabel for=\"username\"\u003eUsername: \u003c/label\u003e\n      \u003cinput\n        type=\"text\"\n        id=\"username\"\n        name=\"username\"\n        size=\"30\"\n        autofocus\n        required\n        list=\"usernames\"\n      /\u003e\n    \u003c/div\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"password\"\u003ePassword: \u003c/label\u003e\n      \u003cinput type=\"password\" id=\"password\" name=\"password\" required /\u003e\n    \u003c/div\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"email\"\u003eEmail: \u003c/label\u003e\n      \u003cinput type=\"email\" id=\"email\" name=\"email\" autocomplete /\u003e\n    \u003c/div\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"phone\"\u003ephone: \u003c/label\u003e\n      \u003cinput type=\"tel\" id=\"phone\" name=\"phone\" /\u003e\n    \u003c/div\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"dob\"\u003eDate of birth: \u003c/label\u003e\n      \u003cinput type=\"date\" id=\"dob\" name=\"dob\" /\u003e\n    \u003c/div\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"month\"\u003efavourite Month: \u003c/label\u003e\n      \u003cinput type=\"month\" id=\"month\" name=\"month\" /\u003e\n    \u003c/div\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"random\"\u003eSelect a random number from 1 to 5: \u003c/label\u003e\n      \u003cinput\n        type=\"number\"\n        id=\"random\"\n        name=\"random\"\n        min=\"1\"\n        max=\"5\"\n        value=\"3\"\n      /\u003e\n    \u003c/div\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"profile\"\u003eSelect your image: \u003c/label\u003e\n      \u003cinput type=\"image\" id=\"profile\" name=\"profile\" /\u003e\n    \u003c/div\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"file\"\u003eSelect a file: \u003c/label\u003e\n      \u003cinput type=\"file\" id=\"file\" name=\"file\" /\u003e\n    \u003c/div\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"color\"\u003eSelect favourite color: \u003c/label\u003e\n      \u003cinput type=\"color\" id=\"color\" name=\"color\" /\u003e\n    \u003c/div\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"website\"\u003ePaste your website's url: \u003c/label\u003e\n      \u003cinput type=\"url\" id=\"website\" name=\"website\" /\u003e\n    \u003c/div\u003e\n\n    \u003c!-- checkbox disable--\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003cp\u003eReligion:\u003c/p\u003e\n      \u003cdiv\u003e\n        \u003cinput type=\"checkbox\" id=\"muslim\" checked /\u003e\n        \u003clabel for=\"muslim\"\u003emuslim\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cinput type=\"checkbox\" id=\"hindu\" /\u003e\n        \u003clabel for=\"hindu\"\u003ehindu\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cinput type=\"checkbox\" id=\"other\" disabled /\u003e\n        \u003clabel for=\"other\"\u003eother\u003c/label\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- radiobutton --\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003cp\u003eGender:\u003c/p\u003e\n      \u003cdiv\u003e\n        \u003cinput type=\"radio\" id=\"male\" name=\"gender\" /\u003e\n        \u003clabel for=\"male\"\u003emale\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cinput type=\"radio\" id=\"female\" name=\"gender\" /\u003e\n        \u003clabel for=\"female\"\u003efemale\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cinput type=\"radio\" id=\"other\" name=\"gender\" /\u003e\n        \u003clabel for=\"other\"\u003eother\u003c/label\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- dropdown menu --\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"department\"\u003eDepartment: \u003c/label\u003e\n      \u003cselect name=\"department\" id=\"department\"\u003e\n        \u003coption value=\"cse\"\u003eCSE\u003c/option\u003e\n        \u003coption value=\"eee\"\u003eEEE\u003c/option\u003e\n        \u003coption value=\"llb\"\u003eLLB\u003c/option\u003e\n      \u003c/select\u003e\n    \u003c/div\u003e\n    \u003c!-- textarea --\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003clabel for=\"message\"\u003eMessage: \u003c/label\u003e \u003cbr /\u003e\n      \u003ctextarea name=\"\" id=\"message\" cols=\"30\" rows=\"10\"\u003e\u003c/textarea\u003e\n    \u003c/div\u003e\n    \u003c!-- button --\u003e\n    \u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003cbutton type=\"submit\"\u003eSave Data\u003c/button\u003e\n      \u003cbutton type=\"reset\"\u003eClear\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/form\u003e\n  ```\n\n  output of the above html code\n  ![form](images/form.png)\n\n## 3. Advanced HTML\n\n### 3.1 Multimedia - audio, video\n\n#### audio\n\n- `\u003caudio\u003e ... \u003c/audio\u003e` tag helps us to add audio in our webpage\n- `\u003caudio\u003e ... \u003c/audio\u003e` tag has some attributes such as `controls autoplay muted height width`\n- audio example shows how to add aduio source by using `\u003csource /\u003e` tag\n- Inside `\u003csource /\u003e` tag we must define the `src=\"\"` src address/name and also the `type=\"\"` of audio\n- as the example shows there are 2 `\u003csource /\u003e` tag is used if the first format is not supported by the browser then second one will work. if first and second both is not supported by the browser then `Your browser does not support the audio element.` will work.\n\n  audio Example\n\n  ```html\n  \u003caudio controls autoplay muted height=\"300\" width=\"300\"\u003e\n    \u003csource src=\"anis.mp3\" type=\"audio/mp3\"\u003e\n    \u003csource src=\"anis.wav\" type=\"audio/wav\"\u003e\n    Your browser does not support the audio element.\n  \u003c/audio\n  ```\n\n#### video\n\n- `\u003cvideo\u003e ... \u003c/video\u003e` tag helps us to add video in our webpage\n- `\u003cvideo\u003e ... \u003c/video\u003e` tag has some attributes such as `controls autoplay muted height width`\n\nvideo Example\n\n```html\n\u003cvideo controls autoplay muted height=\"300\" width=\"300\"\u003e\n  \u003csource src=\"anis.mp4\" type=\"video/mp4\"\u003e\n  \u003csource src=\"anis.ogg\" type=\"audio/ogg\"\u003e\n  Your browser does not support the video element.\n\u003c/video\n```\n\n### 3.2 Meta tags \u0026 SEO\n\n- Using meta tags (`\u003cmeta\u003e`) to define page metadata, such as title, description, and keywords.\n  Understanding the impact of meta tags on search engine optimization (SEO).\n\n```html\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\" /\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n  \u003cmeta name=\"description\" content=\"Free complete html tutorials 2021\" /\u003e\n  \u003cmeta name=\"keywords\" content=\"HTML, html, html5\" /\u003e\n  \u003cmeta name=\"author\" content=\"Anisul Islam\" /\u003e\n  \u003clink rel=\"stylesheet\" href=\"style.css\" /\u003e\n  \u003cstyle\u003e\n    body {\n      background-color: aquamarine;\n    }\n  \u003c/style\u003e\n  \u003cscript src=\"index.js\"\u003e\u003c/script\u003e\n  \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n```\n\n- Inside `\u003chead\u003e` tag we can define metadata(document title, character set, links, scripts, styles), other information that will not be visible to the users\n- meta tag provides information to the browsers and search engines about the webpage\n- `\u003cmeta charset=\"UTF-8\" /\u003e` defines the character encoding for the HTML document.\n- `\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e` for supporting older version of IE.\n- `\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e` defines that webpage width is related to devices width and initial zoom level is 1.\n- `\u003clink rel=\"stylesheet\" href=\"style.css\"\u003e` generally connects css file to html. Inside of href attribute we give the css file name.\n- `\u003cstyle\u003e ... \u003c/style\u003e` we can use `\u003cstyle\u003e ... \u003c/style\u003e` tag directly inside the head tag for designing html elements.\n- `\u003cscript src=\"index.js\"\u003e\u003c/script\u003e` generally connects js file to html. we can also use `\u003cscript\u003e ... \u003c/script\u003e` tag directly inside the body tag.\n\n### 3.3 Sematic HTML\n\n- div can help to divide screen but it is not semantic\n- purpose of HTML5\n\n  - adding more semantic tags\n  - more form types\n  - improve accessibility\n  - improved storage facilities\n  - improved graphics \u0026 media\n  - remove few things\n\n- HTML5 Semantic elements: `\u003cheader\u003e \u003cnav\u003e \u003cmain\u003e \u003carticle\u003e \u003caside\u003e \u003csection\u003e \u003cfooter\u003e \u003cfigure\u003e \u003cfigcaption\u003e \u003cdetails\u003e \u003csummary\u003e \u003cmark\u003e \u003ctime\u003e`\n\n- sematic tags vs non semantic tags\n\n  - semantic tags are meaningful tags for human, search engine. example: `\u003cform\u003e \u003ctable\u003e \u003cp\u003e \u003ch1\u003e etc.`\n  - non-semantic tags are not meaningful tags for human, search engine. example: `\u003cspan\u003e \u003cdiv\u003e etc.`\n  - sematic tags vs non semantic tags example is given below:\n    ![semantic](images/semantic.png)\n\n#### details and figure elements\n\n- `\u003cdetails\u003e` elements have tewo states: closed, open\n- `\u003csummary\u003e` a short summary of details is provided by summary element\n- `\u003cfigure\u003e` can have diagram, photos inside of it.\n- `\u003cfigcaption\u003e` can set the figure caption.\n\n  An example of details, summary elements are given below:\n\n  ```html\n  \u003c!DOCTYPE html\u003e\n  \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n      \u003ctitle\u003eDocument\u003c/title\u003e\n      \u003cstyle\u003e\n        details[open] \u003e summary {\n          background-color: aqua;\n        }\n      \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003cdetails\u003e\n        \u003csummary\u003eAnisul Islam\u003c/summary\u003e\n        My Name is Anisul Islam. I am 31 years old. I have done my masters in\n        Software, Web \u0026 cloud at Tampere University, Finland.\n      \u003c/details\u003e\n\n      \u003c!-- no need to understand this part cause I just tested using javascript here --\u003e\n      \u003c!-- \u003cscript\u003e\n        const details = document.querySelector(\"details\");\n        details.addEventListener(\"toggle\", () =\u003e {\n          if (details.open) {\n            console.log(\"open\");\n          } else {\n            console.log(\"close\");\n          }\n        });\n      \u003c/script\u003e --\u003e\n      \u003cfigure\u003e\n        \u003cimg src=\"./images/list.png\" alt=\"list\" /\u003e\n        \u003cfigcaption\u003efig1: list image\u003c/figcaption\u003e\n      \u003c/figure\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n\n  output of the heading style code  \n   ![details1](images/details1.png)\n  ![details2](images/details2.png)\n\n### 3.4 Web accessibility\n\n- what is web accessibility?\n  - making website supportive for disable people and search engine\n- how to check web accessibility?\n  - inspect -\u003e lighthouse -\u003e accessibility\n  - axe Devtools for accessibility testing\n  - chromeVox for screen reading\n\n1. Use Semantic elements over non semantic elements.\n\n- semantic tags are meaningful tags for human, search engine. example: `\u003cform\u003e \u003ctable\u003e \u003cp\u003e \u003ch1\u003e etc.`\n- non-semantic tags are not meaningful tags for human, search engine. example: `\u003cspan\u003e \u003cdiv\u003e etc.`\n- In the following example button is more accessible than div for making a button. Semantic elements help the screen readers.\n\n```html\n\u003cdiv\u003eClick me\u003c/div\u003e\n\u003cbutton\u003eClick me\u003c/button\u003e\n```\n\n- Example of explicit semantic vs implicit sematic element\n\n```html\n\u003cdiv role=\"button\"\u003eClick me\u003c/div\u003e\n\u003cbutton\u003eClick me\u003c/button\u003e\n```\n\n- landmarks helps to naviagte from one place to another: header, h1...h6, main, nav, footer\n\n2. Use Heading tags in order\n\n- use one h1 element in a webpage\n- keep sequence when using: h1 -\u003e h2 -\u003e h3 ... (follow top-down order)\n\n3. Use alt attribute\n\n- use alt attribute for `\u003cimg /\u003e` element\n- alt attribute provides more info to the blind people\n- low bandwidth might not render the image so the alt will help here\n- alt attributes helps technologies like search engines\n- title attribute can be used when we hover over image to get extra information\n\n4. Contrast ratio checker\n\n- use contrast ratio checker for foreground and background color: https://webaim.org/resources/contrastchecker/\n\n5. Declare the languages\n\n- `\u003chtml lang=\"en\"\u003e`\n\n6. Meaningful Link txt\n\n- make link text descriptive, understandable and clear `\u003ca href=\"http://studywithanis.com\" target=\"_blank\"\u003e Visit Anisul Islam's website \u003c/a\u003e`\n\n7. Form related matters\n\n- use label and bind input elements with label by using id and for value same. example is given below:\n\n  ```html\n  \u003clabel for=\"email\"\u003eEmail: \u003c/label\u003e \u003cinput type=\"email\" id=\"email\" /\u003e\n\n  \u003cdiv class=\"form-control\"\u003e\n    \u003cfieldset\u003e\n      \u003clegend\u003eChoose Gender:\u003c/legend\u003e\n      \u003cdiv class=\"form-control\"\u003e\n        \u003cinput type=\"radio\" id=\"male\" name=\"gender\" value=\"male\" /\u003e\n        \u003clabel for=\"male\"\u003eMale\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"form-control\"\u003e\n        \u003cinput type=\"radio\" id=\"female\" name=\"gender\" value=\"female\" /\u003e\n        \u003clabel for=\"female\"\u003eFemale\u003c/label\u003e\n      \u003c/div\u003e\n    \u003c/fieldset\u003e\n  \u003c/div\u003e\n  ```\n\n8.  use aria-label vs aria-labelby vs aria-descriptionby\n\n- these attribute has no visual impact but they are for assistive purpose. use them only when you can not use semantic elements\n- The aria-label and aria-labelledby attributes are both used to give an element it's accessible name.\n- using forms with standards labels - you shouldn't need it at all: -\u003e label, for is more than enough\n- **_aria-label_** add accessible name directly to an element and it has higher priority than the element value. In the following example screen reader will say learn more about me instead of learn more\n\n  ```html\n  \u003cbutton aria-label=\"Learn more about me\"\u003eLearn more\u003c/button\u003e\n  ```\n\n- **_aria-labelby_** create a relationship between elements\n\n  ```html\n  \u003ch3 id=\"hobbies\"\u003eHobbies\u003c/h3\u003e\n  \u003cul aria-labelledby=\"hobbies\"\u003e\n    \u003cli\u003ePlaying Football\u003c/li\u003e\n    \u003cli\u003ePlaying Badminton\u003c/li\u003e\n    \u003cli\u003eSwimming\u003c/li\u003e\n  \u003c/ul\u003e\n  ```\n\n- **_aria-descriptionby_**\n\n  ```html\n  \u003cdiv\u003e\n    \u003clabel for=\"password\"\u003e Password \u003c/label\u003e\n    \u003cinput\n      type=\"password\"\n      name=\"password\"\n      id=\"password\"\n      aria-describedby=\"help\"\n      required\n    /\u003e\n    \u003cdiv id=\"help\"\u003ePasword must be at least 8 character long\u003c/div\u003e\n  \u003c/div\u003e\n  ```\n\n9. role and tabindex -\u003e tabindex can start from 0 then -1, -2 for lesser priority so that you can navigate by keyboard one after one in an order\n\n```HTML\n  \u003c!-- use nav, role, tabindex, aria-label for an accessible navbar  --\u003e\n\n  \u003c!-- NOT ACCESSIBLE --\u003e\n  \u003cdiv id=\"nav\"\u003e\n    \u003ca href=\"#\"\u003eHome\u003c/a\u003e\n    \u003ca href=\"#about\"\u003eAbout Me\u003c/a\u003e\n    \u003ca href=\"#tutorial\"\u003eTutorials\u003c/a\u003e\n    \u003ca href=\"#contact\"\u003eContact Me\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003c!-- ACCESSIBLE  --\u003e\n  \u003cnav aria-label=\"navigation menu\"\u003e\n    \u003cul id=\"menubar\" role=\"menubar\" aria-label=\"navigation menu\"\u003e\n      \u003cli role=\"none\"\u003e\n        \u003ca href=\"#\" role=\"menuitem\" tabindex=\"-1\"\u003eHome\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli role=\"none\"\u003e\n        \u003ca href=\"#about\" role=\"menuitem\" tabindex=\"-1\"\u003eAbout Me\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cul role=\"menu\" aria-label=\"tutorials\"\u003e\n        \u003cli role=\"none\"\u003e\n          \u003ca href=\"#tutorials\" role=\"menuitem\" tabindex=\"0\"\u003eTutorials\u003c/a\u003e\n          \u003cul\u003e\n            \u003cli role=\"none\"\u003e\n              \u003ca href=\"#html\" role=\"menuitem\" tabindex=\"-1\"\u003eHTML\u003c/a\u003e\n            \u003c/li\u003e\n            \u003cli role=\"none\"\u003e\n              \u003ca href=\"#css\" role=\"menuitem\" tabindex=\"-1\"\u003eCSS\u003c/a\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cli role=\"none\"\u003e\n        \u003ca href=\"#contact\" role=\"menuitem\" tabindex=\"-1\"\u003eContact Me\u003c/a\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n```\n\n- References:\n- https://www.w3.org/WAI/fundamentals/accessibility-intro/\n- https://www.w3schools.com/html/html_accessibility.asp\n\n### 3.5 Graphics\n\n#### progress bar and svg\n\n- `\u003cimg src=\"imageName.svg\"\u003e`\n- `\u003cprogress min=\"0\" max=\"100\" value=\"70\"\u003e \u003c/progress\u003e`\n  \u003cprogress min=\"0\" max=\"100\" value=\"70\"\u003e \u003c/progress\u003e\n- you will learn more about svg and canvas in CSS and Javascript playlist\n\n### 3.6 HTML5 API\n\n- Exploring HTML5 APIs like Geolocation, Drag and Drop, Web Storage, and Web Workers. Understanding their usage and practical applications.\n\n1. **Geolocation API**:\n\n   - The Geolocation API allows you to retrieve the user's geographic location information.\n   - Example:\n\n     ```js\n     if (navigator.geolocation) {\n       navigator.geolocation.getCurrentPosition(function (position) {\n         var latitude = position.coords.latitude;\n         var longitude = position.coords.longitude;\n         console.log(\"Latitude: \" + latitude + \", Longitude: \" + longitude);\n       });\n     } else {\n       console.log(\"Geolocation is not supported by this browser.\");\n     }\n     ```\n\n2. **Drag and Drop API**:\n\n   - The Drag and Drop API enables you to create drag-and-drop interactions between elements on a web page.\n   - Example:\n\n     ```javascript\n     var draggableElement = document.getElementById(\"draggable\");\n     var dropZone = document.getElementById(\"drop-zone\");\n\n     draggableElement.addEventListener(\"dragstart\", function (event) {\n       event.dataTransfer.setData(\"text/plain\", event.target.id);\n     });\n\n     dropZone.addEventListener(\"dragover\", function (event) {\n       event.preventDefault();\n     });\n\n     dropZone.addEventListener(\"drop\", function (event) {\n       event.preventDefault();\n       var data = event.dataTransfer.getData(\"text/plain\");\n       var element = document.getElementById(data);\n       dropZone.appendChild(element);\n     });\n     ```\n\n3. **Web Storage API**:\n\n   - The Web Storage API provides a way to store key-value pairs locally in the user's browser.\n   - Example:\n\n     ```javascript\n     // Store data\n     localStorage.setItem(\"username\", \"John\");\n\n     // Retrieve data\n     var username = localStorage.getItem(\"username\");\n     console.log(username);\n\n     // Remove data\n     localStorage.removeItem(\"username\");\n     ```\n\n4. **Canvas API**:\n\n   - The Canvas API allows you to draw graphics and animations on a web page using JavaScript.\n   - Example:\n\n     ```javascript\n     var canvas = document.getElementById(\"my-canvas\");\n     var context = canvas.getContext(\"2d\");\n\n     context.fillStyle = \"red\";\n     context.fillRect(50, 50, 100, 100);\n\n     context.strokeStyle = \"blue\";\n     context.lineWidth = 2;\n     context.strokeRect(75, 75, 50, 50);\n\n     context.beginPath();\n     context.arc(150, 150, 50, 0, 2 * Math.PI);\n     context.fillStyle = \"green\";\n     context.fill();\n     context.closePath();\n     ```\n\n### 3.7 HTML Templates and Web Components\n\n- Building reusable HTML templates and components using `\u003ctemplate\u003e` and custom elements.\n\n  ```html\n  \u003ctemplate id=\"user-template\"\u003e\n    \u003cdiv class=\"user-card\"\u003e\n      \u003ch2 class=\"user-name\"\u003e\u003c/h2\u003e\n      \u003cp class=\"user-email\"\u003e\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\n  \u003cscript\u003e\n    // Clone the template and populate the data\n    var template = document.getElementById(\"user-template\");\n    var clone = template.content.cloneNode(true);\n    clone.querySelector(\".user-name\").textContent = \"John Doe\";\n    clone.querySelector(\".user-email\").textContent = \"john.doe@example.com\";\n\n    // Insert the cloned template into the document\n    document.body.appendChild(clone);\n  \u003c/script\u003e\n  ```\n\n- Leveraging frameworks like Angular, React, or Vue.js for more advanced component-based development.\n\n## Follow Me\n\n\u003cimg src =\"https://www.edigitalagency.com.au/wp-content/uploads/Facebook-logo-blue-circle-large-transparent-png.png\" height=\"15px\" width=\"15px\"/\u003e [Facebook](http://facebook.com/learnwithfair), \u003cimg src =\"https://image.similarpng.com/very-thumbnail/2021/10/Youtube-icon-design-on-transparent-background-PNG.png\" height=\"20px\" width=\"20px\"/\u003e [Youtube](http://youtube.com/@learnwithfair), \u003cimg src =\"https://i.pinimg.com/originals/fa/ea/02/faea02f412415becfb4939d2b6431c28.jpg\" height=\"15px\" width=\"15px\"/\u003e [Instagram](http://instagram.com/learnwithfair)\ns\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnwithfair%2Fhtml-documentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearnwithfair%2Fhtml-documentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnwithfair%2Fhtml-documentation/lists"}