- 01Setting Up (What You'll Need)
- 02Your First HTML
- 03Lists and Links
- 04Adding Color with CSS
- 05CSS Selectors and Classes
- 06Layout with Flexbox
- 07Trying Out Images and Tables
- 08Trying Out Form Controls
- 09Understanding the Box Model
- 10Intro to Responsive Design (Media Queries)
- 11CSS Variables (Custom Properties)
- 12Layout with CSS Grid
- 13Adding an Animation
- 14How to Write Comments
- 15Adding Interaction with Pseudo-Classes (:hover)
- 16CSS's :not() and Multi-Condition Selectors
- 17The Basics of Meta Tags and SEO
- 18The Basics of Accessibility (alt and aria-label)
- 19Trying Out data Attributes (data-*)
- 20CSS Transitions (Smooth Hover Changes)
- 21iframe (Embedding Another Page)
- 22position (Precisely Positioning an Element)
- 23z-index (Specifying Stacking Order)
- 24The Basics of localStorage (Saving Data in the Browser)
- 25The video and audio Tags (Embedding Media)
- 26Advanced Tables (colspan and rowspan)
- 27The Basics of CSS Specificity
- 28The Basics of SVG (Drawing Vector Images)
- 29Advanced Flexbox (Wrapping and Growing)
- 30Form Validation (required and pattern)
- 31Advanced CSS Grid (grid-template-areas)
- 32The details and summary Tags (Building a Collapsible Panel)
- 33CSS Counters (Automatic Numbering)
- 34Fluid Font Sizes with clamp()
- 35prefers-color-scheme (Dark Mode Support)
- 36Building a Slider with input type=range
- 37Fixing an Aspect Ratio with aspect-ratio
- 38Adjusting How an Image Displays with object-fit
- 39Rotating and Scaling with transform
- 40Serving Responsive Images with the picture Tag
- 41Showing Keyboard Focus with :focus-visible
- 42Scrolling Smoothly with scroll-behavior
- 43Switching Layouts Per-Component with Container Queries
- 44Creating a Frosted-Glass Effect with backdrop-filter
- 45Building a Flexible Grid with repeat() and minmax()
- 46Fixing a Header in Place with position: sticky
- 47Adding Pseudo-Elements with ::before and ::after
- 48Truncating Long Text with an Ellipsis Using text-overflow
- 49Using a Calculated Value in CSS with calc()
- 50[Applied] Build a Simple Website
Your First HTML
In this lesson you'll learn the basic structure of HTML tags so you can build a text page using headings and paragraphs. This is for people searching "HTML basics how to write" or "HTML tags for beginners."
HTML is a language that gives meaning to text using "tags." A tag comes as a set of three parts — an opening tag, content, and a closing tag — where <h1> represents a heading and <p> represents a paragraph. The browser reads these tags and automatically formats things like text size and line spacing for display. There are many kinds of tags, but if you just remember these two — "heading" and "paragraph" — you can immediately build a simple text page.
The sample code creates a large heading with <h1> and two paragraphs with <p>. Rewrite the code and press "Run" to see the page preview below — practice by checking how the appearance changes each time you change a tag.
A common beginner stumbling block is forgetting the closing tag (the one with a slash, like </h1>). Forgetting it can cause even the text that follows to display in an unintended way. Remember the rule: opening and closing tags must always be written as a pair.
Even in real web development, HTML is the first thing built — the "skeleton" of a page. No matter how flashy a site's design looks, at its foundation is a stack of these simple tags.
💡 The preview runs entirely on this page — nothing is sent externally.
