HTML — Complete Beginner Tutorial
6 modules · 10 examples · Click ▶ Run — See Result to see the page rendered in the browser
Document Structure
Every HTML page is a document that follows a specific structure. Think of it like a letter — it has a header (the <head>) that contains information about the letter, and a body (the <body>) that contains the actual content. The browser reads this structure to know what to display.
A Complete HTML Page
This is the skeleton of every HTML page. The <!DOCTYPE html> at the top tells the browser this is modern HTML5. The <html> tag wraps everything. The <head> holds information about the page — the <title> sets the browser tab text. The <body> holds everything the user sees.
1<!DOCTYPE html>2="color:#4f9ef8">style="color:#1A73E8"><html ="color:#4f9ef8">lang="en">3 ="color:#4f9ef8">style="color:#1A73E8"><head>4 ="color:#4f9ef8">style="color:#1A73E8"><title>My First Page="color:#4f9ef8">style="color:#1A73E8"></title>5 ="color:#4f9ef8">style="color:#1A73E8"></head>6 ="color:#4f9ef8">style="color:#1A73E8"><body>7 ="color:#4f9ef8">style="color:#1A73E8"><h1>Hello, World!="color:#4f9ef8">style="color:#1A73E8"></h1>8 ="color:#4f9ef8">style="color:#1A73E8"><p>Welcome to my first HTML page.="color:#4f9ef8">style="color:#1A73E8"></p>9 ="color:#4f9ef8">style="color:#1A73E8"></body>10="color:#4f9ef8">style="color:#1A73E8"></html>
Pro tip: The lang="en" attribute on the <html> tag tells browsers and search engines what language the page is in. Always include it — it helps screen readers and improves SEO.
The <head> Section
The <head> is invisible to users — it contains instructions for the browser. The <meta charset> tells the browser the character encoding (always use UTF-8). The <meta name="viewport"> makes the page work correctly on mobile phones. These two lines appear in virtually every real webpage.
1<!DOCTYPE html>2="color:#4f9ef8">style="color:#1A73E8"><html ="color:#4f9ef8">lang="en">3 ="color:#4f9ef8">style="color:#1A73E8"><head>4 ="color:#4f9ef8">style="color:#1A73E8"><meta ="color:#4f9ef8">charset="UTF-8" />5 ="color:#4f9ef8">style="color:#1A73E8"><meta ="color:#4f9ef8">name="viewport"6 ="color:#4f9ef8">content="width=device-width, initial-scale=1.0" />7 ="color:#4f9ef8">style="color:#1A73E8"><title>My Portfolio="color:#4f9ef8">style="color:#1A73E8"></title>8 ="color:#4f9ef8">style="color:#1A73E8"></head>9 ="color:#4f9ef8">style="color:#1A73E8"><body>10 ="color:#4f9ef8">style="color:#1A73E8"><h1>Jane Doe="color:#4f9ef8">style="color:#1A73E8"></h1>11 ="color:#4f9ef8">style="color:#1A73E8"><p>Web Developer from Cape Town="color:#4f9ef8">style="color:#1A73E8"></p>12 ="color:#4f9ef8">style="color:#1A73E8"></body>13="color:#4f9ef8">style="color:#1A73E8"></html>
Pro tip: The <meta charset="UTF-8"> tag allows your page to display characters from any language — including emoji, Chinese characters and accented letters. Without it, special characters may appear as garbled symbols.
Text & Headings
Text is the core of most web pages. HTML gives you six levels of headings for titles and sections, and a paragraph tag for body text. You can also make text bold or italic using semantic tags — which carry meaning, not just style. Search engines and screen readers use these tags to understand your content.
Heading Levels h1 to h6
HTML has six heading levels — h1 is the biggest and most important, h6 is the smallest. Use only ONE h1 per page — it is your main title and it matters for SEO. Use h2 for main sections, h3 for sub-sections, and so on. Think of it like a book: h1 is the book title, h2 is the chapter, h3 is the section heading.
1="color:#4f9ef8">style="color:#1A73E8"><h1>Main Page Title (only one per page)="color:#4f9ef8">style="color:#1A73E8"></h1>2="color:#4f9ef8">style="color:#1A73E8"><h2>Section Heading="color:#4f9ef8">style="color:#1A73E8"></h2>3="color:#4f9ef8">style="color:#1A73E8"><h3>Sub-section Heading="color:#4f9ef8">style="color:#1A73E8"></h3>4="color:#4f9ef8">style="color:#1A73E8"><h4>Smaller Sub-section="color:#4f9ef8">style="color:#1A73E8"></h4>5="color:#4f9ef8">style="color:#1A73E8"><h5>Rarely used heading="color:#4f9ef8">style="color:#1A73E8"></h5>6="color:#4f9ef8">style="color:#1A73E8"><h6>Smallest heading="color:#4f9ef8">style="color:#1A73E8"></h6>
Pro tip: Never skip heading levels — do not jump from h1 straight to h4. Screen readers and search engines expect headings to form a logical outline of the page. Wrong heading order hurts accessibility and SEO.
Paragraphs & Text Formatting
The <p> tag creates paragraphs. <strong> makes text bold AND signals it is important (not just styled — it has meaning). <em> makes text italic AND signals emphasis. There are also <br> for a line break and <hr> for a horizontal divider. The <code> tag is for displaying code snippets inline.
1="color:#4f9ef8">style="color:#1A73E8"><p>This is a normal paragraph of text.="color:#4f9ef8">style="color:#1A73E8"></p>23="color:#4f9ef8">style="color:#1A73E8"><p>You can make text ="color:#4f9ef8">style="color:#1A73E8"><strong>bold with strong="color:#4f9ef8">style="color:#1A73E8"></strong>4 or ="color:#4f9ef8">style="color:#1A73E8"><em>italic with em="color:#4f9ef8">style="color:#1A73E8"></em>.="color:#4f9ef8">style="color:#1A73E8"></p>56="color:#4f9ef8">style="color:#1A73E8"><p>You can combine them:7 ="color:#4f9ef8">style="color:#1A73E8"><strong>="color:#4f9ef8">style="color:#1A73E8"><em>bold and italic="color:#4f9ef8">style="color:#1A73E8"></em>="color:#4f9ef8">style="color:#1A73E8"></strong>.="color:#4f9ef8">style="color:#1A73E8"></p>89="color:#4f9ef8">style="color:#1A73E8"><p>Inline code looks like: ="color:#4f9ef8">style="color:#1A73E8"><code>print("hello")="color:#4f9ef8">style="color:#1A73E8"></code>="color:#4f9ef8">style="color:#1A73E8"></p>1011="color:#4f9ef8">style="color:#1A73E8"><hr />1213="color:#4f9ef8">style="color:#1A73E8"><p>After the divider line above.="color:#4f9ef8">style="color:#1A73E8"></p>
Pro tip: Use <strong> and <em> for meaning, not just for styling. If you just want bold text for aesthetic reasons, use CSS instead. Semantic tags help screen readers communicate importance to visually impaired users.
Links & Images
Links and images are what turn HTML from plain text into a connected web. The <a> tag (anchor) creates a clickable link to another page, a file or an email address. The <img> tag displays an image. Both use attributes — extra information inside the opening tag — to know where to point and what to show.
Hyperlinks with the <a> Tag
The <a> tag needs an href attribute — it tells the browser where to go when clicked. Use target="_blank" to open the link in a new tab. Use a # as the href when you want a placeholder link that goes nowhere (useful when building layouts). The text between <a> and </a> is what the user clicks.
1="color:#4f9ef8">style="color:#6b7280"><!-- Link to an external website -->2="color:#4f9ef8">style="color:#1A73E8"><a ="color:#4f9ef8">href="https://codeattelier.com">Visit CodeLearn Pro="color:#4f9ef8">style="color:#1A73E8"></a>34="color:#4f9ef8">style="color:#6b7280"><!-- Opens in a new tab -->5="color:#4f9ef8">style="color:#1A73E8"><a ="color:#4f9ef8">href="https://google.com" ="color:#4f9ef8">target="_blank">6 Open Google in new tab7="color:#4f9ef8">style="color:#1A73E8"></a>89="color:#4f9ef8">style="color:#6b7280"><!-- Link to a section on the same page -->10="color:#4f9ef8">style="color:#1A73E8"><a ="color:#4f9ef8">href="#about">Jump to About section="color:#4f9ef8">style="color:#1A73E8"></a>1112="color:#4f9ef8">style="color:#6b7280"><!-- Email link -->13="color:#4f9ef8">style="color:#1A73E8"><a ="color:#4f9ef8">href="mailto:hello@example.com">Send us an email="color:#4f9ef8">style="color:#1A73E8"></a>1415="color:#4f9ef8">style="color:#6b7280"><!-- Placeholder link (goes nowhere) -->16="color:#4f9ef8">style="color:#1A73E8"><a ="color:#4f9ef8">href="#">Click me="color:#4f9ef8">style="color:#1A73E8"></a>
Pro tip: Always add rel="noopener noreferrer" when using target="_blank". Without it, the linked page can access your page's window object — which is a security risk. Most linters will warn you about this.
Images with the <img> Tag
The <img> tag is self-closing — it has no closing tag. The src attribute is the path to the image file. The alt attribute is critical — it describes the image for screen readers and displays if the image fails to load. The width and height attributes tell the browser the size so it can reserve space before the image loads.
1="color:#4f9ef8">style="color:#6b7280"><!-- Image from a URL -->2="color:#4f9ef8">style="color:#1A73E8"><img3 ="color:#4f9ef8">src="https://via.placeholder.com/300x150"4 ="color:#4f9ef8">alt="A placeholder image"5 ="color:#4f9ef8">width="300"6 ="color:#4f9ef8">height="150"7/>89="color:#4f9ef8">style="color:#6b7280"><!-- Image from your own project folder -->10="color:#4f9ef8">style="color:#1A73E8"><img11 ="color:#4f9ef8">src="/images/hero.webp"12 ="color:#4f9ef8">alt="Hero banner showing our product"13 ="color:#4f9ef8">width="800"14 ="color:#4f9ef8">height="400"15/>1617="color:#4f9ef8">style="color:#6b7280"><!-- Image with a caption using figure -->18="color:#4f9ef8">style="color:#1A73E8"><figure>19 ="color:#4f9ef8">style="color:#1A73E8"><img ="color:#4f9ef8">src="/images/team.jpg" ="color:#4f9ef8">alt="Our team" ="color:#4f9ef8">width="400" ="color:#4f9ef8">height="250" />20 ="color:#4f9ef8">style="color:#1A73E8"><figcaption>Our amazing team in 2026="color:#4f9ef8">style="color:#1A73E8"></figcaption>21="color:#4f9ef8">style="color:#1A73E8"></figure>
Pro tip: Never skip the alt attribute. An empty alt="" is acceptable for purely decorative images, but for any image that communicates meaning, write a clear description. It matters for SEO — search engines cannot see images, they read alt text.
Lists
Lists are everywhere on the web — navigation menus, shopping lists, step-by-step instructions, feature lists. HTML has two main types: unordered lists (bullet points) for items where the order does not matter, and ordered lists (numbered) for items where the sequence is important. Both use <li> tags for each item.
Unordered Lists (Bullet Points)
The <ul> tag creates a bullet-point list. Each item is wrapped in a <li> (list item) tag. Use unordered lists when the order of items does not matter — like a list of ingredients, features or navigation links. You can nest lists inside other lists to create sub-items.
1="color:#4f9ef8">style="color:#6b7280"><!-- Basic bullet list -->2="color:#4f9ef8">style="color:#1A73E8"><ul>3 ="color:#4f9ef8">style="color:#1A73E8"><li>HTML — structure="color:#4f9ef8">style="color:#1A73E8"></li>4 ="color:#4f9ef8">style="color:#1A73E8"><li>CSS — styling="color:#4f9ef8">style="color:#1A73E8"></li>5 ="color:#4f9ef8">style="color:#1A73E8"><li>JavaScript — interactivity="color:#4f9ef8">style="color:#1A73E8"></li>6="color:#4f9ef8">style="color:#1A73E8"></ul>78="color:#4f9ef8">style="color:#6b7280"><!-- Nested list (list inside a list) -->9="color:#4f9ef8">style="color:#1A73E8"><ul>10 ="color:#4f9ef8">style="color:#1A73E8"><li>Front-End11 ="color:#4f9ef8">style="color:#1A73E8"><ul>12 ="color:#4f9ef8">style="color:#1A73E8"><li>HTML="color:#4f9ef8">style="color:#1A73E8"></li>13 ="color:#4f9ef8">style="color:#1A73E8"><li>CSS="color:#4f9ef8">style="color:#1A73E8"></li>14 ="color:#4f9ef8">style="color:#1A73E8"><li>JavaScript="color:#4f9ef8">style="color:#1A73E8"></li>15 ="color:#4f9ef8">style="color:#1A73E8"></ul>16 ="color:#4f9ef8">style="color:#1A73E8"></li>17 ="color:#4f9ef8">style="color:#1A73E8"><li>Back-End18 ="color:#4f9ef8">style="color:#1A73E8"><ul>19 ="color:#4f9ef8">style="color:#1A73E8"><li>Python="color:#4f9ef8">style="color:#1A73E8"></li>20 ="color:#4f9ef8">style="color:#1A73E8"><li>Node.js="color:#4f9ef8">style="color:#1A73E8"></li>21 ="color:#4f9ef8">style="color:#1A73E8"></ul>22 ="color:#4f9ef8">style="color:#1A73E8"></li>23="color:#4f9ef8">style="color:#1A73E8"></ul>
Pro tip: Navigation menus on websites are usually built with <ul> and <li> tags, then styled with CSS to look like horizontal menu bars. The semantic structure helps screen readers identify them as navigation.
Ordered Lists (Numbered Steps)
The <ol> tag creates a numbered list. Use it for step-by-step instructions, rankings or any sequence where the order matters. You can change the starting number using the start attribute, and even reverse the order with the reversed attribute.
1="color:#4f9ef8">style="color:#6b7280"><!-- Numbered steps -->2="color:#4f9ef8">style="color:#1A73E8"><ol>3 ="color:#4f9ef8">style="color:#1A73E8"><li>Choose a text editor (VS Code)="color:#4f9ef8">style="color:#1A73E8"></li>4 ="color:#4f9ef8">style="color:#1A73E8"><li>Create a file called index.html="color:#4f9ef8">style="color:#1A73E8"></li>5 ="color:#4f9ef8">style="color:#1A73E8"><li>Write your HTML code="color:#4f9ef8">style="color:#1A73E8"></li>6 ="color:#4f9ef8">style="color:#1A73E8"><li>Open the file in a browser="color:#4f9ef8">style="color:#1A73E8"></li>7="color:#4f9ef8">style="color:#1A73E8"></ol>89="color:#4f9ef8">style="color:#6b7280"><!-- Start at a different number -->10="color:#4f9ef8">style="color:#1A73E8"><p>Continuing from step 4:="color:#4f9ef8">style="color:#1A73E8"></p>11="color:#4f9ef8">style="color:#1A73E8"><ol ="color:#4f9ef8">start="5">12 ="color:#4f9ef8">style="color:#1A73E8"><li>Add CSS styling="color:#4f9ef8">style="color:#1A73E8"></li>13 ="color:#4f9ef8">style="color:#1A73E8"><li>Add JavaScript="color:#4f9ef8">style="color:#1A73E8"></li>14 ="color:#4f9ef8">style="color:#1A73E8"><li>Deploy to the web="color:#4f9ef8">style="color:#1A73E8"></li>15="color:#4f9ef8">style="color:#1A73E8"></ol>
Pro tip: Never use <ol> or <ul> for visual indentation — that is CSS's job. Lists should only be used when you genuinely have a list of items. Search engines understand lists and may display them as featured snippets in search results.
Tables
Tables are for displaying data in rows and columns — like a spreadsheet. Use them for comparison charts, schedules, pricing plans and data grids. The key tags are <table> (the whole table), <thead> (header rows), <tbody> (data rows), <tr> (each row), <th> (header cell) and <td> (data cell).
Building a Data Table
A table always follows the same structure: the <table> wraps everything, <thead> contains the header row, and <tbody> contains the data rows. Each row is a <tr>. Header cells use <th> — they are bold by default and have semantic meaning. Data cells use <td>.
1="color:#4f9ef8">style="color:#1A73E8"><table>2 ="color:#4f9ef8">style="color:#1A73E8"><thead>3 ="color:#4f9ef8">style="color:#1A73E8"><tr>4 ="color:#4f9ef8">style="color:#1A73E8"><th>Name="color:#4f9ef8">style="color:#1A73E8"></th>5 ="color:#4f9ef8">style="color:#1A73E8"><th>Language="color:#4f9ef8">style="color:#1A73E8"></th>6 ="color:#4f9ef8">style="color:#1A73E8"><th>Score="color:#4f9ef8">style="color:#1A73E8"></th>7 ="color:#4f9ef8">style="color:#1A73E8"></tr>8 ="color:#4f9ef8">style="color:#1A73E8"></thead>9 ="color:#4f9ef8">style="color:#1A73E8"><tbody>10 ="color:#4f9ef8">style="color:#1A73E8"><tr>11 ="color:#4f9ef8">style="color:#1A73E8"><td>Alice="color:#4f9ef8">style="color:#1A73E8"></td>12 ="color:#4f9ef8">style="color:#1A73E8"><td>Python="color:#4f9ef8">style="color:#1A73E8"></td>13 ="color:#4f9ef8">style="color:#1A73E8"><td>95="color:#4f9ef8">style="color:#1A73E8"></td>14 ="color:#4f9ef8">style="color:#1A73E8"></tr>15 ="color:#4f9ef8">style="color:#1A73E8"><tr>16 ="color:#4f9ef8">style="color:#1A73E8"><td>Bob="color:#4f9ef8">style="color:#1A73E8"></td>17 ="color:#4f9ef8">style="color:#1A73E8"><td>JavaScript="color:#4f9ef8">style="color:#1A73E8"></td>18 ="color:#4f9ef8">style="color:#1A73E8"><td>88="color:#4f9ef8">style="color:#1A73E8"></td>19 ="color:#4f9ef8">style="color:#1A73E8"></tr>20 ="color:#4f9ef8">style="color:#1A73E8"><tr>21 ="color:#4f9ef8">style="color:#1A73E8"><td>Charlie="color:#4f9ef8">style="color:#1A73E8"></td>22 ="color:#4f9ef8">style="color:#1A73E8"><td>HTML/CSS="color:#4f9ef8">style="color:#1A73E8"></td>23 ="color:#4f9ef8">style="color:#1A73E8"><td>92="color:#4f9ef8">style="color:#1A73E8"></td>24 ="color:#4f9ef8">style="color:#1A73E8"></tr>25 ="color:#4f9ef8">style="color:#1A73E8"></tbody>26="color:#4f9ef8">style="color:#1A73E8"></table>
Pro tip: Use tables ONLY for tabular data — never for page layout. In the early web, developers used tables to position content on the page. That is now considered bad practice. Use CSS Grid or Flexbox for layout instead.
Semantic & Forms
Semantic HTML uses tags that describe the purpose of the content — not just how it looks. Tags like <header>, <nav>, <main>, <article>, <section> and <footer> tell browsers, search engines and screen readers what each part of the page is for. Combined with forms for user input, semantic HTML makes your pages professional, accessible and well-ranked.
Semantic Page Layout
This is the structure of a real professional webpage. Instead of wrapping everything in <div> tags, semantic elements give every section a meaningful name. Screen readers announce these regions to visually impaired users. Search engines weight content inside <main> and <article> more heavily for SEO.
1="color:#4f9ef8">style="color:#1A73E8"><header>2 ="color:#4f9ef8">style="color:#1A73E8"><h1>CodeLearn Pro="color:#4f9ef8">style="color:#1A73E8"></h1>3 ="color:#4f9ef8">style="color:#1A73E8"><nav>4 ="color:#4f9ef8">style="color:#1A73E8"><a ="color:#4f9ef8">href="/">Home="color:#4f9ef8">style="color:#1A73E8"></a>5 ="color:#4f9ef8">style="color:#1A73E8"><a ="color:#4f9ef8">href="/languages">Languages="color:#4f9ef8">style="color:#1A73E8"></a>6 ="color:#4f9ef8">style="color:#1A73E8"><a ="color:#4f9ef8">href="/about">About="color:#4f9ef8">style="color:#1A73E8"></a>7 ="color:#4f9ef8">style="color:#1A73E8"></nav>8="color:#4f9ef8">style="color:#1A73E8"></header>910="color:#4f9ef8">style="color:#1A73E8"><main>11 ="color:#4f9ef8">style="color:#1A73E8"><article>12 ="color:#4f9ef8">style="color:#1A73E8"><h2>Learn HTML Today="color:#4f9ef8">style="color:#1A73E8"></h2>13 ="color:#4f9ef8">style="color:#1A73E8"><p>HTML is the foundation of every website...="color:#4f9ef8">style="color:#1A73E8"></p>1415 ="color:#4f9ef8">style="color:#1A73E8"><section>16 ="color:#4f9ef8">style="color:#1A73E8"><h3>Why Learn HTML?="color:#4f9ef8">style="color:#1A73E8"></h3>17 ="color:#4f9ef8">style="color:#1A73E8"><p>Every web page uses HTML to define structure...="color:#4f9ef8">style="color:#1A73E8"></p>18 ="color:#4f9ef8">style="color:#1A73E8"></section>19 ="color:#4f9ef8">style="color:#1A73E8"></article>2021 ="color:#4f9ef8">style="color:#1A73E8"><aside>22 ="color:#4f9ef8">style="color:#1A73E8"><h3>Related Topics="color:#4f9ef8">style="color:#1A73E8"></h3>23 ="color:#4f9ef8">style="color:#1A73E8"><p>CSS, JavaScript, Web Development="color:#4f9ef8">style="color:#1A73E8"></p>24 ="color:#4f9ef8">style="color:#1A73E8"></aside>25="color:#4f9ef8">style="color:#1A73E8"></main>2627="color:#4f9ef8">style="color:#1A73E8"><footer>28 ="color:#4f9ef8">style="color:#1A73E8"><p>© 2026 CodeLearn Pro. Free forever.="color:#4f9ef8">style="color:#1A73E8"></p>29="color:#4f9ef8">style="color:#1A73E8"></footer>
Pro tip: Use one <h1> per page, one <main> per page, and one <header>/<footer> for the site (you can have additional <header>/<footer> inside <article> elements for that specific article). These rules matter for both SEO and accessibility.
Forms — Getting User Input
Forms let users interact with your page — login forms, contact forms, search bars, surveys. The <form> tag wraps all input fields. Each <input> has a type (text, email, password, checkbox). The <label> tags describe each field — clicking a label focuses the input. The action attribute is where the form data is sent when submitted.
1="color:#4f9ef8">style="color:#1A73E8"><form ="color:#4f9ef8">action="/submit" ="color:#4f9ef8">method="POST">23 ="color:#4f9ef8">style="color:#1A73E8"><label ="color:#4f9ef8">for="name">Full Name:="color:#4f9ef8">style="color:#1A73E8"></label>4 ="color:#4f9ef8">style="color:#1A73E8"><input ="color:#4f9ef8">type="text"5 ="color:#4f9ef8">id="name"6 ="color:#4f9ef8">name="name"7 ="color:#4f9ef8">placeholder="Enter your name"8 required />910 ="color:#4f9ef8">style="color:#1A73E8"><label ="color:#4f9ef8">for="email">Email Address:="color:#4f9ef8">style="color:#1A73E8"></label>11 ="color:#4f9ef8">style="color:#1A73E8"><input ="color:#4f9ef8">type="email"12 ="color:#4f9ef8">id="email"13 ="color:#4f9ef8">name="email"14 ="color:#4f9ef8">placeholder="you@example.com"15 required />1617 ="color:#4f9ef8">style="color:#1A73E8"><label ="color:#4f9ef8">for="level">Skill Level:="color:#4f9ef8">style="color:#1A73E8"></label>18 ="color:#4f9ef8">style="color:#1A73E8"><select ="color:#4f9ef8">id="level" ="color:#4f9ef8">name="level">19 ="color:#4f9ef8">style="color:#1A73E8"><option ="color:#4f9ef8">value="beginner">Beginner="color:#4f9ef8">style="color:#1A73E8"></option>20 ="color:#4f9ef8">style="color:#1A73E8"><option ="color:#4f9ef8">value="intermediate">Intermediate="color:#4f9ef8">style="color:#1A73E8"></option>21 ="color:#4f9ef8">style="color:#1A73E8"><option ="color:#4f9ef8">value="advanced">Advanced="color:#4f9ef8">style="color:#1A73E8"></option>22 ="color:#4f9ef8">style="color:#1A73E8"></select>2324 ="color:#4f9ef8">style="color:#1A73E8"><label>25 ="color:#4f9ef8">style="color:#1A73E8"><input ="color:#4f9ef8">type="checkbox" ="color:#4f9ef8">name="newsletter" />26 Subscribe to newsletter27 ="color:#4f9ef8">style="color:#1A73E8"></label>2829 ="color:#4f9ef8">style="color:#1A73E8"><button ="color:#4f9ef8">type="submit">Send Message="color:#4f9ef8">style="color:#1A73E8"></button>3031="color:#4f9ef8">style="color:#1A73E8"></form>
Pro tip: Always connect <label> to <input> using the for and id attributes — they must match. This lets users click the label text to focus the input field, which is especially helpful on mobile. It also tells screen readers which label belongs to which input.
You finished the HTML tutorial!
You now know document structure, headings, text, links, images, lists, tables and semantic layout. This is the foundation every web developer builds on. Your next step is CSS — to make everything look great.