HTML Headings, Paragraphs and Text Formatting with Examples

nn

You have made it past the basics covered in HTML Tags, Elements and Attributes Explained with Examples — now let us make HTML do something visible. Text formatting is where your first webpage starts looking like a real webpage. Headings, paragraphs, bold text, italic text — you will use these in every single HTML document you ever write. There are also a few things about how these elements behave that are not obvious at first glance.

nn

HTML Headings — h1 Through h6

nn

HTML gives you six levels of headings, from <h1> down to <h6>. h1 is the largest and most important. h6 is the smallest. Browsers display them in decreasing size by default, but the real purpose of heading levels is structure and meaning — not just visual size.

n

<h1>Main Page Title</h1>n<h2>Section Heading</h2>n<h3>Sub-section Heading</h3>n<h4>Smaller Sub-section</h4>n<h5>Even Smaller</h5>n<h6>Smallest Heading</h6>

nn

One thing that matters a lot for SEO and accessibility — every page should have exactly one <h1>. It tells search engines and screen readers what the page is fundamentally about. After that, use <h2> for main sections, <h3> for sub-sections, and so on in logical order. Never skip levels randomly or use heading tags just to make text bigger — that is what CSS is for.

nn

Paragraphs in HTML

nn

The <p> tag creates a paragraph. The browser automatically adds space above and below each paragraph so your text does not all blur together into one block.

n

<p>HTML was invented by Tim Berners-Lee in 1991.</p>n<p>It has gone through many versions and improvements since then.</p>

nn

Something that catches beginners off guard: extra spaces and line breaks inside your HTML code don’t appear on the webpage. You can press Enter ten times inside a <p> tag and the browser still renders it as a single continuous line of text. The browser collapses all that whitespace. If you want an actual line break, you need to explicitly use the <br> tag.

n

<p>Line one.<br>Line two starts right here.</p>

nn

Bold and Italic Text

nn

There are two ways to make text bold — <strong> and <b>. Two ways to make text italic — <em> and <i>. They look visually identical but mean different things semantically, and that distinction matters.

nn

<strong> signals that the content is important. Screen readers may announce it differently to visually impaired users. <b> just makes text visually bold without implying any importance. The same logic applies to <em> (meaningful emphasis) versus <i> (just visual italic styling). For most writing, use <strong> and <em> — they carry meaning, which is better for accessibility and search engines.

n

<p>This is <strong>very important</strong> information.</p>n<p>The term <em>semantic HTML</em> means HTML that describes meaning.</p>

nn

Other Useful Text Formatting Tags

nn

HTML has a handful of other text tags you will encounter. <mark> highlights text like a yellow marker pen. <del> shows deleted text with a strikethrough line. <ins> underlines text to indicate it was inserted. <sub> creates subscript useful for chemical formulas. <sup> creates superscript good for footnotes or mathematical notation.

n

<p>Water is written as H<sub>2</sub>O.</p>n<p>Price was <del>$50</del> — now <mark>$30</mark>.</p>n<p>Area formula: r<sup>2</sup></p>

nn

Preformatted Text and Code Display

nn

When displaying code or any content where spacing and line breaks matter exactly, the <pre> tag preserves all whitespace and line breaks as written. Combine it with <code> for displaying code samples — which is exactly what every tutorial site uses.

n

<pre><code>nfunction greet(name) {n    return "Hello, " + name;n}n</code></pre>

nn

The browser renders the content exactly as indented and spaced in the source file. Perfect for tutorials and documentation where the formatting of code itself is important.

nn

Now that text formatting is clear, the next step is learning how to connect pages together. Head to HTML Links and Anchor Tags — Complete Tutorial with Examples and learn how to turn plain text into clickable links — the feature that makes the web actually a web.

HTML Links and Anchor Tags — Complete Tutorial with Examples

nn

Links are what make the web a web. Without them, every webpage would just be an isolated document sitting alone on a server somewhere. The ability to connect pages to each other, to other sites, to sections within the same page — that is genuinely what makes the internet function the way it does. If you have been following this series from What is HTML? A Complete Beginner Guide with Examples, this is one of the most satisfying elements to learn because you can see it working immediately.

nn

The HTML element for creating links is the anchor tag — <a>. It’s called an anchor because the original idea was to anchor connections between documents. Let’s look at how it works.

nn

Basic Link Syntax

nn

The href attribute (hyperlink reference) is what makes the link actually work. Without it, <a> is just styled text that goes nowhere.

n

<a href="https://www.yuvajobs.com">Visit YuvaJobs</a>

nn

This renders as a clickable link. The text between the tags is what the user sees and clicks. The href value is the destination. The browser handles the rest — underlining the text, changing the cursor to a pointer on hover, and navigating when clicked.

nn

Absolute vs Relative URLs

nn

This trips up more beginners than almost anything else in HTML. An absolute URL is the complete web address including the domain. A relative URL is a path relative to the current file’s location.

n

<!-- Absolute URL -->n<a href="https://www.yuvajobs.com/tutorials/html/html-tables-complete-tutorial/">HTML Tables</a>nn<!-- Relative URL -->n<a href="../html-tables-complete-tutorial/">HTML Tables</a>

nn

For internal links within your own site, relative URLs are cleaner. For linking to other websites, you always need absolute URLs. On a platform like WordPress, using the full absolute URL for all internal links avoids any path confusion entirely.

nn

Opening Links in a New Tab

nn

By default, links open in the same browser tab. To open in a new tab — standard practice when linking to external websites — add the target=”_blank” attribute.

n

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google</a>

nn

The rel=”noopener noreferrer” part is a security measure that should always accompany target=”_blank”. Without it, the opened tab can technically access the original page through JavaScript — a vulnerability known as reverse tabnapping. Always include it.

nn

Linking to a Section on the Same Page

nn

You can link to a specific section within the same page using an id attribute as the target. This is exactly how table of contents links work on Wikipedia and long documentation pages.

n

<!-- The target section -->n<h2 id="contact-section">Contact Us</h2>nn<!-- The link that jumps to it -->n<a href="#contact-section">Jump to Contact</a>

nn

The # symbol tells the browser this is an in-page anchor, not an external URL. When clicked, the page scrolls to the element with that matching id. You can also link to a section on a different page by combining the page URL with the anchor: href=”/about/#team-section”.

nn

Email and Phone Links

nn

HTML links are not just for webpages. You can create a link that opens the user’s email client with a pre-filled address using the mailto: protocol.

n

<a href="mailto:hello@yuvajobs.com">Send us an email</a>n<a href="tel:+911234567890">Call us</a>

nn

Mobile browsers recognise the tel: link and prompt the user to start a call. Really useful for contact pages on sites with mobile visitors.

nn

Making an Image a Clickable Link

nn

Because <a> can wrap around any inline content, you can make an image clickable by nesting <img> inside <a>.

n

<a href="https://www.yuvajobs.com">n  <img src="logo.png" alt="YuvaJobs Logo">n</a>

nn

Clicking the image navigates to the href destination. This is the standard way to make logos link back to the homepage — something found on almost every website ever built.

nn

Now that linking is solid, let us move into visuals. The next tutorial covers HTML Images — How to Add and Format Images in HTML — how to add images to pages, what the alt attribute actually does for accessibility and SEO, and how to control image sizing correctly in HTML.

HTML Images — How to Add and Format Images in HTML

nn

A webpage without images is technically functional but missing something important. HTML makes adding images straightforward, though there are several details that beginners skip over — and those details matter for performance, accessibility, and how search engines understand your pages. If you have been following from What is HTML? A Complete Beginner Guide with Examples, you have already seen the <img> tag briefly. Now let us go deep on it.

nn

The Basic Image Tag

nn

The <img> tag is self-closing — no content between tags, no closing tag needed. The two attributes you absolutely must include every time are src and alt.

n

<img src="profile-photo.jpg" alt="Profile photo of the tutorial author">

nn

The src (source) attribute tells the browser where to find the image file. The alt (alternative text) attribute describes the image in words. If the image fails to load, the alt text is shown instead. Screen readers for visually impaired users also read out the alt text — which is why writing a real meaningful description matters. “image” or an empty description helps nobody.

nn

Absolute vs Relative Image Paths

nn

Just like with links in HTML Links and Anchor Tags — Complete Tutorial with Examples, image paths can be absolute or relative. If your image is hosted at a full URL, use the complete address. If it lives in the same folder as your HTML file, just use the filename.

n

<!-- Absolute path -->n<img src="https://www.yuvajobs.com/images/logo.png" alt="YuvaJobs logo">nn<!-- Same folder as HTML file -->n<img src="logo.png" alt="YuvaJobs logo">nn<!-- Inside an images subfolder -->n<img src="images/logo.png" alt="YuvaJobs logo">

nn

Setting Image Width and Height

nn

You can control image dimensions with the width and height attributes. Setting them in HTML is actually recommended because it tells the browser how much space to reserve before the image loads — this prevents the layout jumping around as images load in, which is called Cumulative Layout Shift.

n

<img src="banner.jpg" alt="Website banner" width="800" height="400">

nn

Values are in pixels by default. If you set only width and not height, the browser scales proportionally — which is usually what you want. Setting both to values that don’t match the image’s actual ratio will distort it.

nn

The figure and figcaption Elements

nn

When an image needs a caption — like in an article or tutorial — wrap it in a <figure> element and use <figcaption> for the caption text. This is the semantic HTML way to associate an image with its description.

n

<figure>n  <img src="html-structure-diagram.png" alt="Diagram showing HTML document structure">n  <figcaption>Figure 1: The basic structure of every HTML document.</figcaption>n</figure>

nn

Search engines understand that <figcaption> describes the adjacent image. It is better for SEO and accessibility than just dropping an image without any surrounding context.

nn

Image File Formats — Which to Use

nn

JPEG is best for photographs — good compression, smaller file sizes. PNG is better for images needing transparency or sharp edges like logos and icons. SVG is vector-based, scales to any size without losing quality, perfect for icons and logos. WebP is a newer format with better compression than both JPEG and PNG and is now supported by all modern browsers — use it when you want the best loading performance.

nn

Common Image Mistakes to Avoid

nn

Missing alt text is the most frequent mistake. An empty alt=”” is acceptable only for purely decorative images that add zero informational value. For anything meaningful, write a real description of what is in the image.

nn

Using massive uncompressed images is another one that kills page speed. A 5MB photo on a webpage will significantly slow loading. Always compress images before uploading — free tools like TinyPNG and Squoosh handle this well.

nn

Ready to organise content into structured lists? Head over to HTML Lists — Ordered, Unordered and Nested Lists with Examples and learn how to create ordered and unordered lists — one of the most used HTML structures in both navigation menus and content pages.

HTML Lists — Ordered, Unordered and Nested Lists with Examples

nn

Lists are everywhere in HTML — navigation menus, step-by-step instructions, feature comparisons, ingredient lists, to-do items. If you have been following this series from What is HTML? A Complete Beginner Guide with Examples, you will use lists in almost every page you build. HTML gives you three types of lists, and each one serves a distinct purpose.

nn

Unordered Lists — ul and li

nn

An unordered list displays items with bullet points. No numbering, no sequence implied. Use it when the order of items genuinely does not matter.

n

<ul>n  <li>HTML</li>n  <li>CSS</li>n  <li>JavaScript</li>n</ul>

nn

The <ul> tag wraps the whole list. Each item inside uses <li> (list item). The browser renders filled circle bullet points automatically. You can change the bullet style with CSS later, but in plain HTML this is the default rendering.

nn

Ordered Lists — ol and li

nn

An ordered list numbers items automatically. Use it when sequence or ranking genuinely matters — installation steps, top 10 lists, recipes, instructions.

n

<ol>n  <li>Open your text editor</li>n  <li>Write your HTML code</li>n  <li>Save the file as index.html</li>n  <li>Open the file in your browser</li>n</ol>

nn

The browser automatically outputs 1, 2, 3, 4 — you do not write the numbers yourself. HTML handles it. You can change the numbering style using the type attribute: type=”A” for uppercase letters, type=”a” for lowercase, type=”I” for Roman numerals. The start attribute lets you begin from a number other than 1.

n

<ol type="A" start="3">n  <li>Third option</li>n  <li>Fourth option</li>n</ol>

nn

Nested Lists

nn

You can put a list inside a list item to create a nested structure. This is how multi-level navigation menus and document outlines are built.

n

<ul>n  <li>Frontend Developmentn    <ul>n      <li>HTML</li>n      <li>CSS</li>n      <li>JavaScript</li>n    </ul>n  </li>n  <li>Backend Developmentn    <ul>n      <li>PHP</li>n      <li>Python</li>n    </ul>n  </li>n</ul>

nn

The nested <ul> sits inside the <li>, not after it. Indenting your code makes nesting much easier to read and debug. Browsers automatically indent nested lists and change the bullet style — unordered lists typically go from filled circle to open circle to square as nesting deepens.

nn

Description Lists — dl, dt, dd

nn

Description lists are used less often but are perfect for glossaries, term definitions, metadata, and key-value pairs. Three tags work together here.

n

<dl>n  <dt>HTML</dt>n  <dd>HyperText Markup Language — defines the structure of webpages.</dd>nn  <dt>CSS</dt>n  <dd>Cascading Style Sheets — controls visual presentation.</dd>nn  <dt>JavaScript</dt>n  <dd>A scripting language that adds interactivity to pages.</dd>n</dl>

nn

<dl> wraps the list. <dt> is the term. <dd> is the description — the browser indents it automatically. FAQ sections where the question is one style and the answer is indented below it are often a description list underneath.

nn

Lists Inside Navigation Menus

nn

Navigation bars on most professional websites are actually unordered lists styled with CSS. The semantic structure makes perfect sense — a nav menu is a list of links, and that is exactly what <ul> and <li> represent.

n

<nav>n  <ul>n    <li><a href="/">Home</a></li>n    <li><a href="/tutorials/">Tutorials</a></li>n    <li><a href="/contact/">Contact</a></li>n  </ul>n</nav>

nn

CSS then removes the bullets and arranges items horizontally. The underlying HTML remains a proper semantic list — which screen readers and search engines both understand correctly.

nn

Next up is one of the more structured elements in HTML — HTML Tables — How to Create Tables with Examples. Tables are used for displaying data in rows and columns, and understanding them opens up a lot of possibilities for presenting information clearly.

HTML Tables — How to Create Tables with Examples

nn

Tables in HTML are used for one thing — displaying data that has a meaningful row-and-column relationship. Pricing plans, comparison charts, schedules, spreadsheet-style data. If you are following from What is HTML? A Complete Beginner Guide with Examples, tables are one of the more structured elements you will encounter. But once the pattern clicks it becomes second nature to write.

nn

One thing worth mentioning upfront: tables should never be used for page layout. That is what CSS is for. In the early days of the web, developers used tables to position columns of content on the page. Do not do that. Tables are for tabular data only.

nn

Basic Table Structure

nn

A basic HTML table uses four main tags working together: <table>, <tr>, <th>, and <td>.

n

<table>n  <tr>n    <th>Name</th>n    <th>Age</th>n    <th>City</th>n  </tr>n  <tr>n    <td>Raj</td>n    <td>24</td>n    <td>Mumbai</td>n  </tr>n  <tr>n    <td>Priya</td>n    <td>28</td>n    <td>Delhi</td>n  </tr>n</table>

nn

<table> wraps everything. <tr> is a table row. <th> is a header cell — bold and centred by default. <td> is a regular data cell. Each <tr> should have the same number of cells for the table to align properly.

nn

Table Sections — thead, tbody, tfoot

nn

For well-structured semantic tables, group rows into sections using <thead>, <tbody>, and <tfoot>.

n

<table>n  <thead>n    <tr>n      <th>Course</th>n      <th>Duration</th>n      <th>Price</th>n    </tr>n  </thead>n  <tbody>n    <tr>n      <td>HTML Basics</td>n      <td>2 hours</td>n      <td>Free</td>n    </tr>n    <tr>n      <td>CSS Fundamentals</td>n      <td>3 hours</td>n      <td>Free</td>n    </tr>n  </tbody>n  <tfoot>n    <tr>n      <td colspan="2">Total</td>n      <td>Free</td>n    </tr>n  </tfoot>n</table>

nn

This structure helps browsers, screen readers, and CSS target specific parts of the table independently. <thead> holds header rows. <tbody> holds the main data rows. <tfoot> holds footer rows like totals or summaries.

nn

Spanning Columns and Rows — colspan and rowspan

nn

Sometimes a single cell needs to stretch across multiple columns or multiple rows. The colspan attribute handles horizontal spanning. rowspan handles vertical spanning.

n

<table>n  <tr>n    <th colspan="2">Full Name</th>n    <th>Score</th>n  </tr>n  <tr>n    <td>First</td>n    <td>Last</td>n    <td>95</td>n  </tr>n</table>

nn

The colspan=”2″ makes the “Full Name” header span two columns — covering both First and Last columns below it. Rowspan works the same logic but vertically across rows. Be careful with these — miscounting cells when using span attributes is a common source of broken table layouts.

nn

Adding a Table Caption

nn

The <caption> element adds a visible title to the table. It goes immediately after the <table> opening tag and is displayed centred above the table by default.

