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>
</body>
</html>
Headings
There are six headings available in HTML, <h1> is the largest among all, and <h6> is the smallest.
<h1> Tag
<h1>Heading 1</h1>
<h2> Tag
<h2>Heading 2</h2>
<h3> Tag
<h3>Heading 3</h3>
<h4> Tag
<h4>Heading 4</h4>
<h5> Tag
<h5>Heading 5</h5>
<h6> Tag
<h6>Heading 6</h6>
Container
Container tags are the tags that contain some data such as text, image, etc. There are several container tags in HTML.
<div> tag
The div tag or division tag is used to make blocks or divisions in the document.
<div> This is div block </div>
<span> tag
The span is a container for inline content
<span> This is span block </span>
<p> tag
The p tag is used to create a paragraph in HTML.
<p> This is a paragraph </p>
<pre> tag
The pre tag represents pre-formatted text.
<pre> Hello World! </pre>
<code> tag
The code tag is used to represent source codes in HTML.
<code>
printf("Hello World!);
</code>
Text Formatting
Text formatting tags in HTML allow you to apply various styles and effects to text. Here are some commonly used text formatting tags:
<u> tag
Represents underlined text.
<u>underlined</u>
<b> tag
Represents bolded text.
<b>bolded</b>
<i> tag
Represents italicized text.
<i>ilaticized</i>
<strong> tag
Represents strong importance or emphasis. Typically displayed as bold text.
<strong>important</strong>
<em> tag
Represents emphasized text. Typically displayed as italicized text.
<em>emphasized</em>
<s> tag
Represents strikethrough text.
<s>strikethrough</s>
<mark> tag
Represents text highlighted for reference or notation.
<mark>highlighted</mark>
<sub> tag
Represents subscript text.
H<sub>2</sub>O
<sup> tag
Represents superscript text.
x<sup>2</sup>
These tags can be used individually or combined to achieve various text formatting effects in your HTML documents. Keep in mind that the presentation of these elements can be influenced by CSS styles applied to your document.
List Tags
Lists in HTML can take various forms, such as numerical, alphabetic, bullet points, or other symbols. HTML allows you to define the type of list and specify individual list items to ensure a well-organized document.
<ol> Tag
This tag is used to create ordered lists, where each list item is numbered.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ul> Tag
This tag is used to create unordered lists, where each list item is preceded by a bullet point or another marker.
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<li> Tag
This tag is used to define individual items within a list.
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
<dl> Tags
The <dl> tag is used to create description lists. The <dt> tag is used to define the term (label), and the <dd> tag is used to define the description.
<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
</dl>
Media Tags
In HTML, media tags are used to embed and control various types of media, such as images, audio, and video. Here are some common media-related tags in HTML:
<img> Tag
This tag is used to embed images on a webpage.
<img src="image.jpg" alt="Description of the image">
<audio> Tag
This tag is used to embed audio content on a webpage.
<audio controls><source src="audio.mp3" type="audio/mp3"></audio>
<video> Tag
This tag is used to embed video content on a webpage.
<video><source src="video.mp4" type="video/mp4"></video>
Table Tag
This tag in HTML is used to create tables on a web page. Tables are useful for organizing and presenting data in a structured format.
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</tbody>
</table>
Link Tags
<a> Tag
This tag creates hyperlinks in HTML.
<a href="https://www.example.com">Visit Example.com</a>
<style> Tag
This tag is used to embed CSS (Cascading Style Sheets) code directly within an HTML document.
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
</style>
<link> Tag
This tag is typically used in the <head> section of an HTML document to link external resources, such as CSS files.
<link rel="stylesheet" type="text/css" href="styles.css">
Form Tags
This tag in HTML is used to create an HTML form that allows users to input data and submit it to a server for processing. Forms are essential for user interaction on websites, such as login forms, registration forms, search forms, and more.
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</form>
Form Elements
HTML provides various form elements that allow users to input data and interact with web pages.
Text Input
<input type="text" id="username" name="username" required>
Password Input
<input type="password" id="password" name="password" required>
Textarea
<textarea id="message" name="message" rows="4" cols="50" required></textarea>
File Input
<input type="file" id="fileInput" name="fileInput">
Number Input
<input type="number" id="quantity" name="quantity" min="1" max="10">
Date Input
<input type="date" id="birthday" name="birthday">
Email Input
<input type="email" id="email" name="email" required>
Radio Buttons
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
Checkboxes
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
Select Dropdown
<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
Submit Button
<input type="submit" value="Submit">
Reset Button
<input type="reset" value="Reset">
Embed Tag
This tag in HTML is used to embed an inline frame, allowing you to display another HTML document within the current document. It is commonly used to embed external content such as videos, maps, or other webpages.
<iframe> Tag
<iframe src="https://www.example.com" width="600" height="400" title="Embedded Content"></iframe>
Comment
Comments allow you to leave notes in your code, which are ignored by browsers.
<!-- This is a comment. -->
Find Me on:
GitHub - github.com/Neyywaar
Twitter - twitter.com/neyywaar