HTML Learning Roadmap

  • html
  • roadmap
What is HTML? 
What HTML stands for?
Define HTML?
HTML Abbreviation

HTML, or Hypertext Markup Language, is a markup language that defines the structure and content of web pages.



1. Month 1: HTML Basics

  • basics
  • html

1.1 Introduction to HTML

  • purpose: Purpose of HTML is to create and structure content on web pages
  • definition: HTML stands for HyperText Markup Language
  • structure: Structure of HTML includes tags that define different elements on a webpage such as headings, paragraphs, and images

1.2 Basic HTML Tags

  • Doctype is used to specify the version of HTML being used
  • Paragraph tag is used to create paragraphs of text
  • Metadata provides information about the HTML document
  • Root element is the top-level element in an HTML document
  • Headings are used to define the structure of the content
  • Title tag specifies the title of the HTML document
  • Content refers to the main body of the HTML document
  • Line-break tag is used to create a line break in the text

1.3 Text Formatting

These options can be used to emphasize or draw attention to specific parts of the text. Proper use of text formatting can enhance readability and convey emphasis in a professional manner. Text formatting options include the following tags.
  • highlight is used to highlight specific part of text
  • strong used to make the font face bolder
  • subscript used add something at bottom right side of text
  • underline is used to underline text
  • superscript is used to add something over top right side of text
  • emphasis is used to emphasize text
  • bold is used to make text bolder. Same as strong.
  • strikethrough when correcting something instead of deleting the word
  • smaller-text used to display smaller text
  • italic is same as emphasis

1.4 Lists in HTML

These are the types of lists available in HTML.
  • Unordered list: a list of items where the order does not matter
  • Definition term: a word or phrase being defined in a glossary or dictionary
  • Ordered list: a html list of items where the order is important
  • List item: a single entry in a list
  • Definition list: a list of terms and their definitions
  • Definition-dt: the definition of a term in a definition list

1.5 Images

  • Image: A visual representation or graphic depiction. You can even add photos and a lot more.
  • Image source: The origin or location from which the image was obtained
  • Alternative text: Descriptive text that provides information about the content or purpose of the image

1.6 Links

We use these to link documents over the web or local.
  • Link-target refers to the attribute of a link that specifies where the linked document will open
  • Open-link-in-new-tab is a feature that allows a html link to open in a new browser tab instead of the current one
  • An anchor is a specific point within a document that can be linked to directly
These elements are essential for creating a user-friendly and seamless browsing experience



1.1 Introduction to HTML
https://youtu.be/o-N44-lYNb4

1.2 Basic HTML Tags
https://youtu.be/kjLtsBm4ZMc

1.3 Text Formatting
https://youtu.be/Ev5n7R1h5Dg

1.4 Lists in HTML
https://youtu.be/-4L69u0Yu-o

1.5 Images
https://youtu.be/_lOi4SQc32Y

1.6 Links
https://youtu.be/70VtK7juGaw

1.7 Tables part1
https://youtu.be/sxxJ84KyB40

1.7 Tables part2
https://youtu.be/2YyA6vlHJbo

1.8 Forms part 1
https://youtu.be/VNYHFmbWQdI

1.8 Forms part 2 (Dropdown or select)
https://youtu.be/Kczp3ESUwLc

1.9 HTML Comments
https://youtu.be/1TCHmV-pDIk

1.10 HTML Attributes part 1
https://youtu.be/v8-lht0HiDs

1.10 HTML Attributes part 1
https://youtu.be/FB2LNc3kZ9A

1.10 HTML Attributes part 2
https://youtu.be/8DAc6NvEGtM

1.10 HTML Attributes part 3
https://youtu.be/OKUoqpS0Mrg

1.11 HTML Semantics part 1 (Header and Navigation)
https://youtu.be/fhj2mCp_Y6M

1.11 HTML Semantics part 2 Figure
https://youtu.be/0IuLT_yErKU

1.11 HTML Semantics part 3 Sidebar
https://youtu.be/1KC-l4Qr_jU

1.11 HTML Semantics part 4 Footer
https://youtu.be/pZIwpcWfXEA

1.11 HTML Semantics - Section Main Article
https://youtu.be/20D9vA-UI6o

1.11 HTML Semantics part 6 Article
https://youtu.be/beuhp_rnE04

1.12 HTML5 Elements part 1 Canvas
https://youtu.be/mVL0w_ZtCVI

1.12 HTML5 Elements part 2 Summary and Details.mp4
https://youtu.be/aDhmrP4m4yo

1.12 HTML5 Elements part 3 video tag
https://youtu.be/osullYJ458Q

1.12 HTML5 Elements part 4 audio tag
https://youtu.be/IuC15lhP8lA
M