n

<table>n  <caption>Top Programming Languages — 2025 Rankings</caption>n  <tr>n    <th>Language</th>n    <th>Rank</th>n  </tr>n  <tr><td>Python</td><td>1</td></tr>n  <tr><td>JavaScript</td><td>2</td></tr>n</table>

nn

It is a small addition but it significantly improves accessibility for screen reader users who navigate by table headings.

nn

Next in the series is probably the most powerful HTML topic for building interactive pages — HTML Forms and Input Elements — Complete Guide with Examples. Forms let users type input, select options, and submit data. They are how login pages, search bars, contact forms, and signup flows are all built.

HTML Forms and Input Elements — Complete Guide with Examples

nn

Forms are how users interact with websites. Every time you log into a site, search for something, fill in a contact form, or sign up for a newsletter — you are using an HTML form. If you have been following from What is HTML? A Complete Beginner Guide with Examples, this tutorial builds on everything covered so far because forms use attributes heavily, combine multiple element types, and are the first place in HTML where your page starts actually collecting real user input.

nn

Basic Form Structure

nn

A form is created with the <form> tag. The two most important attributes are action and method.

n

<form action="/submit-form" method="POST">n  <!-- form fields go here -->n</form>

nn

The action attribute is the URL where the form data gets sent when submitted. The method attribute defines how — GET sends data as URL parameters visible in the browser address bar, POST sends it in the request body where it is not visible. For any form collecting passwords or sensitive data, always use POST.

nn

Text, Email and Password Inputs

nn

The most common form element is the text input. The <label> element connects a visible label to the input, which is important for accessibility.

n

<form action="/register" method="POST">nn  <label for="username">Username:</label>n  <input type="text" id="username" name="username" placeholder="Enter your username">nn  <label for="email">Email Address:</label>n  <input type="email" id="email" name="email" placeholder="you@example.com">nn  <label for="password">Password:</label>n  <input type="password" id="password" name="password">nn  <button type="submit">Create Account</button>nn</form>

nn

The for attribute on <label> must match the id on its input — this links them so clicking the label focuses the input. The name attribute is what the server receives when submitted. The placeholder text disappears when the user starts typing.

nn

Radio Buttons and Checkboxes

nn

Radio buttons let users select exactly one option from a group. Checkboxes let users select multiple options. Both use <input> but with different type values.

n

<p>Your experience level:</p>n<input type="radio" id="beginner" name="level" value="beginner">n<label for="beginner">Beginner</label>nn<input type="radio" id="intermediate" name="level" value="intermediate">n<label for="intermediate">Intermediate</label>nn<input type="radio" id="advanced" name="level" value="advanced">n<label for="advanced">Advanced</label>

nn

All radio buttons in the same group must share the same name attribute value. That is how the browser knows they are mutually exclusive — selecting one automatically deselects the others.

n

<p>Technologies you know:</p>n<input type="checkbox" id="html" name="skills" value="html">n<label for="html">HTML</label>nn<input type="checkbox" id="css" name="skills" value="css">n<label for="css">CSS</label>nn<input type="checkbox" id="js" name="skills" value="javascript">n<label for="js">JavaScript</label>

nn

Dropdown Select Menus

nn

The <select> element creates a dropdown menu. Each option uses the <option> tag inside it.

n

<label for="country">Country:</label>n<select id="country" name="country">n  <option value="">-- Select a country --</option>n  <option value="india">India</option>n  <option value="usa">United States</option>n  <option value="uk">United Kingdom</option>n</select>

nn

The value attribute on each <option> is what gets submitted to the server — not the visible text. Adding selected to an option makes it the default selected value when the page loads.

nn

Textarea for Multi-line Input

nn

For longer text — a message, a bio, a comment — use <textarea> instead of <input>. It is resizable and allows multiple lines of text.

n

<label for="message">Your Message:</label>n<textarea id="message" name="message" rows="5" cols="40"n  placeholder="Type your message here..."></textarea>

nn

HTML5 Built-in Form Validation

nn

HTML5 added built-in validation attributes you can apply directly to inputs without writing any JavaScript. The required attribute prevents submission if a field is empty. The minlength and maxlength attributes set character limits. The min and max attributes work on number inputs.

n

<input type="text" name="username" required minlength="3" maxlength="20">n<input type="number" name="age" min="18" max="100">n<input type="email" name="email" required>

