What is HTML?
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Your Content -->
</body>
</html>
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in
D
the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such
ee
as headings, paragraphs, images, hyperlinks, tables, lists, etc.
_c
What is an HTML Element?
od
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
es
Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Visual Representation:
D
ee
_c
od
Containers
es
div: Block-level container
html
Copy code
<div>This is a div block</div>
span: Inline-level container
html
Copy code
<span>This is a span block</span>
p: Paragraph
html
Copy code
<p>This is a paragraph</p>
pre: Preformatted text
html
Copy code
<pre>This is preformatted text</pre>
Visual representation:
Text Formatting
<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
D
<em>Emphasized text</em>
ee
<sub>Subscript text</sub>
<sup>Superscript text</sup>
_c
Visual Representation:
od
Bold text
Important text
Italic text
es
Emphasized text
Subscript text₂
Superscript text²
Lists
Ordered List (ol)
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Unordered List (ul)
<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
</ul>
Media
Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
D
ee
_c
od
Video
es
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Image <img src="image.jpg" alt="Description">
Table
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
D
</tr>
</tbody>
ee
</table>
_c
od
es
Links – Anchor tags
<a href="https://example.com">Visit Example</a>
Forms & Inputs
<form action="/submit">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
Other Input Types:
Password:
D
<input type="password" placeholder="Password">
Radio:
ee
<input type="radio" name="gender" value="male"> Male
Checkbox:
<input type="checkbox" name="subscribe"> Subscribe
_c
File Upload:
<input type="file" name="fileupload">
od
es
Meta Tags
<meta name="description" content="Page description">
<meta name="author" content="Author name">
<meta name="keywords" content="HTML, CSS, JavaScript">
Characters & Symbols
& (Ampersand)
< (Less than)
> (Greater than)
© (Copyright)
Comments
html
Copy code
<!-- This is a comment -->
es
od
_c
ee
D
