Practical Lab

HTML Lab

Free Practice

Write HTML code and preview the result instantly in your browser.

HTML CODE EDITOR

HTML5

Ready

LIVE PREVIEW

Task 01

Heading & Paragraph

Create an <h1> main heading and a descriptive <p> paragraph introducing yourself.

Task 02

Text Formatting

Use <strong>, <em>, <mark>, <br> line breaks and a horizontal rule <hr>.

Task 03

Lists (Ordered & Unordered)

Create an unordered bullet list <ul> of your hobbies and an ordered numbered list <ol> of your daily routine.

Task 04

Hyperlinks

Create a working link using <a href="..." target="_blank"> that connects to a website or resource.

Task 05

Images

Display an image using <img src="..." alt="..." width="..."> with proper descriptive alternative text.

Task 06

HTML Table

Create a 3-column table with a header row (<thead>, <tr>, <th>) and multiple data rows (<td>).

Task 07

Interactive Form

Create a basic input form with <label>, <input type="text">, <select> and a submit <button>.

Task 08

Complete Mini Webpage

Combine headings, paragraphs, formatted text, an image, a hyperlink, and a table into one cohesive web page.

Page Structure

<!DOCTYPE html> Declares the HTML5 document type

<html>...</html> Root container of the webpage

<head>...</head> Metadata, title, styles & scripts

<body>...</body> Visible webpage content

Headings & Text

<h1> to <h6> Headings from largest (h1) to smallest (h6)

<p>Text</p> Defines a text paragraph

<strong>Bold</strong> Important bold text

<em>Italic</em> Emphasized italic text

<br> Inserts a line break (empty tag)

<hr> Inserts a thematic horizontal rule

Links & Media

<a href="url">Link</a> Hyperlink to a URL or page

<img src="img.jpg" alt="..."> Displays an image with alt description

Lists

<ul><li>Item</li></ul> Unordered bulleted list

<ol><li>Item</li></ol> Ordered numbered list

Tables

<table border="1"> Defines an HTML table

<tr>...</tr> Table row

<th>Heading</th> Table header cell

<td>Data</td> Table standard cell

Forms

<input type="text"> Single-line text input field

<button>Click Me</button> Clickable button