nn

The browser handles validation automatically and shows error messages in the user’s language. This is not a replacement for server-side validation — always validate on the server too. But it gives instant feedback to users without any extra code on your side.

nn

With forms understood, you are ready for the structural side of HTML. Head over to HTML Div, Span and Semantic Elements Explained to learn how divs, spans, and semantic elements let you organise your page into logical sections — the foundation of how every real website is actually structured.

What is HTML? A Complete Beginner Guide with Examples

nn

Before you write your first line of HTML, let me ask you something — have you ever right-clicked on a webpage and hit “View Page Source”? If you have, you’ve already seen HTML. All that code, those angle brackets, those odd-looking words like <div> and <p> — that is HTML doing its job. And honestly, it’s not as scary as it looks once you understand what it’s actually doing.

nn

HTML stands for HyperText Markup Language. It is not a programming language — people get confused about this all the time. You are not telling the computer to calculate anything or make decisions. You are simply describing the structure of a page. Think of it like a blueprint for a house. HTML says “here is the heading, here is a paragraph, here is an image” — and the browser builds exactly what you described.

nn

Every single website you have ever visited — Google, YouTube, Amazon — has HTML underneath it. It is the skeleton that holds everything together.

nn

How HTML Actually Works

nn

When you open a webpage, your browser makes a request to a server. The server sends back an HTML file. Your browser reads that file from top to bottom and renders it visually on screen. That is it. No magic. Just a browser reading a structured text file and drawing what it finds inside.

nn

HTML works through tags. Tags are instructions wrapped in angle brackets. Most tags come in pairs — an opening tag and a closing tag — with the content sitting between them.

n

<p>This is a paragraph.</p>

nn

The <p> is the opening tag. The </p> with the forward slash is the closing tag. Everything between them is what gets displayed in the browser. Simple as that.

nn

Your First HTML Page — Written From Scratch

nn

Every HTML page follows a standard skeleton. Here is what the simplest possible HTML page looks like:

n

<!DOCTYPE html>n<html>n  <head>n    <title>My First Page</title>n  </head>n  <body>n    <h1>Hello, World!</h1>n    <p>This is my first webpage.</p>n  </body>n</html>

nn

Let me walk you through each part. The <!DOCTYPE html> line tells the browser this is a modern HTML5 document. The <html> tag wraps everything on the page. Inside, you have two main sections — the <head> and the <body>.

nn

The <head> contains information about the page that visitors don’t see directly — things like the title that shows up in the browser tab, links to stylesheets, and meta information. The <body> is where all the visible content lives. Your text, images, links, everything the user actually reads and sees — it all goes inside <body>.

nn

Why HTML Is the Right Place to Start

nn

If you want to build websites or understand how the internet works — HTML is where every single person starts. There is no shortcut around it. CSS makes things look good. JavaScript makes things interactive. But without HTML, neither of those has anything to work with.

nn

The good news is that basic HTML can genuinely be learned in a few days. You don’t need special software. You can open Notepad on Windows or TextEdit on Mac, write some HTML, save the file as .html, and open it in your browser. It works immediately — no installation, no setup, no compiler needed.

nn

I’ve seen complete beginners go from zero knowledge to building a basic working webpage in under an hour. That is how approachable HTML really is when you take it step by step.

nn

What This Tutorial Series Covers

nn

This series is designed to take you from complete beginner to someone who can confidently build a real HTML webpage from scratch. Every tutorial has examples you can type and test yourself. Here is the full path:

nn

Next we cover HTML Tags, Elements and Attributes Explained with Examples — how every tag works and how attributes add extra information to elements. Then HTML Headings, Paragraphs and Text Formatting with Examples so you can start formatting real content. After that, HTML Links and Anchor Tags — Complete Tutorial with Examples teaches you to connect pages together, which is the “HyperText” part of HTML.

nn

From there we move into HTML Images — How to Add and Format Images in HTML, HTML Lists — Ordered, Unordered and Nested Lists with Examples, and HTML Tables — How to Create Tables with Examples — the building blocks of every real-world webpage. Then more structured elements: HTML Forms and Input Elements — Complete Guide with Examples and HTML Div, Span and Semantic Elements Explained. Finally HTML5 New Features Every Beginner Must Know covers modern HTML5 and how professional pages are structured today.

nn

Take it one post at a time. Type the code — don’t just read it. Your hands remembering the syntax is half the learning. Let’s start.