HTML
(HyperText Markup Language)
Linkedin Facebook Whatsapp Tharindu Kulasinge
What is HTML?
HTML stands for HyperText Markup Language
It is the standard language used to create web pages.
HTML is like the skeleton of a web page — it defines what content is on the page and how it is organized.
What can HTML do?
1. Text content – like paragraphs, headings, and titles.
2. Links – clickable items that take you to other pages or websites.
3. Images and videos – to make the page visually appealing.
4. Lists – for organizing information in bullet points or numbered form.
5. Forms – to let users enter information, like name, email, or messages.
6. Tables – to display data in rows and columns.
7. Sections and containers – to organize different parts of a web page, like header, footer, sidebar, or main content.
Document Structure
<html> – Root of an HTML document. <head> – Contains meta-information about the page.
<!DOCTYPE html> <head>
<html> <title>My Page</title>
<head> <meta charset="UTF-8">
<title>My Page</title> </head>
</head>
<body> <link rel="stylesheet" href="[Link]">
Hello World! <link rel="stylesheet" href="[Link]">
</body>
</html> <body> – Contains the visible content.
<body>
<title> – Sets the page title.
<h1>Welcome!</h1>
<title>My Awesome Website</title> </body>
Headings & Text
<h1> to <h6> – Headings <em> – Emphasized/italic text
<h1>Main Heading</h1> <p>This is <em>emphasized</em> text.</p>
<h2>Subheading</h2>
<h3>Smaller Heading</h3> <br> – Line break
<link rel="stylesheet" href="[Link]">
<span> – Inline text styling
<p>This is <span style="color:red">red <hr> – Horizontal line
text</span> inside a paragraph.</p> <hr>
<strong> – Important/bold text <hr> – Horizontal line
<title>My Awesome Website</title> <hr>
Links & Navigation
<a> – Hyperlink <nav> – Navigation section
<a href="[Link] <nav>
target="_blank">Go to Google</a> <a href="#home">Home</a> |
<a href="#about">About</a>
<ul> – Lists </nav>
<ul>
<li>Item 1</li> <ol> – Lists
<li>Item 2</li> <ol>
<li>First</li>
</ul>
<li>Second</li>
</ol>
Images & Media
<img> – Image <video> – Video
<img src="[Link]" alt="My Image" <video width="320" height="240" controls>
width="200"> <source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
<audio> – Audio </video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
Forms & Input
<form> & <input> – Form and text input <textarea> – Multiline input
<form action="/submit" method="post"> <textarea name="message" rows="4" cols="30">Type your
<label for="name">Name:</label> message...</textarea>
<input type="text" id="name" name="name"><br><br>
<button type="submit">Submit</button> <label> – Label for inputs
</form>
<label for="email">Email:</label>
<input type="email" id="email">
<select> & <option> – Dropdown list
<select name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
Layout & Containers
<div> – Block container <article> – Independent content
<div style="background-color:lightblue; padding:10px;"> <article>
This is a div container. <h3>Blog Post</h3>
</div> <p>This is a blog post.</p>
</article>
<section> – Section
<section> <header> – Header
<h2>About Us</h2> <header>
<p>We are a tech company.</p> <h1>My Website</h1>
</section> </header>