Scribd
Upload
1 views

HTML Cheatsheet

HTML is the standard markup language for creating web pages, defining their structure through elements like <html>, <head>, and <body>. It includes various components such as headings, containers, lists, media, tables, links, forms, and meta tags. Additionally, it supports text formatting and special characters, allowing for a rich representation of content.

Uploaded by

freefiretopup606
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

HTML Cheatsheet

HTML is the standard markup language for creating web pages, defining their structure through elements like <html>, <head>, and <body>. It includes various components such as headings, containers, lists, media, tables, links, forms, and meta tags. Additionally, it supports text formatting and special characters, allowing for a rich representation of content.

Uploaded by

freefiretopup606
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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


&amp; (Ampersand)
&lt; (Less than)
&gt; (Greater than)
&copy; (Copyright)

Comments
html
Copy code
<!-- This is a comment -->
es
od
_c
ee
D

You might also like