Skip to content
    geeksforgeeks
    • Courses
      • DSA / Placements
      • GATE Prep
      • Data Analytics / Data Science
      • Development
      • Cloud / DevOps
      • Programming Languages
      • All Courses
    • Tutorials
      • Python
      • Java
      • DSA
      • ML & Data Science
      • Interview Corner
      • Programming Languages
      • Web Development
      • GATE
      • CS Subjects
      • DevOps
      • School Learning
      • Software and Tools
    • Practice
      • Summer Skillup
      • Practice Coding Problems
      • Problem of the Day
      • Connect 1:1 with Experts
    • Jobs
      • Apply Now!
      • Post Jobs
      • Jobs Updates
    • Notifications

      Mark all as read
      All
      View All
      Notifications
      Mark all as read
      All
      Unread
      Read
      You're all caught up!!
    • HTML Tutorial
    • Web Tutorial
    • CSS
    • Javascript
    • React
    • A to Z Guide
    • Exercises
    • Tags
    • Projects
    • Interview Questions
    • Examples
    • Color Picker
    • DOM
    Open In App
    • Share Your Experiences
    • HTML Basics

      Introduction

      Editors

      Basics

      Structure & Elements

      Elements

      Attributes

      Heading

      Paragraph

      Text Formatting

      Block & Inline Elements

      Charsets

      Lists

      Lists

      Ordered Lists

      Unordered Lists

      Description Lists

      Visuals & Media

      Colors

      Links

      Images

      Favicon

      HTML Video

      Layouts & Designs

      Tables

      iframes

      Layout

      File Paths

      Projects & Advanced Topics

      Forms

      Semantics

      URL Encoding

      Responsive Web Design

      Projects for Beginners

      Tutorial References

      Tags

      Attributes

      Global Attributes

      HTML5

      HTML5 MathML

      DOM

      DOM Audio/Video

      SVG Element

      SVG Attribute

      SVG Property

      Canvas

      HTML Courses

      JavaScript Programming Course

      MERN Full Stack Course

      DSA and System Design

    • Summer SkillUpExplore

    HTML Tutorial

    Last Updated : 01 May, 2026
    Comments
    Improve
    Suggest changes
    304 Likes
    Like
    Report

    HTML (HyperText Markup Language) is the core language used to structure and display content on the web, defining elements like text, images, links, and page layout so browsers can render websites properly.

    • Provides the basic structure for all web pages using opening and closing tags like <p>, <h1>, and <div>.
    • Supports text, images, links, lists, tables, forms, and multimedia elements such as audio and video.
    • Works with CSS for styling and JavaScript for interactivity.
    • Uses attributes like src, href, and alt to add extra information and control element behavior.
    • HTML documents are transferred over the Internet using HTTP Protocol.

    Basics

    These topics help you get started with HTML and understand the environment and purpose.

    • Introduction
    • Features
    • Editors
    • Comments

    HTML Fundamental Concepts

    These are the fundamental building blocks used to actually create web pages.

    • Structure
    • Element
    • Attributes
    • Semantics
    • Entities
    • Symbols

    Beginner Projects

    Start simple and learn by doing beginner HTML projects that teach you how to make basic web pages, giving you real-world practice in building websites.

    • Simple Portfolio Website
    • Design an Event Web Page
    • Projects For Beginners
    • Beginner HTML Project Ideas

    Tags

    Tags are the building blocks of web pages. By understanding and using HTML tags effectively, you can create well-structured and informative webpages.

    • Commonly used HTML tags
    • HTML Tags – A to Z List

    Tables

    Tables provide a structured way to organize information into rows and columns, making it easy for users to understand and navigate.

    • Table
    • Row
    • Header
    • Cell
    • Set captions
    • Group Columns

    Lists

    Lists organize information clearly on your website. They're perfect for step-by-step instructions, lists of ingredients, or ranking items. This improves readability and helps users to understand your content.

    • Lists
    • Ordered
    • Unordered
    • Description Lists

    Formatting

    HTML offers tags and attributes to style your website's text, images, and more. This improves visual appeal, helps users navigate your content, and signals important information to users. Let's explore some of the common HTML formatting tags.

    • Make Text Italic
    • Create Small text
    • Insert Text
    • Add a Subscript
    • Strong Tag
    • Bold Text
    • Highlight Text
    • Show a Deleted Text
    • Emphasize Text
    • Add a Superscript
    • Formatting Quiz

    Form

    Forms let users interact with your website. Use them to collect contact details, run surveys, search your site, and more. Let's explore more about HTML form:

    • Form
    • Add an Input Field
    • Label tag
    • Add a Button
    • Add a Dropdown
    • Add a Textarea
    • Fieldset Tag
    • Legend Tag
    • Datalist Tag
    • HTML Form Design
    • Form Quiz

    Advanced Concepts

    Beyond the Basics in HTML there are also advance concept exists. So, once you have mastered the fundamental building blocks of HTML, we can explore advanced HTML concepts for dynamic, interactive, and meaningful web pages.

    • iframe
    • File Paths
    • Favicon
    • Computer Code Elements
    • Add Emojis
    • Charsets
    • URL Encoding
    • Responsive Web Design
    • HTML Layout

    Media Elements

    • Add Audio to a Webpage
    • Add video to a Webpage

    References

    • Attributes
    • Global Attributes
    • Event Attributes
    • DOM
    • DOM Audio/Videos
    • HTML5

    Interesting Facts

    Here are some Interesting facts and features that highlight the importance of HTML in web development and how it shapes the structure of web pages:

    • HTML
    • Links and Navigation
    • Tables
    • Lists
    • Meta Tags and SEO
    • HTML5 APIs

    HTML Interview Questions

    • Interview Questions for Beginners

    HTML Cheat Sheet

    HTML Cheat Sheet is a simple, and quick reference list of basic HTML elements and attributes. The purpose of this Cheat Sheet is to provide you with some quick accurate ready-to-use code snippets and necessary HTML tags and attributes.

    HTML Intermediate Projects

    Creating simple HTML projects like a portfolio, Social Media Website, or responsive website helps you learn faster, build confidence, and strengthen your web development portfolio.

    • Design a website
    • Simple Portfolio Website Design
    • Design a Portfolio Gallery
    • Design a Login Form to an Image using HTML

    Best Approach to Learn HTML

    You can complete this HTML tutorial in approximately 4 weeks if you dedicate consistent time and effort.

    • Week 1 - HTML Basics: Learn document structure, elements, attributes, comments, and core tags like headings, paragraphs, links, and images, along with Best HTML Coding Practices.
    • Week 2 - Practice & Tools: Explore HTML editors and tools, then build beginner projects such as a simple portfolio or event webpage.
    • Week 3 - Data & Forms: Work with tables, lists, and forms to organize data and create inputs, text areas, and buttons for user interaction.
    • Week 4 - Advanced HTML5: Understand HTML5 features, basic responsive design concepts, and complete a final project combining all topics.
    • By the end of 4 weeks, you’ll be confident in HTML and able to build structured, responsive web pages, ready to move on to CSS and JavaScript.

    Importance of HTML

    Learning HTML is essential for various practical reasons:

    • Foundation of Web Development: HTML is the core building block of websites and is essential for anyone starting in web development or web design.
    • Universal Web Language: It is the standard markup language used to structure web pages and manage content across the internet.
    • Easy to Learn: HTML is simple and beginner-friendly, allowing quick creation of basic web pages without programming complexity.
    • Career Opportunities: Knowledge of HTML supports roles like web developer, content manager, and UI/UX designer.
    • Gateway to Advanced Skills: Mastering HTML makes it easier to learn CSS, JavaScript, and modern web technologies for interactive and visually rich websites.
    Create Quiz

    HTML Tutorial For Beginners | Complete Roadmap | Basics to Advance, Projects, and More
    Visit Course explore course icon

    K

    kartik
    Improve

    K

    kartik
    Improve
    Article Tags :
    • HTML
    • Tutorials
    • Web-Tech Tutorials
    `; $(commentSectionTemplate).insertBefore(".article--recommended"); } loadComments(); }); }); function loadComments() { if ($("iframe[id*='discuss-iframe']").length top_of_element && top_of_screen articleRecommendedTop && top_of_screen articleRecommendedBottom)) { if (!isfollowingApiCall) { isfollowingApiCall = true; setTimeout(function(){ if (loginData && loginData.isLoggedIn) { if (loginData.userName !== $('#followAuthor').val()) { is_following(); } else { $('.profileCard-profile-picture').css('background-color', '#E7E7E7'); } } else { $('.follow-btn').removeClass('hideIt'); } }, 3000); } } }); } $(".accordion-header").click(function() { var arrowIcon = $(this).find('.bottom-arrow-icon'); arrowIcon.toggleClass('rotate180'); }); }); window.isReportArticle = false; function report_article(){ if (!loginData || !loginData.isLoggedIn) { const loginModalButton = $('.login-modal-btn') if (loginModalButton.length) { loginModalButton.click(); } return; } if(!window.isReportArticle){ //to add loader $('.report-loader').addClass('spinner'); jQuery('#report_modal_content').load(gfgSiteUrl+'wp-content/themes/iconic-one/report-modal.php', { PRACTICE_API_URL: practiceAPIURL, PRACTICE_URL:practiceURL },function(responseTxt, statusTxt, xhr){ if(statusTxt == "error"){ alert("Error: " + xhr.status + ": " + xhr.statusText); } }); }else{ window.scrollTo({ top: 0, behavior: 'smooth' }); $("#report_modal_content").show(); } } function closeShareModal() { const shareOption = document.querySelector('[data-gfg-action="share-article"]'); shareOption.classList.remove("hover_share_menu"); let shareModal = document.querySelector(".hover__share-modal-container"); shareModal && shareModal.remove(); } function openShareModal() { closeShareModal(); // Remove existing modal if any let shareModal = document.querySelector(".three_dot_dropdown_share"); shareModal.appendChild(Object.assign(document.createElement("div"), { className: "hover__share-modal-container" })); document.querySelector(".hover__share-modal-container").append( Object.assign(document.createElement('div'), { className: "share__modal" }), ); document.querySelector(".share__modal").append(Object.assign(document.createElement('h1'), { className: "share__modal-heading" }, { textContent: "Share to" })); const socialOptions = ["LinkedIn", "WhatsApp","Twitter", "Copy Link"]; socialOptions.forEach((socialOption) => { const socialContainer = Object.assign(document.createElement('div'), { className: "social__container" }); const icon = Object.assign(document.createElement("div"), { className: `share__icon share__${socialOption.split(" ").join("")}-icon` }); const socialText = Object.assign(document.createElement("span"), { className: "share__option-text" }, { textContent: `${socialOption}` }); const shareLink = (socialOption === "Copy Link") ? Object.assign(document.createElement('div'), { role: "button", className: "link-container CopyLink" }) : Object.assign(document.createElement('a'), { className: "link-container" }); if (socialOption === "LinkedIn") { shareLink.setAttribute('href', `https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}`); shareLink.setAttribute('target', '_blank'); } if (socialOption === "WhatsApp") { shareLink.setAttribute('href', `https://api.whatsapp.com/send?text=${window.location.href}`); shareLink.setAttribute('target', "_blank"); } if (socialOption === "Twitter") { shareLink.setAttribute('href', `https://twitter.com/intent/tweet?url=${window.location.href}`); shareLink.setAttribute('target', "_blank"); } shareLink.append(icon, socialText); socialContainer.append(shareLink); document.querySelector(".share__modal").appendChild(socialContainer); //adding copy url functionality if(socialOption === "Copy Link") { shareLink.addEventListener("click", function() { var tempInput = document.createElement("input"); tempInput.value = window.location.href; document.body.appendChild(tempInput); tempInput.select(); tempInput.setSelectionRange(0, 99999); // For mobile devices document.execCommand('copy'); document.body.removeChild(tempInput); this.querySelector(".share__option-text").textContent = "Copied" }) } }); // document.querySelector(".hover__share-modal-container").addEventListener("mouseover", () => document.querySelector('[data-gfg-action="share-article"]').classList.add("hover_share_menu")); } function toggleLikeElementVisibility(selector, show) { document.querySelector(`.${selector}`).style.display = show ? "block" : "none"; } function closeKebabMenu(){ document.getElementById("myDropdown").classList.toggle("show"); }
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 6th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • Careers
  • Contact Us
  • Corporate Solution
  • Campus Training Program
  • Explore
  • POTD
  • Practice Problems
  • Connect
  • Blogs
  • Upskill Courses
  • Tutorials
  • Programming Languages
  • DSA
  • Web Technology
  • AI, ML & Data Science
  • DevOps
  • CS Core Subjects
  • GATE
  • School Subjects
  • Software and Tools
  • Courses
  • ML and Data Science
  • DSA and Placements
  • Web Development
  • Data Science
  • Programming Languages
  • DevOps & Cloud
  • GATE
  • MongoDB Certifications
  • Preparation Corner
  • Interview Corner
  • Aptitude
  • Puzzles
  • GfG 160
  • System Design
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences