SpecBits - Training Institute Near me

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.
```

```
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 :

<h1>h1 tag</h1>

h2 tag :

<h2>h2 tag</h2>

h3 tag :

<h3>h3 tag</h3>

h4 tag :

<h4>h4 tag</h4>

h5 tag :

<h5>h5 tag</h5>

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>
    
</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>
    
    
    
</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>

    <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>
</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>
    
</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>
```

This HTML Cheatsheet is For You!

Apply & succeed with our courses

Location:

Email:

Phone: