- HTML Boilerplate : This is the basic html boilerplate code
<!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>
<-- Content goes here..... -->
</body>
</html>
- HTML comments : Comments are not displayed by the browser, but they can help document your HTML
source code.
<!-- Html comment -->
- Heading Tags : The h1 to h6 tags are used to define headings or subheadings within
a web page. These tags represent different levels of importance or hierarchy, with h1 being the
highest and h6 being the lowest.
h1 tag : This is h1 tag
<h1>h1 tag</h1>
h2 tag : This is h2 tag
<h2>h2 tag</h2>
h3 tag : This is h3 tag
<h3>h3 tag</h3>
h4 tag : This is h4 tag
<h4>h4 tag</h4>
h5 tag : This is h5 tag
<h5>h5 tag</h5>
h6 tag : This is h6 tag
<h6>h6 tag</h6>
- p tag : The p tag is used to define a paragraph of text. The "p" stands for "paragraph."
It is one of the most commonly used tags for organizing and presenting text content on a web page.
<p>This is Paragraph</p>
- pre tag : The pre tag is used to define preformatted text. The "pre" stands for
"preformatted." It allows you to display text exactly as it is written in the HTML code, preserving
whitespace, line breaks, and indentation.
<pre>
Hello
Good morning
This is Kaushal
From SpecBits
</pre>
- span tag : The span tag is typically used when you want to apply CSS styles or add
scripting behaviors to a specific portion of text within a larger block of content.
<p>This is a <span style="color: blue;">blue</span> word.</p>
- ol tag : The ol tag in HTML is used to create an ordered list , which represents a list of items
in a specific order.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
- ul tag : The ul tag in HTML is used to create an unordered list , which represents a list of
items without any specific order or sequence.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
- li tag : The li tag in HTML is used to define an individual item within a list. It stands for
"list item" and is commonly used in both ordered lists (ol) and unordered lists (ul).
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
- a tag :
The a tag in HTML is used to create hyperlinks, also known as anchor links, which allow you to link to
other web pages, files, or specific locations within the same page.
<a href="url">Link text</a>
<a href="https://www.example.com">Visit Example</a>
<a href="#section-id">Jump to Section</a>
<a href="mailto:info@example.com">Contact Us</a>
<a href="documents/document.pdf" download>Download Document</a>
The download attribute, when present, suggests to the browser to download the linked file instead
of navigating to it.
We can use the a tag within a button tag or an image tag img to create clickable
buttons or images that act as links.
- img tag : The img tag in HTML is used to embed images into a web page. It allows you to display
images on your website by referencing the image file using the src attribute.
<img src="image.jpg" alt="Description of the image">
Embedding an image from an external source:
<img src="https://www.example.com/image.jpg" alt="Example Image">
Embedding an image from a local directory:
<img src="images/image.jpg" alt="Example Image">
The src attribute specifies the source URL or file path of the image. It can be an absolute URL
or a relative URL.
The alt attribute provides alternative text for the image. It serves as a textual description of
the image and is displayed if the image fails to load.
- audio tag : The audio tag is used to embed audio content, such as music, sound effects, or
speech, directly into a web page. It provides a way to play audio files without relying on external
plugins or players.
<audio src="audiofile.mp3" controls></audio>
The src attribute points to the location of the audio file "audiofile.mp3".
The controls attribute enables the default audio controls, such as play, pause, and volume
controls, allowing users to interact with the audio player.
You can also provide alternative audio formats by including multiple source elements within the
audio tag. This ensures compatibility across different browsers that support different audio
formats.
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
The source elements provide two audio sources, "audiofile.mp3" in MPEG format and "audiofile.ogg"
in Ogg format. The browser will choose the supported format automatically.
- video tag : The video tag is used to embed videos directly into a web page. It provides a
way to display video content without relying on external plugins or players.
<video src="videofile.mp4" controls></video>
You can add CSS for styling.
<video src="videofile.mp4" controls width="400px" height="500px"></video>
The src attribute points to the location of the video file "videofile.mp4".
The controls attribute enables the default video controls, such as play, pause, volume, and
progress bar,
allowing users to interact with the video player.
You can also provide alternative video formats using multiple source elements within the
video tag to
ensure compatibility across different browsers.
<video controls>
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.webm" type="video/webm">
Your browser does not support the video element.
</video>
The source elements provide two video sources, "videofile.mp4" in MP4 format and "videofile.ogg"
in WebM
format. The browser will choose the supported format automatically.
<video controls autoplay muted>
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.webm" type="video/webm">
Your browser does not support the video tag.
</video>
The autoplay attribute is a boolean attribute.
When present, the video will automatically start playing.
Note:- Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always
allowed.
Add muted after autoplay to let your video file start playing automatically (but muted).
- table tag : The table tag in HTML is used to create tables that organize and display
tabular data in a structured format on a web page. Tables consist of rows and columns, and each cell
within the table contains data.
The table tag serves as the container for the entire table structure.
Rows are defined using the tr (table row) tag. Each row contains cells or data.
Cells within the table are created using the td (table data) tag. They hold the actual data
values.
For header cells, the th (table header) tag is used. It typically appears in the first row of the
table and provides labels for the columns or any additional headings.
The structure of the table is defined by placing the appropriate number of cells within each row. All
rows should have an equal number of cells to maintain the table structure.
CSS can be used to style the table, including its borders, spacing, background colors, fonts, and more.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
The first row contains header cells denoted by th tags, while subsequent rows contain regular
data cells represented by td tags.
Tables are commonly used for displaying structured data, such as financial information, product
listings, timetable schedules, and more. It's important to use tables appropriately and ensure that they
enhance the accessibility and usability of the web page.
For complex table layouts and advanced features, you may need additional attributes and techniques such
as caption for table captions, thead, tbody, and tfoot for sectioning the
table, or CSS frameworks designed specifically for tables.
You can use attributes like colspan and rowspan to span cells across multiple columns or
rows,respectively.
<table>
<caption>Details</caption>
<thead>
<tr>
<th colspan="3">Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
</tbody>
</table>
- form tag : The form tag is used to create an interactive form on a web page. Forms provide
a way for users to input and submit data, such as text, numbers, selections, and more. The data entered
in a form is typically sent to a server for processing.
The form tag serves as the container for all the form elements.
You define various input fields and controls within the form tag.
You can also use attributes like required, placeholder, and pattern to enforce field
validation and provide user-friendly instructions.
<form>
<label>Name:</label>
<input type="text" placeholder="Enter your name">
<label for="email">Email:</label>
<input type="email" required>
<input type="submit" value="Submit">
</form>
- input tag : The input tag is used to create interactive form controls where users can
input or select data. The type attribute of the input tag specifies the type of input control to
be displayed. Here's a breakdown of the input tag and some of its commonly used types with
examples:
<input type="...">
Text Input: <input type="text">
<input type="text">
Email Input: <input type="email">
<input type="email">
Number Input: <input type="number">
<input type="number">
Password Input: <input type="password">
<input type="password">
Date Input: <input type="date">
<input type="date">
Radio Button: <input type="radio">
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
Checkbox: <input type="checkbox">
<input type="checkbox" name="fruit"> Apple
<input type="checkbox" name="fruit"> Banana
- select tag : The select tag is used to create a dropdown list or a selection menu. It
allows users to choose one or more options from a list of predefined values.
The select tag is typically used in conjunction with option tags to define the available
choices. Here's the basic structure of the select tag:
<label>Select</label>
<select>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<!-- More options... -->
</select>
select: The main container tag that creates the dropdown list.
option: The child tags of select that represent individual options within the list.
value: The attribute of the option tag that specifies the value associated with each
option. This value is what gets sent to the server when the form is submitted.
Text content within option: This is the visible text that represents each option in the dropdown
list.
<label for="">Country</label>
<select name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="australia">Australia</option>
</select>
Additionally, the select tag supports other attributes such as name, multiple, and
disabled
name: Specifies the name of the dropdown list, which is used to identify the selected option(s)
when the form is submitted.
multiple: When added to the select tag, it allows users to select multiple options from
the dropdown list.
disabled: Disables the dropdown list, making it non-editable and preventing user interaction.
<label for="">Color</label>
<select name="colors" multiple>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<label for="">Select</label>
<select name="disabled-dropdown" disabled>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
- textarea tag : The textarea tag is used to create a multiline text input area where users
can enter multiple lines of text. It is typically used when you want to allow users to input a longer
text or provide comments, descriptions, or other textual content.
<textarea rows="number_of_rows" cols="number_of_columns">Default text</textarea>
rows: Specifies the number of visible rows or lines in the textarea.
cols: Specifies the number of visible columns or characters per line in the textarea.
Text content within textarea: This is the default text or initial value that appears inside the
textarea. It can be pre-filled with content or left blank as a placeholder.
<textarea rows="4" cols="40">Enter your message here</textarea>
The textarea tag can also have additional attributes, such as name and placeholder:
name: Specifies the name of the textarea, which is used to identify the input when the form is
submitted.
placeholder: Provides a hint or example text that appears inside the textarea as a placeholder to
guide the user's input.
<textarea name="message" rows="6" cols="50" placeholder="Type your message here"></textarea>
The textarea has a name attribute set to "message", which will be used to identify the
input when the form is submitted.
- sub tag : The sub tag is used to render text as subscript, appearing slightly below the
normal line of text. It is commonly used for chemical formulas, mathematical equations, footnotes, and
other instances where smaller text is required below the baseline.
H<sub>2</sub>O
- sup tag : The sup tag is used to display text as superscript, appearing slightly above the
normal line of text. It is commonly used for mathematical exponents, footnotes, ordinal numbers, and
other instances where smaller text is required above the baseline.
x<sup>2</sup>
- b tag : The b tag is an HTML element used to define text that should be displayed in a
bold font weight. It is one of the basic formatting tags in HTML and is often used to emphasize certain
words or phrases within a paragraph or heading.
<p>This is a <b>bold</b> text.</p>
- strong tag : The strong tag is an HTML element used to define text that should be
displayed with strong importance or emphasis.
It is similar to the b tag in that it also renders text in a bold font weight by default, but it
goes beyond
just visual styling and carries semantic meaning.
<p>This is a <strong>strong</strong> text.</p>
It's worth noting that the b tag is a presentational element, meaning it is used for styling
purposes rather than conveying semantic meaning. For emphasizing or highlighting text that carries
semantic meaning, it is recommended to use the strong tag instead.
- br tag : The br tag is an HTML element used to create line breaks within the content of a
webpage. It stands for "line break." It is a self-closing tag, which means it does not require a closing
tag.
<p>This is the first line.<br>
This is the second line.</p>
It's important to note that the br tag should not be used excessively for general text formatting
purposes. HTML provides other elements and CSS for structuring and styling content.
- hr tag : The hr tag is an HTML element used to insert a horizontal rule or line across the
content of a webpage. It stands for "horizontal rule." It is a self-closing tag, which means it does not
require a closing tag.
<p>This is some text above the horizontal rule.</p>
<hr>
<p>This is some text below the horizontal rule.</p>
- button tag : The button tag is an HTML element used to create a clickable button on a
webpage. It represents a button control that users can interact with to perform an action or trigger a
specific functionality.
<button type="button">Click Me!</button>
The type attribute specifies the behavior of the button. The type="button" attribute indicates
that the button is a regular button control and doesn't have any specific default behavior. However,
there are other values that can be used with the type attribute:
type="submit": This indicates that the button is used to submit a form when clicked. It is often
used in conjunction with a form element.
<button type="submit">Submit!</button>
type="reset": This indicates that the button is used to reset a form to its initial values.
<button type="reset">Reset!</button>
type="image": This allows you to use an image as the button, where the image itself acts as the
clickable area.
<button type="image">Add image!</button>
- footer tag : The footer tag is an HTML element used to define the footer section of a
webpage or a section within a larger document. It represents the bottom part of a webpage, typically
containing information about the author, copyright notice, contact information, and other related
content.
<footer>
<p>© 2023 MyWebsite. All rights reserved.</p>
<p>Contact: email@example.com</p>
</footer>
The footer tag is typically used once per webpage to define the primary footer section. However,
it can also be used within other structural elements, such as article, section, or
main, to create a footer specific to that particular section of content.
- div tag : The div tag is an HTML element used to create a generic container or division on
a webpage. It is a versatile and widely used element that does not carry any inherent meaning or
semantic value. Instead, it serves as a structural and styling element that allows developers to group
and manipulate other elements.
<div class="container">
<h1>Welcome to my website!</h1>
<p>This is the main content of the page.</p>
</div>
The div tag is often used in conjunction with CSS to apply styling, positioning, and layout
properties to the grouped elements. By assigning a class or an ID to the div, you can target and
style it specifically or select its child elements for styling purposes.
Furthermore, the div tag can be nested within other div tags, allowing for the creation of
complex structures and layouts. This nesting can help organize and group elements together based on
their functional or visual relationships.
Due to its lack of semantic meaning, the div tag is commonly used as a building block for
creating the structure of a webpage or separating sections of content. It provides a flexible and
adaptable container that can be styled and manipulated according to the specific design and layout
requirements.
- header tag : The header tag in HTML is a semantic element that represents the introductory
or navigational section of a web page or a section within it. It is typically used to group together
elements that appear at the top of a page, such as the site logo, site title, navigation menu, search
bar, or any other content that is considered to be part of the header.
The header tag is usually placed within the body element and can be used once per page or
multiple times within different sections of the page.
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!-- Rest of the page content goes here -->
</body>
By using the header tag, you provide semantic meaning to the content within it, making it easier
for search engines and assistive technologies to understand the purpose and structure of the content.
- section tag : The section tag in HTML is a semantic element that represents a standalone
section of a web page or document. It is typically used to group related content together and provide
structure and organization to the page.
The section tag is meant to be used for larger content areas that can be considered as distinct
and self-contained sections. These sections can be thought of as chapters, topics, or major parts of the
document.
<body>
<header>
<!-- header content goes here -->
</header>
<section>
<h2>About Us</h2>
<p>This section contains information about our company and its history.</p>
</section>
<section>
<h2>Products</h2>
<p>This section showcases our range of products and their features.</p>
</section>
<footer>
<!-- footer content goes here -->
</footer>
</body>
It's important to note that the section tag should be used when there is no more appropriate
semantic element available. If there is a more specific semantic element that accurately describes the
purpose of the content, such as article, aside, or main, it is generally
recommended to use those instead.
- nav tag : The nav tag in HTML is used to define a section of a web page that contains
navigation links. It is typically used to create menus, navigation bars, or any other set of links that
help users navigate through different sections or pages of a website.
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
It's important to note that using the nav tag alone does not automatically create a functional
navigation menu. CSS styling and JavaScript may be required to style the navigation and make it
interactive, such as adding hover effects or handling click events.
- script tag : The script tag in HTML is used to embed or reference JavaScript code within
an HTML document. JavaScript is a
programming language that allows you to add interactivity, dynamic behavior, and other client-side
functionality to web pages.
There are two primary ways to use the script tag in HTML:
Inline Script: You can include JavaScript code directly within the script tags in the HTML
document.
<script>
// JavaScript code goes here
alert("Hello, World!");
</script>
External Script: You can also include JavaScript code from an external file by specifying the
source file using the src attribute of the script tag.
<script src="script.js"></script>
It's important to note that the script tag can be placed anywhere within the HTML document, but
it is typically placed in the head section or at the end of the
section. Placing scripts at the end of the body section is a common practice because it
allows the HTML content to load before executing the JavaScript code, which can improve page loading
performance.
- summary tag : The summary tag in HTML is used in conjunction with the details tag
to create an expandable and collapsible section of content, often referred to as an "accordion" or a
"collapsible panel". The summary element serves as a heading or a title for the content that can
be expanded or collapsed.
<details>
<summary>Click to expand</summary>
<p>This is the hidden content that will be shown when the summary is clicked.</p>
</details>
When the page is loaded, the content inside the details element is hidden by default. However,
when a user clicks on the summary, the hidden content is revealed or expanded, and subsequent clicks
will collapse it again.
It's important to note that the summary and details tags are supported in modern web
browsers, but may not be fully supported in older browsers. To ensure compatibility, you can provide
alternative content or styling for browsers that do not support the details and summary
tags.
- progress tag : The progress tag in HTML is used to represent the progress of a task or an
event. It provides a visual representation of the completion status of a particular process, such as
file uploads, form submissions, or any other task that involves a measurable progress.
<progress value="50" max="100"></progress>
You can dynamically update the value of the progress bar using JavaScript by accessing the
progress element and
modifying its value attribute.
<progress id="myProgress" value="0" max="100"></progress>
<script>
var progressBar = document.getElementById("myProgress");
// Update the progress value
progressBar.value = 75;
</script>
You can also provide text content within the progress element to display additional information
about the
progress, such as a percentage or a description of the task.
<progress value="50" max="100">50%</progress>
- style tag : The style tag in HTML is used to define inline CSS (Cascading Style Sheets)
within an HTML document. CSS is a language used for describing the visual presentation of a web page,
including its layout, colors, fonts, and other stylistic aspects.
The style tag is typically placed within the head section of an HTML document. It can
contain CSS rules and declarations that will be applied to the elements of the HTML document.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: blue;
text-decoration: underline;
}
p {
color: green;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
- link tag : The link tag in HTML is used to link an external resource, typically a
stylesheet, to an HTML document. It allows you to incorporate external CSS files, icon files, or other
linked resources into your web page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- HTML content goes here -->
</body>
</html>
By using the link tag, you can keep your CSS code separate from your HTML document, allowing for
better organization and reusability. The linked CSS file can contain all the styles for your HTML
elements, such as fonts, colors, layout, and more.
- abbr tag : The abbr tag in HTML is used to define an abbreviation or an acronym within a
web page. It is primarily used to provide an explanation or expansion of the abbreviated term for better
understanding or accessibility.
<p>The <abbr title="World Health Organization">WHO</abbr> provides global health guidance.</p>