\n Angular is a popular web application framework developed and maintained by Google. Its architecture is based on a component-driven model and uses TypeScript as its primary language. Angular follows the Model-View-Controller (MVC) pattern and supports modern web development with tools and features for creating dynamic, responsive, and scalable applications.\n
\n\n
Key Building Blocks of Angular Architecture
\n
\n
\n Modules\n
\n
Angular applications are modular, and each application has a root module, often named AppModule.
\n
Modules organize the app into cohesive blocks of functionality, enabling better reusability and lazy loading.
\n
Example:\n
\n
@NgModule({\n
declarations: [AppComponent],
\n
imports: [BrowserModule],
\n
bootstrap: [AppComponent],
\n
})
\n
export classAppModule {}
\n `\n }}>
\n
\n
\n
\n
\n
\n Components\n
\n
\n Components are the core building blocks of the UI. Each component consists of:\n
\n
A HTML template for the structure.
\n
A CSS file for styling.
\n
A TypeScript class for logic and data.
\n
\n
\n
\n Example:\n
\n
@Component({\n
selector: 'app-header',
\n
templateUrl: './header.component.html',
\n
styleUrls: ['./header.component.css'],
\n
})
\n
export classHeaderComponent {
\n
title = 'Angular Architecture';
\n
}
\n `\n }}>
\n
\n
\n
\n
\n
\n Templates\n
\n
Templates define the view and use Angular’s declarative syntax to bind data and handle events.
\n
Example:\n
\n
<h1>{{ title }}</h1>\n
<button (click)=\"onClick()\">Click Me</button>
\n `\n }}>
\n
\n
\n
\n
\n
\n Services and Dependency Injection\n
\n
Services in Angular handle business logic and data sharing between components.
\n
Dependency Injection (DI) provides an efficient way to supply instances of services where needed.
\n Attribute directives in Angular modify the appearance or behavior of an element, component, or another directive. Unlike structural directives, which manipulate the DOM by adding or removing elements, attribute directives only affect the element they are applied to.\n
\n\n
Built-in Attribute Directives
\n
Angular provides several built-in attribute directives, such as:
\n
\n
ngClass: Dynamically adds or removes CSS classes.
\n
ngStyle: Dynamically sets inline styles.
\n
[attr.<attributeName>]: Binds an attribute's value dynamically.
\n
\n\n\n
ngClass Directive
\n
The ngClass directive allows you to add or remove CSS classes dynamically based on conditions.
Output: The button becomes enabled or disabled dynamically based on isDisabled.
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/using-built-in-pipes\";\n\nexport default function BuiltInPipe() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Built-in Pipes in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/interceptors',\n 'next': '/angular/creating-custom-pipes'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Built-in Pipes
\n
\n
\n In Angular, pipes are tools that transform data before displaying it in the view (HTML). They are simple functions that format data directly in the template.\n
\n\n
Why Use Pipes?
\n
Pipes are useful for:
\n
\n
Formatting dates, numbers, or text.
\n
Changing how data is displayed without altering the original data.
\n
Simplifying templates by applying transformations directly.
\n
\n
For example:
\n
\n
<p>{{ userName | uppercase }}</p>\n `\n }}>
\n
\n
The uppercase pipe converts userName to uppercase letters.
\n\n\n
How to Use Built-In Pipes
\n
\n
\n Pipes are applied in Angular templates using the pipe operator (|).\n
\n Built-in pipes in Angular simplify data transformations in your templates. They save time, improve readability, and are easy to use even for beginners. Experiment with pipes to understand how they can make your applications look polished and user-friendly.\n
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nexport const pageUrl = () => \"/angular/component-interaction\";\n\nexport default function ComponentInteraction() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"How Components Works in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/creating-and-using-components',\n 'next': '/angular/lifecycle-hooks'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
How Components Interact?
\n
\n
\n In Angular applications, component interaction refers to the process of enabling communication between components. Since Angular applications are built with multiple components, these components often need to share data or respond to events. Component interaction can happen between:\n
\n\n
\n
Parent and Child Components
\n
Sibling Components
\n
Unrelated Components
\n
\n\n\n
Interaction Between Parent and Child Components
\n
Component can interact between parent and child in two ways -
\n\n
A. Passing Data from Parent to Child
\n
Use the @Inputdecorator to pass data from a parent component to a child component.
For communication between components that are not parent-child or siblings, use a shared service. This approach is similar to sibling communication and utilizes the service to manage state or events between unrelated components.
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nexport const pageUrl = () => \"/angular/creating-and-using-components\";\n\nexport default function CreatingComponent() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Creating and Using Components in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/architecture',\n 'next': '/angular/component-interaction'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Components in Angular
\n
\n
\n Components are the building blocks of Angular applications. They define a specific part of the UI and its behavior. Let's go step by step to understand how to create and use components in an Angular application.\n
\n\n \n
Creating a Component
\n\n
Using Angular CLI
\n
The easiest way to create a component is by using the Angular CLI command:
\n
\n
ng generate component component-name\n `\n }}>
\n
\n
Or the shorthand:
\n
\n
ng g c component-name\n `\n }}>
\n
\n Example:\n
Let's create a component named user-profile:
\n
\n
ng generate component user-profile\n `\n }}>
\n
\n
This command generates the following files in a folder named user-profile:
\n
\n
user-profile.component.ts: Contains the logic for the component.
\n
user-profile.component.html: The template for the component.
\n
user-profile.component.css: The styles for the component.
\n
user-profile.component.spec.ts: The testing file for the component.
\n
\n\n\n
Structure of a Component
\n
A component consists of the following:
\n
\n
\n TypeScript File (.ts): Contains the logic and data for the component.\n
\n
import { Component } from'@angular/core';\n \n
@Component({
\n
selector: 'app-user-profile',
\n
templateUrl: './user-profile.component.html',
\n
styleUrls: ['./user-profile.component.css']
\n
})
\n
export classUserProfileComponent {
\n
name = 'John Doe';
\n
age = 30;
\n \n
greet() {
\n
return`Hello, ${this.name}!`;
\n
}
\n
}
\n `\n }}>
\n
\n\n
@Component decorator
\n
\n The @Component decorator in Angular is a core feature used to define a component, which is a building block of Angular applications. It provides metadata to configure the behavior, structure, and presentation of the component.\n
\n
Here, in the above example -
\n
\n
\n @Component:\n
Decorator that specifies metadata for the UserProfileComponent.
\n
\n
\n selector: 'app-user-profile':\n
\n
The custom HTML tag used to include this component in templates.
\n
Example usage: <app-user-profile></app-user-profile>.
\n In Angular, a service is a reusable piece of code that encapsulates logic or data, making it easy to share functionality across components. Services are typically used for tasks like handling data, managing state, or providing utility functions.\n
\n\n
Steps to Create a Service
\n
\n
\n Use Angular CLI\n
The easiest way to create a service is by using the Angular CLI. Run the following command:
\n
\n
ng generate service my-service\n `\n }}>
\n
\n
or the shorthand:
\n
\n
ng g s my-service\n `\n }}>
\n
\n
This generates two files:
\n
\n
my-service.service.ts: It contains the service logic.
\n
my-service.service.spec.ts: A test file for the service.
\n
\n
\n
\n Define the Service Logic\n
The generated my-service.service.ts file will look like this:
\n
\n
import { Injectable } from'@angular/core';\n \n
@Injectable({
\n
providedIn: 'root', // Makes the service available globally
\n
})
\n
export classMyService {
\n
constructor() {}
\n
}
\n `\n }}>
\n
\n
In this example -
\n
\n
@InjectableDecorator: This decorator tells Angular that the class can participate in dependency injection (DI). It ensures that Angular can create and inject an instance of the class wherever it is needed.
\n
providedIn: 'root': The providedIn property determines where the service will be available in your app. By setting providedIn: 'root', Angular registers the service at the root injector level. This makes the service a singleton (only one instance is created) and it is shared across the entire application.
\n
\n
\n
\n Add Logic to the Service\n
You can now add methods and properties to your service as needed.
\n
\n
import { Injectable } from'@angular/core';\n \n
@Injectable({
\n
providedIn: 'root',
\n
})
\n
export classLoggingService {
\n
log(message: string): void {
\n
console.log(`LoggingService: ${message\t}`);
\n
}
\n
}
\n `\n }}>
\n
\n
This service has a log() method that can be used to log messages across the application.
\n
\n
\n\n\n
Alternative: Manually Create a Service
\n
If you're not using the Angular CLI, follow these steps:
\n
\n
Create a File for the Service Manually create a file, e.g., logging.service.ts.
\n
Define the Service Class Add the following code:\n
\n
import { Injectable } from'@angular/core';\n \n
@Injectable({
\n
providedIn: 'root',
\n
})
\n
export classLoggingService {
\n
log(message: string): void {
\n
console.log(`LoggingService: ${message}`);
\n
}
\n
}
\n `\n }}>
\n
\n
\n
Save the File Save it in an appropriate folder (e.g., src/app/services/).
\n
\n\n\n
Registering the Service (If Not Using providedIn)
\n
If you omit the providedIn property in the @Injectable decorator, you must manually register the service in the providers array of a module.
\n Custom directives in Angular allow you to define reusable behaviors and extend the functionality of DOM elements beyond the built-in directives. They can modify elements, listen to events, or apply custom logic.\n
\n\n
Steps to Create a Custom Attribute Directive
\n
\n
\n To Generate the Directive Use the Angular CLI:\n
\n
ng generate directive directive-name\n `\n }}>
\n
\n
This creates the directive file and updates the module declaration.
\n
\n
Implement the Directive Logic To implement logic Write the behavior you want to apply to the host element.
\n
\n Apply the Directive Use the directive in your templates by adding it to an HTML element.\n
\n
\n\n\n
Example: Highlight Directive
\n
A custom directive to change the background color of an element when the user hovers over it.
Add it to an HTML element by referencing its selector (appHighlight).
\n
\n
<p appHighlight=\"lightblue\">Hover over this text to see the highlight effect.</p>\n
<p appHighlight=\"pink\">This text will have a pink highlight.</p>
\n `\n }}>
\n
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/creating-custom-pipes\";\n\nexport default function CustomPipe() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Creating Custom Pipes in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/using-built-in-pipes',\n 'next': '/angular/pure-vs-impure-pipes'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Custom Pipes
\n
\n
\n In Angular, if the built-in pipes (like uppercase, date, currency, etc.) don’t meet your needs, you can create your own custom pipe. A custom pipe is a reusable function that transforms data into the desired format for your application.\n
\n\n
Why Create a Custom Pipe?
\n
You may need a custom pipe for:
\n
\n
Formatting specific data (e.g., adding a prefix to numbers).
\n
Converting custom objects or arrays into user-friendly formats.
Custom pipes are a great way to make your Angular applications more dynamic and user-friendly.
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/deployment\";\n\nexport default function Deployment() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Deployment in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/testing'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Deployment
\n
\n
\n Deploying an Angular application means preparing it to run on a web server so users can access it via a browser. Here's how you can deploy your Angular app step by step.\n
\n\n
\n
\n
Preparing Your Angular App
\n
Before deploying, you need to build your app into static files that can be served by a web server.
\n\n
Step 1: Build the App
\n
Run the following command in your terminal:
\n
\n
ng build --prod\n `\n }}>
\n
\n
\n
It creates a production-ready version of your app.
\n
The files will be optimized (minified) to load faster.
\n
The output files are placed in the dist/ folder.
\n
\n
In the dist/your-app-name folder, it creates 3 files -
\n
\n
index.html: The main HTML file.
\n
.js files: The JavaScript files for your app logic.
\n
.css files: The CSS styles for your app.
\n
\n
\n
\n
Deploying Your Angular App
\n
You can deploy the generated files to a web server. Here are some common deployment methods:
\n\n
\n
\n Option 1: Deploy to a Static File Hosting Service\n
Example: Using GitHub Pages
\n
\n
\n Install the Angular CLI GitHub Pages package:\n
\n
npm install -gangular-cli-ghpages\n `\n }}>
\n
\n
\n
\n Build and deploy your app in one command:\n
\n
ng deploy --base-href=/your-repository-name/\n `\n }}>
\n
\n
It replace /your-repository-name/ with your actual GitHub repository name.
\n
\n
Your app will be live at https://your-username.github.io/your-repository-name.
\n
\n
\n
\n Option 2: Deploy to Firebase Hosting\n
\n
\n Install Firebase CLI:\n
\n
npm install -gfirebase-tools\n `\n }}>
\n
\n
\n
\n Log in to Firebase:\n
\n
firebase login\n `\n }}>
\n
\n
\n
\n Initialize Firebase in your project:\n
\n
firebase init\n `\n }}>
\n
\n
\n
It select \"Hosting\" when prompted.
\n
Choose your Firebase project.
\n
Specify the dist/your-app-name folder as the public directory.
\n
\n
\n
\n Deploy your app:\n
\n
firebase deploy\n `\n }}>
\n
\n
\n
Your app will be live at a URL like https://your-project-name.web.app.
\n
\n
\n
\n Option 3: Deploy to a Web Server (e.g., Apache, Nginx)\n
\n
\n Copy the files from the dist/your-app-name folder to the web server's public directory.\n
\n
For Apache: Place them in the htdocs/ folder.
\n
For Nginx: Place them in /var/www/html/.
\n
\n
\n
\n Configure the server to serve the index.html file for all routes.\n
\n
\n Example Nginx configuration:\n
\n
server {\n
listen 80;
\n
server_name your-domain.com;
\n \n
root /var/www/html;
\n
index index.html;
\n \n
location / {
\n
try_files $uri /index.html;
\n
}
\n
}
\n `\n }}>
\n
\n
\n
\n
\n
\n
\n
\n Option 4: Deploy to a Cloud Provider\n
\n
\n AWS S3 (Static Website Hosting)\n
\n
Upload the dist/your-app-name files to an S3 bucket.
\n
Enable \"Static Website Hosting\" in the bucket settings.
\n
\n
\n
\n Heroku\n
\n
Use a Node.js server to serve your app.
\n
Deploy it using Git.
\n
\n
\n
\n
\n\n
\n
\n
\n
Verify Your Deployment
\n
After deployment, test your app by visiting the deployment URL. Make sure all the routes work and there are no errors.
\n
\n
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nexport const pageUrl = () => \"/angular/environment-setup\";\n\nexport default function EnvironmentSetup() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Environment Setup and Creating First App | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/introduction',\n 'next': '/angular/folder-structure'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Environment Setup and Creating First App
\n
\n
\n Setting up the environment for developing an Angular application involves installing the necessary tools and creating a project structure. Here's a step-by-step guide:\n
\n\n
\n
\n
Install Node.js
\n
Angular requires Node.js for managing dependencies and running its development server.
\n Event Binding in Angular allows you to capture and respond to user actions or events (such as clicks, keypresses, and mouse movements) within your component. It provides a way to bind an event in the template to a method in the component.\n
\n\n
Syntax
\n
\n
(event)=\"method($event)\"\n `\n }}>
\n
\n
Here,
\n
\n
event: The name of the DOM event (e.g., click, keyup, change).
\n
method: The component method to execute when the event occurs.
\n
$event: An object that contains information about the event (optional).
\n
\n\n\n
How Event Binding Works
\n
\n
When the user triggers the event (e.g., clicks a button), Angular invokes the specified method in the component.
\n
You can optionally pass the event object ($event) to the method for additional details.
Output: It displays the text entered in the input field.
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/feature-modules\";\n\nexport default function FeatureModule() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Feature Module in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/root-module',\n 'next': '/angular/shared-modules'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
What is a Feature Module in Angular?
\n
\n
\n Think of an Angular application as a big house. The root module (called AppModule) is like the foundation of the house—it holds everything together. But a big house needs separate rooms for different purposes, right? For example:\n
\n
\n
One room for the kitchen.
\n
Another room for the bedroom.
\n
A third room for the living room.
\n
\n
Similarly, in an Angular app, Feature Modules are like separate rooms for different features. Each feature (or room) has its own components, services, and other things it needs.
\n\n\n
Why Do We Need Feature Modules?
\n
\n
Organized Code: Instead of dumping everything into one file, you separate features into their own modules.
\n
Easier to Manage: If your app grows big, it’s easier to work on one feature without affecting others.
\n
Lazy Loading: Some features can load only when the user needs them (to save time and memory).
\n
\n\n\n
How to Create a Feature Module?
\n
Open your terminal and type:
\n
\n
ng generate module feature-name\n `\n }}>
\n
\n
For example -
\n
\n
ng generate module products\n `\n }}>
\n
\n
This creates a folder named products and a file called products.module.ts.
\n\n\n
What Does a Feature Module Look Like?
\n
Here’s a simple products.module.ts file:
\n
\n
import { NgModule } from'@angular/core';\n
import { CommonModule } from'@angular/common'; // For Angular's basic features like ngIf, ngFor
\n The folder structure of an Angular application is designed to help developers organize code effectively and maintain scalability. Below is an explanation of the typical folders and files generated in an Angular project:\n
\n\n
Root Folder Structure
\n
When you create a new Angular project, the folder structure looks like this:
\n
\n
my-angular-app/\n
├── e2e/
\n
├── node_modules/
\n
├── src/
\n
├── angular.json
\n
├── package.json
\n
├── tsconfig.json
\n
├── README.md
\n `\n }}>
\n
\n\n\n
Key Folders and Files
\n
\n
\n e2e/ (End-to-End Testing)\n
This folder contains files for setting up and running end-to-end (E2E) tests.
\n
\n
protractor.conf.js: This is configuration file for Protractor, the default testing framework.
\n
src/: This folder contains E2E test scripts.
\n
\n
\n
\n node_modules/\n
This folder contains all the dependencies and libraries installed via npm.
\n
\n
You should not modify files in this folder.
\n
It is automatically managed by package.json.
\n
\n
\n
\n src/\n
The main folder where the application’s source code resides. Its structure is as follows:
\n
\n
src/\n
├── app/
\n
├── assets/
\n
├── environments/
\n
├── index.html
\n
├── main.ts
\n
├── polyfills.ts
\n
├── styles.css
\n
├── test.ts
\n `\n }}>
\n
\n
\n
\n app/\n
The core folder of the application where components, services, and modules are created.
\n
\n
\n app.module.ts\n
\n
This is the root angular module.
\n
It declares all components and imports other modules.
\n
\n
\n
\n app.component.ts\n
\n
This is root component for the application.
\n
It acts as the entry point for the application UI.
\n
\n
\n
\n
\n
\n assets/\n
\n
It contains static files like images, icons, and custom fonts.
\n
The files here are served directly without processing.
\n
\n
\n
\n environments/\n
It contains configuration files for different environments (e.g., development, production).
\n
\n
environment.ts: It is the development configuration file.
\n
environment.prod.ts: It is the production configuration file.
\n
\n
\n
\n index.html\n
The main HTML file for the application.
\n
It contains the <app-root> tag where the Angular app gets bootstrapped.
\n
\n
\n main.ts\n
\n
It is the entry point of the application.
\n
It bootstraps the root module (AppModule) and starts the app.
\n
\n
\n
\n polyfills.ts\n
\n
It contains polyfills to support older browsers that do not natively support modern JavaScript features.
\n
\n
\n
\n styles.css\n
\n
It is the global stylesheet for the application.
\n
You can add other stylesheets or preprocessors like SCSS here.
\n
\n
\n
\n test.ts\n
\n
This is the entry point for running unit tests.
\n
\n
\n
\n
\n\n
\n Configuration Files\n
angular.json
\n
It is the configuration file for Angular CLI.
\n
\n
It defines settings for building, serving, and testing the app.
\n
\n\n
package.json
\n
It manages dependencies and scripts for the application.
\n
\n
It is a list of all installed libraries and tools.
\n
\n\n
tsconfig.json
\n
It is typeScript configuration file.
\n
\n
It specifies TypeScript compiler options, like target version and module settings.
\n
\n\n
\n\n\n
\n Configuration Files\n\n
README.md
\n
A markdown file that provides an overview of the project.
\n\n
.gitignore
\n
It specifies files and folders to ignore when pushing to a Git repository.
\n\n
\n\n\n
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nexport const pageUrl = () => \"/angular/handling-form-submissions\";\n\nexport default function FormSubmission() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Handling Form Submissions in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/form-validation',\n 'next': '/angular/creating-services'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Handling Form Submissions
\n
\n
\n Handling form submission in Angular involves collecting and processing the user-provided data from forms. Angular provides two main approaches for form handling:\n
\n
\n
Template-Driven Forms
\n
Reactive Forms
\n
\n\n
Handling Form Submission in Template-Driven Forms
\n
\n
It is simpler and more declarative.
\n
It uses Angular directives (ngForm, ngModel) to manage form data and validation.
\n
Form handling logic is typically in the component.
The form (userForm) is defined in the component using FormBuilder, which simplifies the creation of FormGroup and FormControl objects. Each control is associated with validation rules.
\n
The formGroup directive binds the HTML form to the userForm object in the component.
\n
When the form is submitted, the onSubmit method is called, and the form's data (userForm.value) is logged or processed.
\n
Angular tracks the form and control states (touched, invalid, etc.) and updates the errors automatically.
\n
Errors are displayed conditionally using *ngIf and the control’s errors property.
\n Form validation in Angular ensures that user inputs meet the desired criteria before processing or saving data. Angular provides built-in validation for both Template-Driven Forms and Reactive Forms. Additionally, you can create custom validations for more complex scenarios.\n
\n\n
Types of Validation in Angular
\n
\n
\n Built-In Validation Angular supports common validation rules like:\n
\n
required: Ensures the field is not empty.
\n
minlength and maxlength: Restricts the length of input.
\n
pattern: Validates input against a regular expression.
\n
email: Validates the input as a valid email format.
\n
\n
\n
\n Custom Validation\n
\n
Define validation logic in the component or as a directive.
\n
Use for complex or application-specific rules.
\n
\n
\n
\n\n\n
Form Validation in Template-Driven Forms
\n
In template-driven forms, validation is achieved using Angular's built-in directives directly in the HTML template.
\n loginForm.controls.email?.errors?.required this expression checks:\n
\n
If the email control exists (loginForm.controls.email).
\n
If the email control has an errors object (loginForm.controls.email?.errors).
\n
If the required error exists in the errors object (loginForm.controls.email?.errors?.required).
\n
\n
If all these conditions are true:
\n
\n
The field has failed the required validation (meaning it’s empty).
\n
The expression evaluates to true, and any associated message (like a validation error message) is displayed.
\n
\n
If any of the conditions are false:
\n
\n
The expression evaluates to undefined or false, and no action is taken.
\n
\n
\n
\n loginForm.controls.password?.errors?.required this expression checks:\n Similar to the email validation, the block displays error messages only if the password field is invalid after form submission.\n Error Messages:\n
\n
required: Shown when the field is empty.
\n
minlength: Shown when the input has fewer than six characters.
\n
\n
\n
\n\n\n
Form Validation in Reactive Forms
\n
In reactive forms, validation is defined programmatically in the component using Angular's FormBuilder and Validators.
In the above example, The FormBuilder service is injected into the component via the constructor. This service is used to simplify form creation.
\n
\n
\n fb.group(): Creates a form group with three controls (username, email, password).\n
\n
\n Each control is defined with -\n
\n
\n Default Value:\n
\n
'' (empty string) indicates the initial value of the control.
\n
\n
\n
\n Validators:\n
\n
Validators.required: Ensures the field is not empty.
\n
Validators.minLength(3): Requires at least 3 characters (for username).
\n
Validators.email: Validates the input format as an email address.
\n
\n
\n
\n
\n\n
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/http-client-module\";\n\nexport default function HttpClientModule() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTTP Client Module in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/injecting-services',\n 'next': '/angular/setting-up-routing'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTTP Client Module
\n
\n
\n The HttpClientModule in Angular is a powerful tool for making HTTP requests to communicate with back-end servers. It provides a simplified API for sending and receiving data, working seamlessly with RESTful services, APIs, and more. It is part of the @angular/common/http package.\n
\n\n
Key Features of HttpClient
\n
\n
Simplified syntax for HTTP operations like GET, POST, PUT, DELETE.
\n
Supports request and response handling with Observables.
\n
Built-in support for interceptors (e.g., adding headers, logging, error handling).
\n
Handles JSON data by default.
\n
Automatically maps responses to JavaScript objects.
\n
Provides mechanisms for error handling and retry logic.
\n
\n\n
How to Use HttpClientModule
\n
\n
\n Import the HttpClientModule\n
Add the HttpClientModule to the imports array in your app's main module or a specific feature module.
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/making-http-requests\";\n\nexport default function HttpRequest() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Making HTTP Requests in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/lazy-loaded-modules',\n 'next': '/angular/handling-http-responses'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Making HTTP Requests
\n
\n
\n In Angular, we use the HttpClient module to make requests to a server (like getting data, sending data, etc.). Think of it like sending letters to a post office and getting replies—HttpClient helps you handle this communication.\n
\n\n
How Does It Work?
\n
\n
You ask the server for data (e.g., user information).
\n
The server responds with the requested data.
\n
You use the data in your application.
\n
\n\n\n
Steps to Make an HTTP Request
\n
Here’s a step-by-step guide to making a http request in Angular:
\n\n
\n
\n Import the HttpClientModule\n
The HttpClientModule provides tools to make HTTP requests. First, you need to enable it in your app.
<li *ngFor=\"let user of users\">{{ user.name }}</li>
\n
</ul>
\n
`,
\n
})
\n
export classUserListComponentimplementsOnInit {
\n
users: any[] = []; // To store the user data
\n \n
constructor(private dataService: DataService) {}
\n \n
ngOnInit(): void {
\n
// Call the service to fetch data
\n
this.dataService.getUsers().subscribe((data) => {
\n
this.users = data;
\n
});
\n
}
\n
}
\n `\n }}>
\n
\n
\n
\n Add the Component to the App\n
Add the component to your main template (app.component.html):
\n
\n \n
\n
\n
\n\n \n
What Happens in the Code?
\n
\n
HttpClientModule enables HTTP requests.
\n
The DataService uses HttpClient to fetch data from an API.
\n
The component (UserListComponent) calls the service and subscribes to the data.
\n
The data is displayed in the template using *ngFor.
\n
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/handling-http-responses\";\n\nexport default function HttpResponses() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Handling HTTP Responses in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/making-http-requests',\n 'next': '/angular/interceptors'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Handling HTTP Responses
\n
\n
\n When building Angular applications, you often need to communicate with servers to fetch or send data. This is done using HTTP requests. Angular provides the HttpClient module to handle HTTP communication effectively.\n
\n\n
Understanding HTTP Responses
\n
When you make an HTTP request, the server sends back a response. This response can be:
\n
\n
\n Success (200): Data returned successfully. Example: A list of users.\n
\n
[\n
{ \"id\": 1, \"name\": \"John Doe\" },
\n
{ \"id\": 2, \"name\": \"Jane Smith\" }
\n
]
\n `\n }}>
\n
\n
\n
\n Error (e.g., 404, 500): Something went wrong. Example: Server not found.\n
\n
{\n
\"status\": 404,
\n
\"message\": \"Resource not found\"
\n
}
\n `\n }}>
\n
\n
\n
\n
Angular makes it easy to handle both success and error responses.
\n\n\n
Handling Both Success and Errors
\n
When making HTTP requests, you must handle both:
\n
\n
\n Success: The data in the .subscribe() function contains the response from the server.\n
\n
this.dataService.getUsers().subscribe(\n
(data) => {
\n
this.users = data; // Success: Use the data
\n
}
\n
);
\n `\n }}>
\n
\n
\n
\n Error: The error in the .subscribe() function contains information about what went wrong.\n
\n
this.dataService.getUsers().subscribe(\n
(data) => {
\n
this.users = data;
\n
},
\n
(error) => {
\n
this.errorMessage = 'Something went wrong!';
\n
console.error('Error:', error); // Log the error for debugging
\n Injecting a service in Angular involves using the Dependency Injection (DI) system to provide a service instance to a component, directive, or another service. This enables you to access the functionality or data encapsulated in the service.\n
\n\n
Different Ways Inject a Service
\n
Angular supports injecting services at different levels based on the configuration.
\n
\n
\n Root Level Injection\n
Using providedIn: 'root' in the @Injectable decorator registers the service globally. The same instance is shared across the application.
\n
\n
import { Injectable } from'@angular/core';\n \n
@Injectable({
\n
providedIn: 'root', // Makes the service globally available as a singleton
\n
})
\n
export classLoggingService {
\n
log(message: string): void {
\n
console.log(`LoggingService: ${message}`);
\n
}
\n
}
\n `\n }}>
\n
\n
\n
\n Component Level Injection\n
Use the constructor injection method to inject the service.
Here, NotificationService depends on LoggingService. When NotificationService is injected, Angular resolves its dependencies and provides the required LoggingService instance.
\n
\n
\n\n \n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/interceptors\";\n\nexport default function Interceptors() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Interceptors in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/handling-http-responses',\n 'next': '/angular/using-built-in-pipes'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Interceptors
\n
\n
\n An HTTP Interceptor in Angular is a special service that allows you to intercept and modify HTTP requests or responses globally before they are handled by the app. Interceptors are part of Angular's HttpClientModule and are particularly useful for tasks such as:\n
\n
\n
Adding headers (e.g., authorization tokens).
\n
Logging HTTP requests and responses.
\n
Modifying requests or responses.
\n
Handling global errors.
\n
Caching responses.
\n
\n\n
How Interceptors Work
\n
\n
Interceptors act as a middleware for HTTP requests and responses.
\n
\n They intercept every HTTP call made using the HttpClient and allow you to:\n
\n
Modify the request before it is sent.
\n
Handle or modify the response when it is received.
\n
\n
\n\n
\n\n\n
Creating an HTTP Interceptor
\n
\n
\n Generate an Interceptor\n
Use Angular CLI to generate an interceptor:
\n
\n
ng generate interceptor my-interceptor\n `\n }}>
\n
\n
This command creates two files:
\n
\n
my-interceptor.interceptor.ts: Contains the interceptor logic.
\n
my-interceptor.interceptor.spec.ts: Test file for the interceptor.
\n
\n
\n
\n Implement the Interceptor\n
Interceptors must implement the HttpInterceptor interface. Here's the basic structure:
\n Interpolation in Angular is a way to bind data from a TypeScript class (component) to the HTML template. It allows you to display dynamic data within the view by embedding expressions enclosed in double curly braces {{ }}.\n
\n\n
How Interpolation Works
\n
\n
Interpolation evaluates the expression inside {{ }}.
\n
It then converts the result into a string.
\n
Finally, the string is displayed in the DOM.
\n
\n\n
Syntax
\n
\n \n
\n
Here, the expression is any valid TypeScript or JavaScript expression, such as a variable, property, or method.
\n Angular is a TypeScript-based framework developed and maintained by Google for building dynamic, modern web applications. It allows developers to create single-page applications (SPAs), which load a single HTML page and dynamically update the content without requiring a full page reload. Angular is known for its strong focus on productivity, scalability, and performance.\n
\n\n
Key Features of Angular:
\n
\n
\n Component-Based Architecture:\n
Applications in Angular are built using components, which are reusable building blocks that define the structure (HTML), behavior (TypeScript), and appearance (CSS) of a portion of the application.
\n
\n
\n Two-Way Data Binding:\n
Angular provides seamless synchronization between the view (HTML) and the model (TypeScript). Changes in the model automatically reflect in the view, and vice versa.
\n
\n
\n Dependency Injection:\n
Angular's built-in dependency injection simplifies the management of services and promotes modular code.
\n
\n
\n Directives:\n
Directives allow developers to extend the functionality of HTML by creating custom elements or attributes. Examples include:
\n
\n
Structural directives like *ngIf and *ngFor.
\n
Attribute directives like ngClass and ngStyle.
\n
\n
\n
\n Routing:\n
Angular's Router Module enables navigation between different views or components in an application, creating seamless single-page app experiences.
\n
\n
\n Built-in Services:\n
Angular includes various services like HTTP client, animation, and forms handling, making complex tasks easier to implement.
\n
\n
\n TypeScript:\n
Angular is built using TypeScript, a superset of JavaScript that provides static typing and modern JavaScript features.
\n
\n
\n RxJS for Reactive Programming:\n
Angular leverages RxJS(Reactive Extensions for JavaScript) for handling asynchronous data streams and managing complex events.
\n
\n
\n
Why Use Angular?
\n
\n
Scalability: Suited for both small and large applications.
\n
Cross-Platform Development: Can be used for web, mobile, and desktop applications.
\n
Community and Ecosystem: Supported by Google, with a large community and extensive third-party libraries.
\n
Modularity: Encourages the development of reusable, modular code.
\n
\n\n\n
Angular is a powerful and versatile framework that is particularly well-suited for building scalable, maintainable, and dynamic applications.
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/ivy-renderer\";\n\nexport default function IvyRenderer() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Ivy Renderer in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/rxjs-observables',\n 'next': '/angular/testing'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
What is Ivy Renderer in Angular?
\n
\n
\n The Ivy Renderer is a next-generation rendering engine introduced in Angular 9. Think of it as the tool Angular uses behind the scenes to convert your templates (HTML + Angular code) into browser-readable JavaScript that creates the user interface.\n
\n\n
Why is Ivy Important?
\n
Before Ivy, Angular used an older renderer called View Engine. Ivy is faster, more efficient, and simplifies the Angular framework, making it easier for developers to work with.
\n\n\n
Key Features of Ivy
\n
\n
\n Smaller Bundle Size:\n
\n
Ivy removes unused parts of your code (tree-shaking), resulting in smaller app bundles.
\n
This makes apps load faster, especially on slow internet connections.
\n
\n
\n
\n Faster Compilation:\n
\n
When you make changes in your app, Ivy compiles and reflects them faster during development. This speeds up the process of seeing your updates.
\n
\n
\n
\n Better Debugging:\n
\n
Ivy makes it easier to debug Angular apps. You can inspect components directly in the browser console, making troubleshooting more straightforward.
\n
\n
\n
\n Improved Compatibility:\n
\n
Ivy works well with third-party libraries and makes Angular apps more compatible with tools and future updates.
\n
\n
\n
\n Dynamic Components:\n
\n
Ivy allows creating and rendering components dynamically (on-the-fly) without writing extra boilerplate code.
\n
\n
\n
\n\n
How Does Ivy Work?
\n
Imagine your Angular component:
\n
\n
@Component({\n
selector: 'app-hello',
\n
template: `<h1>Hello, {{ name }}!</h1>`,
\n
})
\n
export classHelloComponent {
\n
name = 'Angular';
\n
}
\n `\n }}>
\n
\n
Here,
\n
\n
The Ivy Renderer compiles this template into optimized JavaScript code that the browser understands.
\n
It only includes the parts of Angular needed for this component, reducing unnecessary code.
\n
\n\n\n
How to Know If Your App is Using Ivy?
\n
By default, Angular projects created with Angular 9 or later use Ivy. You can check in the tsconfig.json file under the angularCompilerOptions section:
\n
{\n
\"angularCompilerOptions\": {
\n
\"enableIvy\": true
\n
}
\n
}
\n `\n }}>
\n
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/lazy-loaded-modules\";\n\nexport default function LazyLoadedModules() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Lazy Loaded Modules in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/shared-modules',\n 'next': '/angular/making-http-requests'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Lazy Loaded Modules
\n
\n
\n Imagine you are working on a big application with many features, but the user only needs to use one feature at a time. Loading all the code for the application at once can make it slow, even though most of it isn’t used immediately. Lazy loading solves this problem by loading modules only when the user needs them.\n
\n\n\n
Why Use Lazy Loading?
\n
\n
Improves Performance: Only the required part of the app is loaded initially.
\n
Reduces Initial Load Time: The app becomes faster when it starts.
\n
Saves Bandwidth: Users don’t download code they don’t need.
\n
\n\n\n
Real-Life Analogy
\n
Think of a movie streaming service. Instead of downloading the entire library of movies to your device, you only download the movie you want to watch. Lazy loading in Angular works the same way—it loads the code only when it’s needed.
\n\n\n
How to Set Up Lazy Loading?
\n
Here’s a step-by-step guide to creating a lazy-loaded module in Angular:
\n\n
\n
\n Create a New Module\n
First, generate a feature module. For example, let’s create a Products module:
\n
\n
ng generate module products--routeproducts--moduleapp.module\n `\n }}>
\n
\n
What this command does:
\n
\n
Creates a ProductsModule.
\n
Automatically sets up lazy loading for this module by adding a route.
\n
\n
You will see:
\n
\n
products.module.ts: The new module file.
\n
products-routing.module.ts: The file that handles routing for the module.
\n
\n
\n
\n Update App Routing\n
Angular automatically adds the lazy-loading route in the app-routing.module.ts file:
\n Lifecycle hooks in Angular are special methods that allow you to perform actions at different stages of a component's lifecycle. These hooks provide insights into how and when a component is created, updated, or destroyed.\n
\n\n
Component Lifecycle Stages
\n
\n
\n Creation\n
The component is initialized and added to the DOM.
\n
\n
\n Change Detection and Updates\n
Angular checks for changes in data-bound properties and updates the DOM.
\n
\n
\n Destruction\n
The component is removed from the DOM and destroyed.
\n
\n
\n\n\n
Common Lifecycle Hooks
\n
Below are the most commonly used lifecycle hooks, their purpose, and how to implement them:
\n
\n
\n ngOnChanges()\n
It is used whenever the value of an @Input property changes. It will called before ngOnInit() and whenever an input changes.
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/navigating-between-routes\";\n\nexport default function NavigatingRoutes() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Navigating Between Routes in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/setting-up-routing',\n 'next': '/angular/route-guards'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Navigating Routes
\n
\n
\n In Angular, navigating between routes allows users to switch between different views or components in the application, often based on a URL path. Angular uses the Angular Router to manage navigation.\n
\n\n
Navigating Between Routes
\n
\n
\n Using Router Links (Template-Based Navigation)\n
Angular provides the routerLink directive for template-based navigation.
\n
\n
<nav>\n
<a routerLink=\"/\">Home</a>
\n
<a routerLink=\"/about\">About</a>
\n
</nav>
\n `\n }}>
\n
\n
Here,
\n
\n
Clicking these links changes the URL and loads the respective component.
\n
Active Link Styling: Use the routerLinkActive directive to style active links.
The ActivatedRoute detects the ref query parameter from the URL (?ref=user123).
\n
The value of ref (user123) is extracted using params.get('ref') and assigned to the ref property.
\n
The template displays:\n
\n
Query Param: user123\n `\n }}>
\n
\n
\n
\n
If the URL changes dynamically to:
\n
\n
http://example.com/about?ref=admin456\n `\n }}>
\n
\n
\n
The queryParamMap Observable detects the change.
\n
The subscribe method updates the ref variable to admin456.
\n
The template updates automatically to:\n
\n
<p>Query Param: admin456</p>\n `\n }}>
\n
\n
\n
\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/observables\";\n\nexport default function Observables() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Observables in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/injecting-services',\n 'next': '/angular/setting-up-routing'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Observables
\n
\n
\n Observables are a key part of Angular's reactive programming model, introduced by the RxJS (Reactive Extensions for JavaScript) library. Observables represent streams of data that you can subscribe to in order to receive updates when new data is emitted.\n
\n
\n Think of an Observable like a pipe through which data flows over time. Components and services can listen to these streams and react to the data, enabling asynchronous operations.\n
\n\n
Key Features of Observables
\n
\n
Asynchronous: Observables handle asynchronous data like HTTP requests, user input, or real-time updates.
\n
Lazy: Observables don’t start emitting data until they are subscribed to.
\n
Multiple Emissions: They can emit multiple values over time (unlike promises, which resolve only once).
\n
Operators: RxJS provides a wide range of operators (like map, filter, merge) to manipulate the data stream.
\n
Unsubscribe: Observables allow you to unsubscribe to clean up resources and prevent memory leaks.
\n
\n\n
Example of Observables
\n
Here’s a simple example of creating and subscribing to an Observable:
\n Property Binding in Angular allows you to bind a property of a DOM element, component, or directive to a TypeScript expression in the component. It enables the dynamic assignment of values to element properties in the template, keeping the view and the data in sync.\n
\n\n\n
Syntax
\n
\n
[DOM_property]=\"expression\"\n `\n }}>
\n
\n
Here,
\n
\n
DOM_property: The target property of the DOM element.
\n
expression: A TypeScript expression from the component class.
\n
\n\n
How Property Binding Works
\n
\n
Angular replaces the value of the DOM property with the result of the expression.
\n
It is a one-way binding, meaning the data flows from the component to the view.
The <h1> displays the text \"Property Binding Example\".
\n
The <img> displays the image from the specified URL with the specified alt text.
\n
The <button> is disabled.
\n\n
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/pure-vs-impure-pipes\";\n\nexport default function PureImpurePipe() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Pure vs. Impure Pipes in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/creating-custom-pipes',\n 'next': '/angular/state-management'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Pure vs. Impure Pipes
\n
\n
\n In Angular, pipes are used to transform data in templates. They come in two types: pure pipes and impure pipes. Understanding the difference is important when working with dynamic data in your application.\n
\n\n
Pure Pipes
\n
A pure pipe is a pipe that only recalculates its output when the input reference changes. Pure pipes are faster because they don’t re-run the logic unless necessary. All custom and built-in pipes in Angular are pure by default.
\n\n\n
Example of a Pure Pipe
\n
Here’s a simple pure pipe that converts text to uppercase:
An impure pipe recalculates its output on every change detection cycle, even if the input reference doesn’t change. Impure pipes can impact performance because they run frequently. To make a pipe impure, set pure: false in its metadata.
\n\n\n\n
Example of a Impure Pipe
\n
Here’s an impure pipe that filters an array of numbers:
return values.filter((value) => value > threshold);
\n
}
\n
}
\n `\n }}>
\n
\n
Template Example:
\n
\n
<ul>\n
<li *ngFor=\"let num of numbers | filterNumbers:5\">{{ num }}</li>
\n
</ul>
\n `\n }}>
\n
\n
If numbers is [1, 3, 6, 8], and the threshold is 5, the output will be:
\n
\n
<li>6</li>\n
<li>8</li>
\n `\n }}>
\n
\n\n\n
Differences Between Pure and Impure Pipes
\n\n
\n \n
\n
Aspect
\n
Pure Pipe
\n
Impure Pipe
\n
\n \n \n
\n
Default Behavior
\n
Yes, pure by default
\n
Must explicitly set pure: false
\n
\n
\n
Recalculation
\n
Only when input reference changes
\n
Every change detection cycle
\n
\n
\n
Performance
\n
Better performance
\n
Slower performance, especially with large data
\n
\n
\n
Use Case
\n
Stable and predictable data transformations
\n
Dynamic or frequently changing data
\n
\n \n
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nexport const pageUrl = () => \"/angular/reactive-forms\";\n\nexport default function ReactiveForms() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Reactive Forms in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/template-driven-forms',\n 'next': '/angular/form-validation'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Reactive Forms
\n
\n
\n Reactive Forms in Angular are a powerful way to create and manage forms using a model-driven approach. Unlike template-driven forms, reactive forms are more explicit and give greater control over form behavior and validation.\n
\n\n
Key Features of Reactive Forms
\n
\n
\n Model-Driven:\n
The form's structure and validation rules are defined in the component class, not the template.
\n
\n
\n Immutable Updates:\n
The form state is immutable; every change returns a new state.
\n
\n
\n Explicit Validation:\n
Validators are defined programmatically.
\n
\n
\n Greater Control:\n
Ideal for complex forms or forms with dynamic fields.
\n
\n
\n\n
Steps to Implement Reactive Forms
\n
1. Import ReactiveFormsModule
\n
First, you need to import ReactiveFormsModule into your app’s module.
Suitable for complex forms or forms with dynamic fields.
\n
\n
\n Testability:\n
Easy to write unit tests since the form logic resides in the component.
\n
\n
\n Explicit Control:\n
Full control over the form’s behavior, validation, and state.
\n
\n
\n Dynamic Forms:\n
Easily add or remove form controls or groups dynamically.
\n
\n
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/root-module\";\n\nexport default function RootModule() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Root Module in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/route-guards',\n 'next': '/angular/feature-modules'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Root Module
\n
\n
\n The Root Module in Angular is the main entry point of an Angular application. It is a module that bootstraps the application and organizes other modules, components, services, and dependencies in a cohesive manner.\n
\n
\n The root module is usually named AppModule and is defined in the app.module.ts file.\n
\n\n
Purpose of the Root Module
\n
\n
Bootstrapping the Application: The Angular application starts with the root module, which bootstraps the root component (typically AppComponent).
\n
Organizing Dependencies: It declares components, directives, and pipes and imports other modules required for the application.
\n
Centralized Configuration: It provides a single location to configure services and routing.
Root Module is the starting point of an Angular application. It configures the application by declaring components, importing necessary modules, and bootstrapping the root component.
\n \n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/route-guards\";\n\nexport default function RouteGuards() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Route Guards in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/navigating-between-routes',\n 'next': '/angular/root-module'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Route Guards
\n
\n
\n Route Guards in Angular are used to protect routes and control access based on specific conditions, such as user authentication, roles, or other custom logic. They ensure that users can only access certain routes when specific criteria are met.\n
\n\n
Types of Route Guards
\n
Angular provides five types of route guards:
\n
\n
CanActivate: It prevents unauthorized users from accessing a route.
\n
CanActivateChild: It prevents unauthorized users from accessing child routes.
\n
CanDeactivate: Asks users for confirmation before leaving a route (e.g., unsaved changes).
\n
Resolve: It pre-fetches data before a route is activated.
\n
CanLoad: It prevents loading a module until the condition is met (e.g., lazy-loaded modules).
\n
\n\n
Let's see how we can use Route Guards in the application.
\n\n
Creating and Using a Route Guard
\n
Here’s how to create and use a CanActivate guard as an example:
\n\n
Step 1: Generate a Guard
\n
Use the Angular CLI to generate a guard:
\n
\n
ng generate guard auth\n `\n }}>
\n
\n
This creates two files: auth.guard.ts and auth.guard.spec.ts.
\n\n\n
Step 2: Implement Guard Logic
\n
In the auth.guard.ts file, implement your logic in the canActivate method.
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/setting-up-routing\";\n\nexport default function SetupRouting() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Setting Up Routing in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/http-client-module',\n 'next': '/angular/navigating-between-routes'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Setting Up Routing
\n
\n
\n Routing in Angular allows you to navigate between different views or components in your application based on the URL. It uses the Angular Router to configure routes and manage navigation.\n
\n\n
Steps to Set Up Routing in Angular
\n
\n
\n Generate an Angular App\n
If you haven't created an Angular app, use this command:
\n
\n
ng new my-angular-app --routing\n `\n }}>
\n
\n
The --routing flag automatically generates a app-routing.module.ts file for routing setup. If you already have an app without routing, you can manually add routing.
\n
\n
\n Create a Routing Module\n
If the app-routing.module.ts file doesn't exist, create one using:
\n
\n
ng generate module app-routing --flat --module=app\n `\n }}>
\n
\n
\n
--flat: Places the file in the current directory.
\n
--module=app: Automatically imports and declares it in the AppModule.
\n
\n
\n
\n Define Routes\n
In the app-routing.module.ts file, configure your application routes. Each route maps a path to a component.
Create components corresponding to your routes using:
\n
\n
ng generate component home\n
ng generate component about
\n `\n }}>
\n
\n
\n
\n Add Router Outlet\n
The <router-outlet> directive acts as a placeholder for rendering routed components. Add it to the app.component.html file:
\n
\n
<nav>\n
<a routerLink=\"/home\">Home</a>
\n
<a routerLink=\"/about\">About</a>
\n
</nav>
\n \n
<!-- Component views will be loaded here -->
\n
<router-outlet></router-outlet>
\n `\n }}>
\n
\n
Where,
\n
\n
routerLink: Binds links to specific routes.
\n
<router-outlet>: Placeholder for routed components.
\n
\n
\n
\n\n
By setting up Angular routing, you create a structured way to manage navigation and views in your application!
\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/shared-modules\";\n\nexport default function SharedModule() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Shared Module in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/feature-modules',\n 'next': '/angular/lazy-loaded-modules'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
What is a Shared Module in Angular?
\n
\n
Imagine you're working on a big project, and there are certain things everyone needs to use, like:
\n
\n
A button design.
\n
A date-picker component.
\n
A custom pipe to format data.
\n
Common directives like toggling visibility.
\n
\n
Instead of adding these shared features to every module separately, we create a Shared Module. This module contains common, reusable pieces of the application that can be shared across multiple modules.
\n\n\n
Why Use a Shared Module?
\n
\n
Reusability: Write once, use everywhere.
\n
Cleaner Code: Avoids duplicating imports and declarations in multiple modules.
\n
Easier Maintenance: Update one place to reflect changes everywhere.
\n
\n\n\n
How to Create a Shared Module?
\n
Here’s a simple step-by-step guide for beginners:
\n\n
\n
\n
Generate a Shared Module
\n
Use the Angular CLI:
\n
\n
ng generate module shared\n `\n }}>
\n
\n
This creates:
\n
\n
A folder named shared.
\n
A file named shared.module.ts.
\n
\n
\n
\n
Add Common Features to the Shared Module
\n
For example, let’s assume you want to:
\n
\n
Use Angular Material buttons across the app.
\n
Create a custom uppercase pipe.
\n
Add a custom directive for hiding/showing elements.
\n Structural directives in Angular are directives that alter the DOM layout by adding, removing, or manipulating elements. They are applied to HTML elements to control the structure of the page dynamically.\n
\n
\n Structural directives are prefixed with an asterisk (*), which tells Angular to treat the directive as a template.\n
\n\n
Common Structural Directives in Angular
\n
\n
*ngIf: Conditionally includes or excludes elements based on a Boolean expression.
\n
*ngFor: Iterates over a collection and renders a template for each item.
\n
*ngSwitch: Displays one of many elements based on a matching condition.
\n
\n\n\n
*ngIf
\n
The *ngIf directive conditionally renders an element based on a Boolean expression.
\n
\n
<div *ngIf=\"condition\">Content to display</div>\n `\n }}>
\n
\n
Let's take an example -
\n
Component (TypeScript)
\n
\n
import { Component } from'@angular/core';\n \n
@Component({
\n
selector: 'app-ngif-example',
\n
template: `
\n
<button (click)=\"toggle()\">Toggle</button>
\n
<p *ngIf=\"isVisible\">This text is visible when 'isVisible' is true.</p>
\n
`
\n
})
\n
export classNgIfExampleComponent {
\n
isVisible: boolean = true;
\n \n
toggle() {
\n
this.isVisible = !this.isVisible;
\n
}
\n
}
\n `\n }}>
\n
\n
Template (HTML)
\n
\n
<p *ngIf=\"isVisible\">This text is visible when 'isVisible' is true.</p>\n `\n }}>
\n
\n
Output: The text appears or disappears when you click the button.
\n\n\n
*ngFor
\n
The *ngFor directive is used to loop through a collection and render the template for each item.
\n
\n
ngFor=\"let item of items\">{{ item }}</div>\n `\n }}>
\n
\n
Let's take an example -
\n
Component (TypeScript)
\n
\n
import { Component } from'@angular/core';\n \n
@Component({
\n
selector: 'app-ngfor-example',
\n
template: `
\n
<ul>
\n
<li *ngFor=\"let name of names\">{{ name }}</li>
\n
</ul>
\n
`
\n
})
\n
export classNgForExampleComponent {
\n
names: string[] = ['Alice', 'Bob', 'Charlie'];
\n
}
\n `\n }}>
\n
\n
Template (HTML)
\n
\n
<ul>\n
<li *ngFor=\"let name of names\">{{ name }}</li>
\n
</ul>
\n `\n }}>
\n
\n
Output:
\n
\n
- Alice\n
- Bob
\n
- Charlie
\n `\n }}>
\n
\n\n\n
*ngSwitch
\n
The *ngSwitch directive is used to conditionally display one of many elements based on a matching expression.
\n
\n
<div [ngSwitch]=\"expression\">\n
<p *ngSwitchCase=\"value1\">Content for value1</p>
\n
<p *ngSwitchCase=\"value2\">Content for value2</p>
\n
<p *ngSwitchDefault>Default content</p>
\n
</div>
\n `\n }}>
\n
\n
Let's take an example -
\n
Component (TypeScript)
\n
\n
import { Component } from'@angular/core';\n \n
@Component({
\n
selector: 'app-ngswitch-example',
\n
template: `
\n
<div [ngSwitch]=\"day\">
\n
<p *ngSwitchCase=\"'Monday'\">Today is Monday</p>
\n
<p *ngSwitchCase=\"'Tuesday'\">Today is Tuesday</p>
\n
<p *ngSwitchDefault>It's another day</p>
\n
</div>
\n
<button (click)=\"nextDay()\">Next Day</button>
\n
`
\n
})
\n
export classNgSwitchExampleComponent {
\n
day: string = 'Monday';
\n \n
nextDay() {
\n
const days = ['Monday', 'Tuesday', 'Wednesday'];
\n
const index = days.indexOf(this.day);
\n
this.day = days[(index + 1) % days.length];
\n
}
\n
}
\n `\n }}>
\n
\n
Template (HTML)
\n
\n
<div [ngSwitch]=\"day\">\n
<p *ngSwitchCase=\"'Monday'\">Today is Monday</p>
\n
<p *ngSwitchCase=\"'Tuesday'\">Today is Tuesday</p>
\n
<p *ngSwitchDefault>It's another day</p>
\n
</div>
\n `\n }}>
\n
\n
Output: It displays the message based on the current day and cycles through days on button clicks.
\n \n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nexport const pageUrl = () => \"/angular/template-driven-forms\";\n\nexport default function TemplateDrivenForms() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Template-Driven Forms in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/creating-custom-directives',\n 'next': '/angular/reactive-forms'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Template-Driven Forms
\n
\n
\n Template-Driven Forms in Angular are forms where most of the logic and validation are defined directly in the HTML template, rather than in the component class. They are simpler to implement compared to Reactive Forms and are ideal for basic use cases.\n
\n
\n Template-driven forms rely on Angular’s two-way data binding and use directives like ngModel to bind data between the form controls and the component.\n
\n\n\n
Steps to Create Template-Driven Forms
\n
\n
Enable FormsModule Import the FormsModule in your application module to enable template-driven forms.
\n
Create the Template Define the form controls using directives such as ngModel.
\n
Handle Form Submission Use Angular's event binding to handle form submissions.
\n
\n\n\n
Example: A Simple Contact Form
\n
Step 1: Import FormsModule
\n
In your application module, import the FormsModule from @angular/forms.
The form will automatically validate required fields.
\n
The Submit button will be disabled until all fields are valid.
\n
\n\n
Advantages of Template-Driven Forms
\n
\n
\n Simplicity:\n
Easy to set up with minimal code.
\n
\n
\n Two-Way Data Binding:\n
Automatically synchronizes the form with the model.
\n
\n
\n Declarative Syntax:\n
Validation and form logic are directly in the template.
\n
\n
\n\n
Limitations of Template-Driven Forms
\n
\n
\n Limited Scalability:\n
Not ideal for large or complex forms.
\n
\n
\n Less Control:\n
Difficult to track detailed form state in the component class.
\n
\n
\n Unit Testing:\n
Harder to test compared to reactive forms.
\n
\n
\n\n\n
When to Use Template-Driven Forms?
\n
\n
Template-Driven forms are ideal for forms with a limited number of input fields and straightforward requirements. With just the FormsModule and a template, you can quickly create and manage forms.
\n
If your form's validation rules are simple and do not require complex or custom logic, Template-Driven forms are a great fit.
\n
When creating a prototype or a small application, you need rapid development with minimal setup. Template-Driven forms are lightweight and easy to implement.
\n
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Outlet, Link } from \"react-router-dom\";\nexport const pageUrl = () => \"/angular/testing\";\n\nexport default function Testing() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Testing in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/ivy-renderer',\n 'next': '/angular/deployment'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Testing
\n
\n
\n Testing is the process of verifying that your code works as expected. In Angular, testing ensures your app is error-free, behaves as intended, and is ready for real-world use.\n
\n\n
Types of Testing in Angular
\n
Angular supports two main types of testing:
\n
\n
\n Unit Testing:\n
\n
Focuses on testing small, individual pieces of code (like components, services, or pipes).
\n
Example: Testing if a function returns the correct output.
\n
\n
\n
\n End-to-End (E2E) Testing:\n
\n
Tests the entire application from the user's perspective.
\n
Example: Testing if a user can log in successfully.
\n
\n
\n
\n\n\n
Why Testing is Important
\n
\n
Ensures Quality: Detect bugs early.
\n
Improves Confidence: Makes developers confident that the code works correctly after changes.
\n
Saves Time: Fixing bugs early is faster and cheaper than fixing them later.
\n
\n\n\n
Unit Testing in Angular
\n
Let’s say you have a simple CounterComponent:
\n\n
\n
import { Component } from'@angular/core';\n \n
@Component({
\n
selector: 'app-counter',
\n
template: `
\n
<button (click)=\"increment()\">+</button>
\n
<span>{{ count }}</span>
\n
<button (click)=\"decrement()\">-</button>
\n
`,
\n
})
\n
export classCounterComponent {
\n
count = 0;
\n \n
increment() {
\n
this.count++;
\n
}
\n \n
decrement() {
\n
this.count--;
\n
}
\n
}
\n `\n }}>
\n
\n\n
Writing a Unit Test
\n
Angular creates a test file for each component, like counter.component.spec.ts. Here’s an example test:
\n Two-way binding in Angular allows synchronization of data between the component's class (TypeScript) and the template (HTML). When data changes in the component, the view reflects the change, and when the user modifies the data in the view, the component is updated automatically.\n
\n
\n This is particularly useful for forms and interactive user interfaces.\n
\n\n\n
How Two-Way Binding Works
\n
Angular achieves two-way binding by combining:
\n
\n
Property Binding ([value]) - To display the data in the view.
\n
Event Binding ((input)) - To update the data in the component when the user modifies it.
\n
\n
Angular provides a special syntax using the [(ngModel)]directive for two-way binding.
\n\n\n
Syntax
\n
\n
(ngModel)]=\"propertyName\" />\n `\n }}>
\n
\n
Here,
\n
\n
[(ngModel)]: Combines property binding and event binding to create two-way data flow.
\n
propertyName: The variable in the component class bound to the input element.
\n
\n\n\n
Setting Up Two-Way Binding
\n
To use [(ngModel)], you need to import the FormsModule in your Angular application.
\n
In your application's module file (app.module.ts):
imports: [BrowserModule, FormsModule], // Include FormsModule
\n
providers: [],
\n
bootstrap: [AppComponent]
\n
})
\n
export classAppModule {}
\n `\n }}>
\n
\n
To use [(ngModel)] in the Template
\n
\n
<input [(ngModel)]=\"username\" />\n
<p>Hello, {{ username }}!</p>
\n `\n }}>
\n
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nexport const pageUrl = () => \"/angular/viewchild-and-contentchild\";\n\nexport default function ViewChildContentChild() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"@ViewChild and @ContentChild in Angular | Aspirant's Home\");\n const urls = {\n 'previous': '/angular/lifecycle-hooks',\n 'next': '/angular/interpolation'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
@ViewChild and @ContentChild
\n
\n
\n @ViewChild and @ContentChild are decorators in Angular used to access and manipulate elements or components within a template or projected content.\n
\n\n
@ViewChild
\n
The @ViewChild decorator is used to access a DOM element, directive, or child component that is part of the component's own view (template). It allows interaction with DOM elements or child components after they have been initialized.
\n\n
\n
It works within the component's view (HTML template).
\n
Can be used to access DOM elements, directives, or child components.
\n
Accessible after Angular initializes the view (ngAfterViewInit() lifecycle hook).
console.log(this.childComponent.message); // Outputs: \"Hello from Child\"
\n
}
\n
}
\n `\n }}>
\n
\n
In this example -
\n
\n
The parent component (ParentComponent) template renders the child component (ChildComponent) using <app-child>.
\n
Angular initializes the ChildComponent instance.
\n
The @ViewChild decorator retrieves the ChildComponent instance and assigns it to the childComponent property in the parent.
\n
When the button in the parent is clicked, the accessChild() method is triggered.
\n
This method accesses the message property of the ChildComponent and logs \"Hello from Child\" to the console.
\n
\n\n\n
@ContentChild
\n
The @ContentChild decorator is used to access elements, directives, or components that are projected into a component using<ng-content>. This is useful for working with content provided by a parent component.
\n\n
\n
It works with projected content (via <ng-content>).
\n
Can access DOM elements, directives, or components within the projected content.
\n
Accessible after Angular initializes the content (ngAfterContentInit() lifecycle hook).
console.log(this.childComponent.message); // Outputs: \"Hello from Projected Child\"
\n
}
\n
}
\n `\n }}>
\n
\n
In this example -
\n
\n
The ParentComponent projects the ChildComponent into the ContentChildExampleComponent using <ng-content>.
\n
Angular locates the ChildComponent within the projected content of the ContentChildExampleComponent.
\n
The @ContentChild decorator assigns the ChildComponent instance to the childComponent property.
\n
Inside the ngAfterContentInit hook, the ContentChildExampleComponent accesses the message property of the projected ChildComponent and logs it to the console.
\n
\n\n\n
\n \n )\n}","import React, { useEffect, useState, useRef } from 'react'\nimport { Outlet, Link } from \"react-router-dom\";\nimport TopHeader from '../TopHeader';\nimport Footer from '../Footer'\nimport { MenuContext, TitleContext } from \"../../Context\";\nimport { useContext } from \"react\";\n\nexport default function BlockchainLayout() {\n\n const addspaceElement = useRef();\n const menuElement = useRef([]);\n const menu = useContext(MenuContext);\n const [pathname, setPathName] = useState();\n\n useEffect(() => {\n setPathName(window.location.pathname)\n if (menu.isMenu == true) menu.setMenuOpen(false)\n addspaceElement.current.scrollIntoView(true)\n const element = document.getElementsByClassName(\"activeMenu\")[0];\n element && element.scrollIntoView(true);\n }, [pathname])\n\n return (\n <>\n \n
\n
\n
\n
\n Node Js Tutorial\n
\n \n
\n
\n
\n
\n
\n \n \n
\n
\n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n \n )\n}\n","const requireModule = require.context(\"./\",true,/\\.js$/);\nconst api = {};\nconst routes = [];\nrequireModule.keys().forEach((fileName) => {\n if (fileName === \"./Index.js\") return;\n const moduleName = fileName.replace(/(\\.\\/|\\.js)/g, \"\");\n const module = requireModule(fileName);\n if (module.default) {\n api[moduleName] = module.default;\n } else {\n api[moduleName] = module;\n }\n if (module.pageUrl) {\n routes.push({ path: module.pageUrl(), component: moduleName });\n }\n});\n\napi['Routes'] = routes;\nexport default api;\n","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/border\";\n\nexport default function Border() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"What is Border in CSS ? | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/background',\n 'next': '/css/border-width'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Border in CSS
\n
\n
\n A border in CSS is a property that allows you to add a line around an element's content, padding, and optionally its margin. It helps to define the boundaries of an element, making it stand out visually. Borders can be styled in various ways, including different widths, styles, and colors.\n
\n\n
How a Border Looks Like
\n
Here is the some sample of a border.
\n
\n
I am a solid all sides border.\n
I am a dashed border.
\n
I am a dotted border.
\n
I am a double border.
\n
I am a groove border.
\n
I am a rounded border.
\n
I am a border with background color.
\n
I am a border on left side.
\n `\n }}>
\n
\n\n
Border Style
\n
\n The `border-style` property in CSS specifies the style of the border of an element. It determines how the border will appear and can be customized for each side of the element (top, right, bottom, and left).\n
\n
\n
selector {\n
border-style: value;
\n
}
\n `\n }}>
\n
\n
\n You can set the border style for all sides at once or specify different styles for each side individually.\n
\n
Commonly Used Values and Their Uses
\n
\n There are many `border-style` property values. They are -\n
\n
\n \n
Values
\n
Uses
\n \n \n
\n
none
\n
No border is displayed.
\n
\n
\n
solid
\n
A solid, single-colored border.
\n
\n
\n
dotted
\n
A border consisting of dots.
\n
\n
\n
dashed
\n
A border consisting of dashes.
\n
\n
\n
double
\n
Two solid lines. The border-width value specifies the width of the combined lines.
\n
\n
\n
groove
\n
A 3D grooved border. The effect depends on the border-color value.
\n
\n
\n
ridge
\n
A 3D ridged border. The effect depends on the border-color value.
\n
\n
\n
inset
\n
A 3D inset border. The effect depends on the border-color value.
\n
\n
\n
outset
\n
A 3D outset border. The effect depends on the border-color value.
\n
\n \n
\n\n
Individual Border Styles
\n
\n You can also set the border style for each side individually using the following properties:\n
\n
\n
`border-top-style` : It sets style in top border of an element.
\n
`border-right-style` : It sets style in right border of an element.
\n
`border-bottom-style` : It sets style in bottom border of an element.
\n
`border-left-style` : It sets style in left border of an element.
\n
\n
\n You can even set different style for border in one element -\n
\n
\n
<style>\n
.divElement {
\n
border-top-style: solid;
\n
border-right-style: dotted;
\n
border-bottom-style: dashed;
\n
border-left-style: double;
\n
padding: 25px;
\n
}
\n
</style>
\n
<div class=\"divElement\">This is example text</div>
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/border-color\";\n\nexport default function BorderColor() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Border Color in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/border-width',\n 'next': '/css/border-sides'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Border Color
\n
\n
\n The `border-color` property in CSS specifies the color of an element's border. It can be set for all four sides of an element or for individual sides (`top`, `right`, `bottom`, `left`). This property accepts color values such as -\n
\n
\n
`named colors` specify a color name, like `red`, `blue`, `green`, `yellow`, `purple`, `black`, `white`, etc
\n
`hex values` specify a hexadecimal notation like `#ff0000` (red), `#00ff00` (green), `#0000ff` (blue).
\n
`RGB values` specifies the intensity of these colors on a scale from 0 to 255 like `rgb(255, 0, 0)` (red), `rgb(0, 255, 0)` (green), `rgb(0, 0, 255)` (blue).
\n
`RGBA values` specifies the intensity of these colors on a scale from 0 to 255 with alpha value like `rgb(255, 0, 0, 1)` (red), `rgb(0, 255, 0, 1)` (green), `rgb(0, 0, 255, 1)` (blue).
\n
`HSL values` specify a HSL Values like `hsl(0, 100%, 50%)` (red), `hsl(120, 100%, 50%)` (green), `hsl(240, 100%, 50%)` (blue).
\n
`HSLA values` specify a HSL Values with alpha like `hsl(0, 100%, 50%, 1)` (red), `hsl(120, 100%, 50%, 1)` (green), `hsl(240, 100%, 50%, 1)` (blue).
\n
\n \n \n
\n
selector {\n
border-color: value;
\n
}
\n `\n }}>
\n
\n
How a Border Color Can Change a Look
\n
\n Here is some examples of `border-color` property. Looks will be different because of different color of a border.\n
\n
\n
<style>\n
.pClassOne{
\n
border-style:solid;
\n
border-width: 5px;
\n
border-color: navy;
\n
padding: 10px 20px;
\n
}
\n
.pClassTwo{
\n
border-style:solid;
\n
border-width: 5px;
\n
border-color: red;
\n
padding: 10px 20px;
\n
}
\n
.pClassThree{
\n
border-style:solid;
\n
border-width: 5px;
\n
border-color: green;
\n
padding: 10px 20px;
\n
}
\n
</style>
\n
<p class=\"pClassOne\">
\n
I am a solid border, with <strong>navy</strong> border color.
\n
</p>
\n
<p class=\"pClassTwo\">
\n
I am a solid border, with <strong>red</strong> border color.
\n
</p>
\n
<p class=\"pClassThree\">
\n
I am a solid border, with <strong>green</strong> border color.
\n I am a solid border, with green border color.\n
\n `\n }}>
\n
\n\n
Individual Border Color
\n
\n You can also specify individual color for each side using:\n
\n
\n
`border-top-color`
\n
`border-right-color`
\n
`border-bottom-color`
\n
`border-left-color`
\n
\n\n
\n
<style>\n
.pIndivisual{
\n
border-top-color: red;
\n
border-right-color: navy;
\n
border-bottom-color: magenta;
\n
border-left-color: green;
\n
border-style: solid;
\n
border-width: 5px;
\n
padding: 10px 20px;
\n
}
\n
</style>
\n
<p class=\"pIndivisual\">
\n
I am a <strong>solid</strong> border. I have <strong>red</strong> top color, <strong>navy</strong> right color, <strong>magenta</strong> bottom color and <strong>green</strong> left color.
\n I am a solid border. I have red top color, navy right color, magenta bottom color and green left color.\n
\n `\n }}>
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/border-shorthand\";\n\nexport default function BorderShorthand() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Border Shorthand in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/border-sides',\n 'next': '/css/border-rounded'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Border Shorthand
\n
\n
\n The `border` shorthand property in CSS allows you to define the width, style, and color of an element's border in a single declaration. This can simplify your CSS code and make it more readable. The only thing you need to do is you have to maintain the order. It has a basic syntax -\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/border-sides\";\n\nexport default function BorderSides() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Border Sides in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/border-color',\n 'next': '/css/border-shorthand'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Border Sides
\n
\n
\n In CSS, you can style the borders of an element individually for each side. This allows you to apply different styles, widths, and colors to the `top`, `right`, `bottom`, and `left` borders of an element.\n
\n
\n Each side of the border can be controlled with its own set of properties. You can set different styles to each sides. You can set different border width and color to each side. \n
\n
\n
`border-top` styles the top border.
\n
`border-right` styles the right border.
\n
`border-bottom` styles the bottom border.
\n
`border-left` styles the left border.
\n
\n
\n You can even break the all the styles into sub-properties for more detailed control.\n
\n
\n
`border-*-width` sets the width of the border on the specified side.
\n
`border-*-style` sets the style of the border on the specified side.
\n
`border-*-color` sets the color of the border on the specified side.
\n Using border side properties lets you customize the borders on each side of an element, helping you create attractive and well-organized designs.\n
\n
\n
\n Styling Only One Side You can add a border to just one side of an element. This is useful for creating underline effects, sidebars, or dividers.\n
\n
\n Different Styles for Each Side You can mix and match border styles to create unique effects.\n
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/border-width\";\n\nexport default function BorderWidth() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Border Width in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/border',\n 'next': '/css/border-color'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Border Width
\n
\n
\n The `border-width` property in CSS specifies the width of an element's border. You can set the width for all four sides of an element or individually for each side. The value can be specified in length units (such as `pixels`, `ems`, `rems`) or using predefined keyword values (`thin`, `medium`, `thick`).\n
\n
\n
selector {\n
border-width: value;
\n
}
\n `\n }}>
\n
\n
How a Border Width Can Change a Look
\n
\n Here is some examples of `border-width` property.\n
\n
\n
I am a solid border, with 5px border width.\n
I am a dotted border, with 10px border width.
\n\n
I am a dashed border, with thin border width.
\n\n
I am a groove border, with medium border width.
\n\n
I am a double border, with thick border width.
\n `\n }}>
\n
\n
How to Use Border Width
\n
\n Here is some examples of how to use `border-width` property in CSS.\n
\n
\n
<style>\n
.pClassOne{
\n
border-style:solid;
\n
border-width: 10px;
\n
border-color: navy;
\n
padding: 10px 20px;
\n
}
\n
.pClassTwo{
\n
border-style:dashed;
\n
border-width: 5px;
\n
border-color: red;
\n
padding: 10px 20px;
\n
}
\n
.pClassThree{
\n
border-style:dotted;
\n
border-width: 5px;
\n
border-color: green;
\n
padding: 10px 20px;
\n
}
\n
</style>
\n
<p class=\"pClassOne\">
\n
I am a solid border, with <strong>10px</strong> border width.
\n
</p>
\n
<p class=\"pClassTwo\">
\n
I am a dashed border, with <strong>5px</strong> border width.
\n
</p>
\n
<p class=\"pClassThree\">
\n
I am a dotted border, with <strong>5px</strong> border width.
\n You can also specify individual widths for each side using:\n
\n
\n
`border-top-width`
\n
`border-right-width`
\n
`border-bottom-width`
\n
`border-left-width`
\n
\n
\n
<style>\n
.pIndivisual{
\n
border-top-width: 5px;
\n
border-right-width: 10px;
\n
border-bottom-width: 15px;
\n
border-left-width: 20px;
\n
border-color: lightgreen;
\n
border-style: solid;
\n
padding: 10px 20px;
\n
}
\n
</style>
\n
<p class=\"pIndivisual\">
\n
I am a <strong>solid</strong> border. I have <strong>5px</strong> top width, <strong>10px</strong> right width, <strong>15px</strong> bottom width and <strong>20px</strong> left width.
\n I am a solid border. I have 5px top width, 10px right width, 15px bottom width and 20px left width.\n
\n `\n }}>
\n
\n\n
\n You can even set multiple side width in a single `border-width` property. It has to follow the order. Order will be `top`, `right`, `bottom`, `left`. Syntax will be the following - \n
\n\n
\n
<style>\n
.pIndivisual{
\n
border-width: 5px 10px 15px 20px;
\n
border-color: lightgreen;
\n
border-style: solid;
\n
padding: 10px 20px;
\n
}
\n
</style>
\n
<p class=\"pIndivisual\">
\n
I am a <strong>solid</strong> border. I have <strong>5px</strong> top width, <strong>10px</strong> right width, <strong>15px</strong> bottom width and <strong>20px</strong> left width.
\n I am a solid border. I have 5px top width, 10px right width, 15px bottom width and 20px left width.\n
\n `\n }}>
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/box/model\";\n\nexport default function BoxModel() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Box Model in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/height/width',\n 'next': '/css/outline'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Box Model
\n
\n
\n Box Model is a fundamental concept that describes the rectangular boxes generated for elements in a document tree and the layout rules used to determine the size and position of these boxes. Understanding the box model is essential for effectively designing and laying out web pages.\n
\n
\n The structure of the boxmodel is explained below.\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
Components of the Box Model
\n\n
The box model consists of the following components:
\n
\n
Content: The innermost part of the box where the text and images appear. The width and height properties of an element set the dimensions of the content area.
\n\n
Padding: The space between the content and the border. Padding is added inside the element and increases the size of the element without affecting the outer dimensions.
\n\n
Border: A line that surrounds the padding (if any) and the content.
\n\n
Margin: The outermost part of the box. Margins create space between the element and its surrounding elements. Margins are transparent and do not have a background color.
\n
\n\n
Calculation Of Height & Width
\n
\n Let's take an example to understand the box-model.\n
\n \n
\n
div {\n
width: 400px;
\n
height: 100px;
\n
padding: 20px;
\n
border: 10px solid gray;
\n
margin: 0;
\n
}
\n `\n }}>
\n
\n
\n
The total width of an element should be calculated like this:\n
Total element width = width + left padding + right padding + left border + right border
\n
Total element width = 400px + 20px + 20px + 10px + 10px = 460px
\n
The total height of an element should be calculated like this:
\n
Total element height = height + top padding + bottom padding + top border + bottom border
\n
Total element height = 100px + 20px + 20px + 10px + 10px = 160px
\n `\n }}>
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/background\";\n\nexport default function CSSBackgroundClip() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Background in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/background-clip',\n 'next': '/css/border'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Background - Shorthand property
\n
\n
\n The `background` shorthand property in CSS allows you to set multiple background-related properties in a single declaration. This can help you write more concise and maintainable code by combining several background properties into one line. It has a basic syntax -\n
\n Ok, let's understand this by a simple example. If you want to set a background of an element using below property - \n
\n
\n
div {\n
background-color: #ccc;
\n
background-image: url(\"img_random.png\");
\n
background-repeat: no-repeat;
\n
background-position: right top;
\n
}
\n `\n }}>
\n
\n
\n You can simply use `background` shorthand property instead of using above multiple line of properties. You can see in the below example.\n
\n
\n
div {\n
background: #ffffffurl(\"img_random.png\") no-repeat right top;
\n
}
\n `\n }}>
\n
\n\n
\n You can write all the background properties together, only you have to maintain the order given below. It does not matter if one of the property values is missing, as long as the other ones are in this order.\n
\n\n
\n
background-color
\n
background-image
\n
background-repeat
\n
background-attachment
\n
background-position / background-size /* Note that this property must be separated from background-position by a slash (/). */
\n
background-origin
\n
background-clip
\n
\n\n
All CSS Background Properties
\n
\n \n
Name
\n
Description
\n \n \n
\n
\n background-color\n
\n
\n Sets the background color of the element.\n
\n
\n
\n
\n background-image\n
\n
\n Sets the background image of the element.\n
\n
\n
\n
\n background-repeat\n
\n
\n Defines how the background image is repeated.\n
\n
\n
\n
\n background-attachment\n
\n
\n Sets whether the background image is fixed or scrolls with the rest of the page.\n
\n
\n
\n
\n background-position\n
\n
\n Sets the starting position of the background image.\n
\n
\n
\n
\n background-size\n
\n
\n Specifies the size of the background image.\n
\n
\n
\n
\n background-origin\n
\n
\n Specifies the background positioning area.\n
\n
\n
\n
\n background-clip\n
\n
\n Specifies the painting area of the background.\n
\n
\n \n
\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/background-attachment\";\n\nexport default function CSSBackgroundAttachment() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Background Attachment in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/background-repeat',\n 'next': '/css/background-position'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Background Attachment
\n
\n
\n The `background-attachment` property in CSS controls how a background image behaves when the user scrolls the page. It determines whether the background image stays fixed relative to the viewport or scrolls along with the content. It has a basic syntax -\n
\n
\n
selector {\n
background-attachment: value;
\n
}
\n `\n }}>
\n
\n\n
Commonly Used Values and Their Uses
\n
\n There are two `background-attachment` property values. They are `fixed` and `scroll`.\n
\n
\n
\n `fixed`\n
The background image stays fixed relative to the viewport, so it does not move when the page is scrolled.
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n
\n `\n }}>
\n
\n
\n
\n `scroll`\n
The background image scrolls with the rest of the page. This is the default value.
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n `\n }}>
\n
\n
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/background-clip\";\n\nexport default function CSSBackgroundClip() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Background Clip in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/background-size',\n 'next': '/css/background'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Background Clip
\n
\n
\n The `background-clip` property in CSS specifies the painting area of the background. In other words, it defines how far the background image or color extends within an element.\n
\n
\n
selector {\n
background-clip: value;
\n
}
\n `\n }}>
\n
\n
Commonly Used Values and Their Uses
\n
\n There are many `background-clip` property values. They are -\n
\n
\n
\n `border-box`\n
The background extends to the outer edge of the border (background painted under the border).This is the default value.
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/background-color\";\n\nexport default function CSSBackgroundColor() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Background Color in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/colors/hsl',\n 'next': '/css/background-image'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
CSS - Backgrounds
\n
\n
\n CSS backgrounds are used to set the background of an element on a webpage. This includes setting colors, images, gradients, and various background properties to control the appearance and behavior of backgrounds.\n
\n
\n We have many background properties to set the background of an element -\n
\n
\n
background-color
\n
background-image
\n
background-repeat
\n
background-attachment
\n
background-position
\n
background-origin
\n
background-size
\n
background-clip
\n
background (shorrthand)
\n
\n
\n We will discuss all the background properties here.\n
\n\n
CSS background-color
\n
\n The `background-color` property in CSS is used to set the background color of an element. This property can accept various color values, including named colors, hex values, RGB, RGBA, HSL, and HSLA. It has a basic syntax -\n
Predefined color names, such as `red`, `blue`, `green`, etc.
\n
\n
p {\n
background-color: red;
\n
}
\n `\n }}>
\n
\n
\n
\n Hexadecimal Colors\n
A six-digit code preceded by `#`, representing red, green, and blue components.
\n
\n
div {\n
background-color: #ff5733;
\n
}
\n `\n }}>
\n
\n
\n
\n RGB Colors\n
Defines colors using the Red-Green-Blue model.
\n
\n
h1 {\n
background-color: rgb(255, 0, 0);
\n
}
\n `\n }}>
\n
\n
\n
\n RGBA Colors\n
Similar to RGB, but includes an alpha value for opacity.
\n
\n
section {\n
background-color: rgb(0, 0, 255, 0.5);
\n
}
\n `\n }}>
\n
\n
\n
\n HSL Colors\n
Defines colors using the Hue-Saturation-Lightness model.
\n
\n
article {\n
background-color: hsl(120, 100%, 50%);
\n
}
\n `\n }}>
\n
\n
\n
\n HSLA Colors\n
Similar to HSL, but includes an alpha value for opacity.
\n
\n
article {\n
background-color: hsla(240, 100%, 50%, 0.3);
\n
}
\n `\n }}>
\n
\n
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/background-image\";\n\nexport default function CSSBackgroundImage() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Background Image in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/background-color',\n 'next': '/css/background-repeat'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Background Image
\n
\n
\n The `background-image` property in CSS is used to set an image as the background of an element. This helps you add a nice visual look to your web pages. It has a basic syntax -\n
This is a example text in div with background image.
\n `\n }}>
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/background-origin\";\n\nexport default function CSSBackgroundOrigin() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Background Origin in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/background-position',\n 'next': '/css/background-size'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Background Origin
\n
\n
\n The `background-origin` property in CSS specifies the positioning area of the background image. This property defines the area within which the background image is placed and repeated.\n
\n
\n
selector {\n
background-origin: value;
\n
}
\n `\n }}>
\n
\n
How Its Works
\n \n\n
Commonly Used Values and Their Uses
\n
\n There are many `background-origin` property values. They are -\n
\n
\n
\n `border-box`\n
The background image starts from the upper left corner of the border box (the area including the border). This is the default value.
The background image starts from the upper left corner of the content.
\n
\n `\n }}>
\n
\n
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/background-position\";\n\nexport default function CSSBackgroundPosition() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Background Position in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/background-attachment',\n 'next': '/css/background-origin'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Background Position
\n
\n
\n The `background-position` property in CSS specifies the initial position of a background image within an element. This property allows you to control where the background image is placed within the element's background area. It has a basic syntax -\n
\n
\n
selector {\n
background-position: value;
\n
}
\n `\n }}>
\n
\n
Commonly Used Values and Their Uses
\n
\n There are many `background-position` property values. They are -\n
\n
\n
\n Keyword Values\n
There are many predefined keyword values to position the background image like top, bottom, left, right, center.
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n
\n `\n }}>
\n
\n
\n
\n Percentage Values\n
It specifies the position using percentages relative to the element's dimensions.
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n
\n `\n }}>
\n
\n
\n
\n Length Values\n
It specifies the position using length units (e.g., pixels, ems).
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n
\n `\n }}>
\n
\n
\n
\n Combination of Keywords and Length/Percentage Values\n
You can mix keywords with length or percentage values.
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n
\n
\n
\n `\n }}>
\n
\n
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/background-repeat\";\n\nexport default function CSSBackgroundRepeat() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Background Repeat in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/background-image',\n 'next': '/css/background-attachment'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Background Repeat
\n
\n
\n The `background-repeat` property in CSS controls how a background image is repeated (or not repeated) within an element. This property is essential for defining the appearance of background images when they do not cover the entire element. It has a basic syntax -\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/background-size\";\n\nexport default function CSSBackgroundSize() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Background Size in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/background-origin',\n 'next': '/css/background-clip'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Background Size
\n
\n
\n The `background-size` property in CSS specifies the size of the background images. This property allows you to control how the background image is scaled or sized within the element's background area.\n
\n
\n
selector {\n
background-size: value;
\n
}
\n `\n }}>
\n
\n \n
Commonly Used Values and Their Uses
\n
\n There are many `background-size` property values. They are -\n
\n
\n
\n `auto`\n
The background image is displayed at its original size. This is the default value.
It specifies the width and height of the background image as a percentage of the background area.If only one value is specified, the second value is set to `auto`.
It scales the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the image may be clipped to fill the element's content box.
This property value scales the background image to be as large as possible while ensuring both its width and height fit within the background area. The entire image will be visible, but there may be some empty space around it.
\n Hexadecimal color values are a way of representing colors in CSS using a six-digit code preceded by a hash (`#`). Each pair of digits represents the amount of the red, green, and blue value of the color, respectively. Hex color codes are widely used in web design because they are compact and easy to understand once you are familiar with the format.\n
\n
Syntax
\n
\n A hex color code is written as `#RRGGBB`, where:\n
\n
\n
`RR` represents the red value.
\n
`GG` represents the green value.
\n
`BB` represents the blue value.
\n
\n
\n Each pair of digits can range from `00` to `FF` in hexadecimal notation (`00` to `255` in decimal).\n
\n
\n
color: #RRGGBB;\n `\n }}>
\n
\n
Common Hex Color Code
\n
\n
#000000
\n
#FFFFFF
\n
#FF0000
\n
#00FF00
\n
#0000FF
\n
#FFFF00
\n
#00FFFF
\n
#FF00FF
\n
#ADD8E6
\n
\n\n
Experiment with Hex Value
\n
\n You can experiment hex value with the below sliders - \n
\n CSS also supports shorthand 3-digit hex color codes. This shorthand format is useful for colors where the red, green, and blue components are the same for both digits.\n
\n
\n Each pair of digits can range from `0` to `F` in hexadecimal notation.\n
\n
\n
color: #RGB;\n `\n }}>
\n
\n
\n The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each component. So, if we have #FF0000, it can be written like this: #F00.\n
\n HSL stands for Hue, Saturation, and Lightness. It is a color model that describes colors in terms of their hue, the degree of saturation (intensity), and the degree of lightness (brightness). The HSL color model is often seen as easier to understand than RGB because it matches how people naturally see colors.\n
\n
Syntax
\n
\n The `hsl()` function in CSS is used to define colors using the HSL model. It takes three parameters:\n
\n
\n
`hue` represent a degree on the color wheel (from 0 to 360). Where, 0 (or 360) is red, 120 is green, and 240 is blue.
\n
`saturation` represent a percentage (0% to 100%), the intensity of the color. Where, 0% is a shade of gray, and 100% is the full color.
\n
`lightness` represent a percentage (0% to 100%), the brightness of the color. Where, 0% is black, and 100% is white.
\n
\n
\n
color: hsl(hue, saturation, lightness);\n `\n }}>
\n
\n
Common HSL Color Code
\n
\n
hsl(0, 100%, 50%)
\n
hsl(120, 100%, 50%)
\n
hsl(240, 100%, 50%)
\n
hsl(60, 100%, 50%)
\n
hsl(0, 0%, 0%)
\n
hsl(0, 0%, 25%)
\n
hsl(0, 0%, 100%)
\n
hsl(195, 53%, 79%)
\n
hsl(0, 0%, 50%)
\n
\n\n
Experiment with HSL Value
\n
\n You can experiment hsl value with the below sliders - \n
\n In the HSL color model, Hue represents the type of color and is the degree on the color wheel from 0 to 360. Each degree corresponds to a specific color on the spectrum of visible light.\n
\n
\n Imagine a color wheel where each degree corresponds to a different color. By rotating around the wheel, you can change the hue, thereby selecting different colors.\n
\n
Examples
\n
\n
hsl(0, 100%, 50%)
\n
hsl(40, 100%, 50%)
\n
hsl(80, 100%, 50%)
\n
hsl(120, 100%, 50%)
\n
hsl(160, 100%, 50%)
\n
hsl(200, 100%, 50%)
\n
hsl(240, 100%, 50%)
\n
hsl(280, 100%, 50%)
\n
hsl(320, 100%, 50%)
\n
\n
\n In the above examples, you can check `hue` value are different for different color.\n
\n\n
What is SATURATION ?
\n
\n In the HSL (Hue, Saturation, Lightness) color model, saturation means how strong or pure a color is. It shows how bright or dull the color looks.\n
\n
\n `Saturation` is expressed as a percentage.\n
\n
\n High saturation (closer to `100%`) means the color is more intense and vibrant.\n
\n
\n And, Low saturation (closer to `0%`) means the color is more muted and closer to gray.\n
\n
\n Imagine a slider where one end is pure and the other is gray. Moving the slider adjusts the saturation level, changing the color's intensity.\n
\n
Examples
\n
\n
hsl(0, 100%, 50%)
\n
hsl(0, 50%, 50%)
\n
hsl(0, 0%, 50%)
\n
\n\n
What is LIGHTNESS ?
\n
\n `Lightness` in the HSL (Hue, Saturation, Lightness) color model refers to how light or dark a color appears. It describes the brightness of the color.\n
\n
\n `Lightness` is expressed as a percentage.\n
\n
\n High lightness (closer to `100%`) makes the color appear lighter or closer to white. And Low lightness (closer to `0%`) makes the color appear darker or closer to black.\n
\n
\n Imagine a slider where one end is white, and the other end is black. Moving the slider adjusts the lightness level, changing the color's brightness.\n
\n
Examples
\n
\n
hsl(0, 100%, 100%)
\n
hsl(0, 100%, 80%)
\n
hsl(0, 100%, 60%)
\n
hsl(0, 100%, 40%)
\n
hsl(0, 100%, 20%)
\n
hsl(0, 100%, 0%)
\n
\n\n
What is HSLA Value ?
\n
\n HSLA stands for Hue, Saturation, Lightness, and Alpha. It is an extension of the HSL color model that adds an alpha channel, which represents the opacity of the color. The HSLA color model allows you to define colors in a way that is often more intuitive than the RGB model and includes transparency.\n
\n
\n Where, Alpha represents the opacity of the color and is defined as a number between `0` and `1`.\n
\n
\n `0` is fully transparent, `1` is fully opaque.\n
\n RGB stands for Red, Green, and Blue. It's a color model that mixes these three main colors in different amounts to create many colors. In CSS, the `rgb()` function is used to define colors using the RGB color model.\n
\n
Syntax
\n
\n The `rgb()` function takes three parameters:\n
\n
\n
`red`: An integer between 0 and 255 representing the amount of the red color.
\n
`green`: An integer between 0 and 255 representing the amount of the green color.
\n
`blue`: An integer between 0 and 255 representing the amount of the blue color.
\n
\n
\n
color: rgb(red, green, blue);\n `\n }}>
\n
\n
Examples
\n
\n
rgb(0, 0, 0)
\n
rgb(255, 0, 0)
\n
rgb(161, 90, 30)
\n
rgb(155, 120, 80)
\n
rgb(240, 90, 140)
\n
rgb(20, 50, 170)
\n
rgb(220, 190, 240)
\n
rgb(230, 150, 135)
\n
rgb(170, 50, 190)
\n
\n\n
Experiment with RGB Value
\n
\n You can experiment rgb value with the below sliders - \n
\n RGBA color values are an extension of RGB color values with an alpha which represent a number between 0.0 (completely `transparent`) and 1.0 (completely `opaque`), the opacity level. It has basic syntax -\n
\n
\n
color: rgb(red, green, blue, alpha);\n `\n }}>
\n
\n
Some Example of Using RGBA Values
\n
\n
rgb(0, 0, 0, 0)
\n
rgb(0, 0, 0, 0.2)
\n
rgb(0, 0, 0, 0.4)
\n
rgb(0, 0, 0, 0.6)
\n
rgb(0, 0, 0, 0.8)
\n
rgb(0, 0, 0, 1)
\n
\n
\n In this above examples, you can see RGB value are for color `black`, but these are the shades of grey. RGBA allows you to control the transparency of colors, which is useful for creating overlay effects, backgrounds, and more.\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/colors\";\n\nexport default function CSSColors() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Colors in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/comments',\n 'next': '/css/colors/rgb'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Colors in CSS
\n
\n
\n Colors in CSS can be specified in various formats, each providing a different way to define colors. The most common methods are:\n
\n
\n
Color Names
\n
Hexadecimal Colors
\n
RGB and RGBA Colors
\n
HSL and HSLA Colors
\n
\n\n
CSS Color Names
\n
\n CSS provides a wide array of predefined color names that you can use directly in your stylesheets. These color names correspond to specific RGB values and cover a broad spectrum of colors. Using color names is convenient for quick styling without needing to remember specific hex or RGB values.\n
\n CSS includes 140 standard color names defined in the CSS Color Module Level 3 specification. Here are some of the most commonly used:\n
\n
\n
black
\n
white
\n
red
\n
green
\n
blue
\n
yellow
\n
cyan
\n
magenta
\n
gray
\n
silver
\n
darkgray
\n
lightgray
\n
dimgray
\n
gainsboro
\n
aliceblue
\n
antiquewhite
\n
aqua
\n
aquamarine
\n
azure
\n
beige
\n
bisque
\n
blanchedalmond
\n
blueviolet
\n
brown
\n
burlywood
\n
cadetblue
\n
chartreuse
\n
chocolate
\n
cornflowerblue
\n
cornsilk
\n
crimson
\n
darkblue
\n
darkcyan
\n
darkgoldenrod
\n
darkgreen
\n
darkkhaki
\n
darkmagenta
\n
darkolivegreen
\n
darkorange
\n
darkorchid
\n
darkred
\n
darksalmon
\n
darkseagreen
\n
darkslateblue
\n
darkslategray
\n
darkturquoise
\n
darkviolet
\n
deeppink
\n
deepskyblue
\n
dodgerblue
\n
firebrick
\n
floralwhite
\n
forestgreen
\n
fuchsia
\n
gainsboro
\n
ghostwhite
\n
gold
\n
goldenrod
\n
greenyellow
\n
honeydew
\n
hotpink
\n
indianred
\n
indigo
\n
ivory
\n
khaki
\n
lavender
\n
lavenderblush
\n
lawngreen
\n
lemonchiffon
\n
lightblue
\n
lightcoral
\n
lightcyan
\n
lightgoldenrodyellow
\n
lightgreen
\n
lightpink
\n
lightsalmon
\n
lightseagreen
\n
lightskyblue
\n
lightslategray
\n
lightsteelblue
\n
lightyellow
\n
lime
\n
limegreen
\n
linen
\n
maroon
\n
mediumaquamarine
\n
mediumblue
\n
mediumorchid
\n
mediumpurple
\n
mediumseagreen
\n
mediumslateblue
\n
mediumspringgreen
\n
mediumturquoise
\n
mediumvioletred
\n
midnightblue
\n
mintcream
\n
mistyrose
\n
moccasin
\n
navajowhite
\n
oldlace
\n
olive
\n
olivedrab
\n
orange
\n
orangered
\n
orchid
\n
palegoldenrod
\n
palegreen
\n
paleturquoise
\n
palevioletred
\n
papayawhip
\n
peachpuff
\n
peru
\n
pink
\n
plum
\n
powderblue
\n
purple
\n
rebeccapurple
\n
rosybrown
\n
royalblue
\n
saddlebrown
\n
salmon
\n
sandybrown
\n
seagreen
\n
seashell
\n
sienna
\n
skyblue
\n
slateblue
\n
slategray
\n
snow
\n
springgreen
\n
steelblue
\n
tan
\n
teal
\n
thistle
\n
tomato
\n
turquoise
\n
violet
\n
wheat
\n
whitesmoke
\n
yellowgreen
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/comments\";\n\nexport default function CSSComments() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"How to do Comments in CSS ? | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/how-to-use',\n 'next': '/css/colors'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
\n
How to do Comments in CSS?
\n
\n CSS comments are used to add notes or comments within CSS code. Comments are ignored by browsers during rendering, so they do not affect the appearance or functionality of the styles. They are useful for documenting code, providing context, and making the stylesheet easier to understand and maintain.\n
\n
Syntax
\n
\n CSS comments start with `/*` and end with `*/`. Anything between these markers is treated as a comment.\n
\n
\n
/* This is a single-line comment */\n \n
/*
\n
This is a
\n
multi-line comment
\n
*/
\n `\n }}>
\n
\n
Examples in CSS Code
\n
\n
/* Main container styles */\n
.container {
\n
width: 100%;
\n
margin: 0 auto;
\n
}
\n `\n }}>
\n
\n
\n Here, in the above example you can see comments are used for providing information.\n
\n
\n
/* Header Styles */\n
header {
\n
background-color: #333;
\n
color: white;
\n
padding: 10px;
\n
}
\n \n
/* Navigation Styles */
\n
nav {
\n
background-color: #444;
\n
color: #fff;
\n
}
\n `\n }}>
\n
\n
\n Here, in the above example you can see comments are used to separate different sections of the stylesheet for future understanding.\n
\n
\n
/*\n
.sidebar {
\n
display: none;
\n
}
\n
*/
\n \n
.main-content {
\n
width: 75%;
\n
}
\n `\n }}>
\n
\n
\n Here, in the above example you can see comments are used to comment out sections of code that you want to disable temporarily.\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\n\nexport const pageUrl = () => \"/css/introduction\";\n\nexport default function CSSIntro() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"An Introduction to CSS | A Complete Guide\");\n title.setKeyWords(\"an introduction to CSS, what are the benifits of css, benifits of using css, what is css, what is cascading style sheet\");\n title.setPageDescription(\"CSS is the style set, that we used to style a web page. It stands for Cascading Style Sheets. It is a Stylesheet language, used for describing the presentation of a document written in HTML or XML. It controls the layout and appearance of web pages. It defines how elements should be rendered on screen, on paper, in speech, or on other media.\");\n const urls = {\n 'next': '/css/syntax'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
CSS - Introduction
\n
\n
\n CSS is the style set, that we used to style a web page. It stands for Cascading Style Sheets.\n
\n
What is Cascading Style Sheets (CSS)?
\n
\n
CSS stands for Cascading Style Sheets.
\n
It is a Stylesheet language, used for describing the presentation of a document written in HTML or XML.
\n
It controls the layout and appearance of web pages.
\n
It defines how elements should be rendered on screen, on paper, in speech, or on other media.
\n
\n\n
Simple Demo of Using CSS
\n
\n These are the basic 3 looks that show a CSS can change your website to a beautiful look.\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/margins\";\n\nexport default function CSSMargin() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Margin in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/border-rounded',\n 'next': '/css/margin/collapse'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Margin
\n
\n
\n The CSS `margin` property is used to create space around elements, outside of any defined borders. Margins can be set for each side of an element (top, right, bottom, and left) and can be used to control the spacing between elements on a webpage. It has a basic syntax -\n
\n
\n
selector {\n
margin: top right bottom left;
\n
}
\n `\n }}>
\n
\n
\n Where, `top` specifies the top margin, `right` specifies the right margin, `bottom` specifies the bottom margin and `left` specifies the left margin.\n
\n\n
What is Margin ?
\n
\n Margins are used to create space around elements, outside of any defined borders.\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/selectors\";\n\nexport default function CSSSelectors() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"What is Selector in CSS ? | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/syntax',\n 'next': '/css/how-to-use'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
\n
What is a Selector in CSS?
\n
\n A CSS selector is a pattern which is used to select the elements you want to style. Selectors are basically target HTML elements and apply CSS properties to them.\n
\n
Use of Selector
\n
\n Selectors are essential in CSS because they define in which HTML elements a set of CSS rules will apply to. They can be used to style elements based on their tag name, class, ID, attributes, and even their state or position in the document structure.\n
\n
Types of Selector
\n
\n Mainly there are 5 types of selectors - \n
\n
\n
\n Name / Id / Class Selector \n - This selector selects elements by its name, id or class.\n
\n
\n Combinator Selector \n - This selector select elements based on a relationship between them.\n
\n
\n Pseudo-class Selector \n - This selector select elements based on a certain state like hover, active, focus.\n
\n
\n Pseudo-element Selector \n - This selector select and style a part of an element like first-letter, first-line etc.\n
\n
\n Attribute Selector \n - This selector select elements based on an attribute or attribute value.\n
\n
\n\n
CSS `element` Selector
\n
\n The CSS element selector (also known as a type selector) is used to select HTML elements based on their tag name. This selector applies styles to all instances of a specified element in a webpage.\n
\n
Syntax
\n
\n
element {\n
property: value;
\n
}
\n `\n }}>
\n
\n
\n Where,\n
\n
\n
element is the HTML tag name you want to style.
\n
property is the CSS property you want to apply.
\n
and value is the value of the CSS property.
\n
\n
\n Element selectors are often used for general styling of common HTML elements, such as paragraphs, headings, lists, and divs. They are straightforward and provide a broad way to apply styles to multiple elements at once.\n
\n
Example
\n
\n
p {\n
font-size: 16px;
\n
line-height: 1.5;
\n
color: #333;
\n
}
\n `\n }}>
\n
\n
\n Above rule applies the specified styles to all `<p>` elements, setting the font size, line height, and text color.\n
\n\n
CSS `id` Selector
\n
\n The CSS ID selector is used to style a single, unique element in the HTML document. The ID selector is identified by a hash (`#`) followed by the ID value assigned to an HTML element. Since IDs must be unique within a document, the ID selector is very specific and powerful.\n
\n
Syntax
\n
\n
#id {\n
property: value;
\n
}
\n `\n }}>
\n
\n
\n Where,\n
\n
\n
#id is the ID value prefixed by a hash symbol (`#`).
\n
property is the CSS property you want to apply.
\n
and value is the value of the CSS property.
\n
\n
\n The ID selector is commonly used to style elements that need to be uniquely identified, such as specific sections, headers, or elements requiring unique behavior or appearance.\n
\n
Example
\n
\n
#about {\n
padding: 50px;
\n
background-color: #f9f9f9;
\n
border: 1px solid #ddd;
\n
}
\n `\n }}>
\n
\n
\n This rule applies the specified styles to the element with the ID `about`.\n
\n\n
CSS `class` Selector
\n
\n The CSS class selector is used to apply styles to multiple elements that share the same class attribute. Unlike IDs, classes are not unique and can be reused on multiple elements, making class selectors highly versatile and commonly used in web development.\n
\n
Syntax
\n
\n
.class {\n
property: value;
\n
}
\n `\n }}>
\n
\n
\n Where,\n
\n
\n
.class is the class name prefixed by a dot symbol (`.`).
\n
property is the CSS property you want to apply.
\n
and value is the value of the CSS property.
\n
\n
\n Class selectors are ideal for styling multiple elements in a consistent manner. They are commonly used to apply shared styles, such as for buttons, form controls, layout components, and more.\n
\n
Example
\n
\n
.highlight {\n
background-color: yellow;
\n
font-weight: bold
\n
}
\n `\n }}>
\n
\n
\n This rule applies the specified styles to all elements with the class `highlight`.\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\n\nexport const pageUrl = () => \"/css/syntax\";\n\nexport default function CSSSyntax() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"An Syntax of CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/introduction',\n 'next': '/css/selectors'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
CSS - Syntax
\n
\n
\n CSS (Cascading Style Sheets) syntax is used to define the styles for HTML elements. It has two main parts - one is `Selector` and another is `Declaration Block`.\n
\n
Basic Syntax
\n
\n
selector {\n
property: value;
\n
}
\n `\n }}>
\n
\n
\n Where,\n
\n
\n Selector basically targets the HTML element(s) to which the style will be applied. For example, `h1`, `.class-name`, `#id-name`\n
\n
\n Declaration Block contains one or more declarations enclosed in curly braces `{}`. For example, `{ color: blue; font-size: 16px; }`\n
\n
\n \n
\n In `Declaration Block`, You can write multiple set of declarations, each declaration has two parts one is `property` and other is `value`. \n It's basic syntax is `property: value;`.\n
\n
For example, `color: blue;` is a declaration, where `color` is `property` and `blue` is `value`.
\n\n
Simple Example of Syntax
\n
\n
h1 {\n
color: blue;
\n
font-size: 24px;
\n
text-align: center;
\n
}
\n `\n }}>
\n
\n
Example Explained
\n
\n
Here, `h1` is the Selector
\n
And `{ color: blue; font-size: 24px; text-align: center; }` is Declaration Block. Below are the declaration that define in the above declaration -\n
\n
`color: blue;`
\n
`font-size: 24px;`
\n
`text-align: center;`
\n
\n
\n
\n
\n This CSS rule define a style to `h1` elements with blue text, a font size of 24 pixels, and center alignment.\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/font/fallbacks\";\n\nexport default function FontFallback() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Font Fallback in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/font/web/safe',\n 'next': '/css/font/style'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Font Fallback in CSS
\n
\n
\n Font fallbacks refer to the practice of specifying multiple font options in a CSS `font-family` declaration. This ensures that if the preferred font is not available on a user's device, a fallback font will be used, providing a consistent appearance for your text across different platforms.\n
\n
How Font Fallbacks Work
\n
\n When you specify multiple fonts in the `font-family` property, the browser tries to use the first font in the list. If that font is not available, it moves on to the next one, and so on. If none of the specified fonts are available, the browser will ultimately use a generic font family (like `serif`, `sans-serif`, or `monospace`).\n
If `Roboto` is not available, the browser will try `Helvetica Neue`.
\n
If neither `Roboto` nor `Helvetica Neue` are available, the browser will use `Arial`.
\n
If none of the specified fonts are available, it will default to any available sans-serif font.
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/font/family\";\n\nexport default function FontFamily() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"What is Font Family in CSS? | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/text/shadow',\n 'next': '/css/font/web/safe'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
What is Font Family in CSS?
\n
\n
\n The `font-family` property in CSS is used to specify the typeface that should be applied to the text content of an HTML element. It allows you to define the visual appearance of text by choosing different fonts. This property plays a crucial role in typography and helps create a consistent and aesthetically pleasing look for web pages.\n
This is a paragraph, shown in the Times New Roman font.
\n
This is a paragraph, shown in the Arial font.
\n
This is a paragraph, shown in the Lucida Console font.
\n `\n }}>
\n
\n\n
Some Best Practices of Using Font Family
\n
\n Here are some best practices we need to follow while using Font Family.\n
\n
\n
\n Font Stacks: Always provide fallback fonts to ensure the text is displayed correctly even if the preferred font isn't available. A typical font stack includes the preferred font, a common fallback, and a generic family like the below example -\n
\n
body {\n
font-family: \"Roboto\", \"Arial\", sans-serif;
\n
}
\n `\n }}>
\n
\n
\n
\n Web-Safe Fonts: Use fonts that are commonly installed on most devices to ensure consistent display across different systems.\n
\n
\n Custom Fonts: You can use custom fonts via the @font-face rule or by linking to web fonts like Google Fonts, but still include fallback options.\n
\n
\n Readability: Choose fonts that are easy to read and match the tone and purpose of your content. For example, use serif fonts for formal documents and sans-serif fonts for modern, clean designs.\n
\n
\n\n
Examples of Custom Fonts
\n
\n
@font-face {\n
font-family: 'MyCustomFont';
\n
src: url('mycustomfont.woff2') format('woff2'),
\n
url('mycustomfont.woff') format('woff');
\n
}
\n \n
body {
\n
font-family: 'MyCustomFont', Arial, sans-serif;
\n
}
\n `\n }}>
\n
\n
In this above example:
\n
\n
A custom font called \"MyCustomFont\" is used.
\n
If the custom font is not available, it falls back to Arial or any sans-serif font.
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/font/size\";\n\nexport default function FontSize() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Font Size in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/font/style',\n 'next': '/css/font/google'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Font Size in CSS
\n
\n
\n The `font-size` property in CSS is used to control the size of the text on a webpage. It is one of the fundamental aspects of typography, allowing you to adjust how large or small the text appears, which can significantly impact the readability and visual hierarchy of your content.\n
\n
\n You can set font size by multiple types of value\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/font/style\";\n\nexport default function FontStyle() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Font Style in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/font/fallbacks',\n 'next': '/css/font/size'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Font Style in CSS
\n
\n
\n The `font-style` property in CSS is used to define the style of the font, primarily focusing on whether the text should be rendered in a normal, italic, or oblique style.\n
\n The `font-weight` property in CSS is used to specify the thickness or boldness of the text. It allows you to control how bold or light the text appears, making it an essential tool for emphasizing text and creating visual hierarchy.\n
\n
Different Examples of Font Weight
\n
\n
<style>\n
p.normalWeight {
\n
font-weight: normal;
\n
}
\n
p.bold {
\n
font-weight: bold;
\n
}
\n
p.bolder {
\n
font-weight: bolder;
\n
}
\n
p.lighter {
\n
font-weight: lighter;
\n
}
\n
p.numberValue {
\n
font-weight: 400;
\n
}
\n
</style>
\n
<p class=\"normalWeight\">This is a paragraph.</p>
\n The `font-variant` property in CSS allows you to control the variation of the text, typically focusing on features like small caps and numeric styles.\n
\n
Different Examples of Font Variant
\n
\n
<style>\n
p.normal {
\n
font-variant: normal;
\n
}
\n
p.smallcaps {
\n
font-variant: small-caps;
\n
}
\n
</style>
\n
<p class=\"normal\">This Is A Example Of Font Variant.</p>
\n
<p class=\"smallcaps\">This Is A Example Of Font Variant.</p>
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/height/width\";\n\nexport default function HeightWidth() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Height and Width in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/padding',\n 'next': '/css/box/model'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Setting Height and Width
\n
\n
\n The `height` and `width` properties in CSS are used to set the size of an element. These properties can be applied to block-level elements and replaced elements (like `<img>`).\n
\n
\n You can specify the height and width using various units:\n
\n Relative Units: `%` (percentage), `em` (relative to the font-size of the element), `rem` (relative to the font-size of the root element), `vw` (viewport width), `vh` (viewport height).\n
\n
\n\n
Some Examples
\n
\n Here is some examples of how we set height and width to elements -\n
\n
\n
\n You can set fixed height and width to an element by direct passing the fixed value.\n
\n
<style>\n
.box-fixed {
\n
width: 200px;
\n
height: 100px;
\n
background-color: lightblue;
\n
}
\n
</style>
\n
<div class=\"box-fixed\">This element has a fixed 200px width and 100px height.</div>
This element has a fixed 200px width and 100px height.
\n `\n }}>
\n
\n
\n
\n You can set relative value of an parent element in percentage.\n
\n
<style>\n
.container-box {
\n
width: 100%;
\n
height: 300px;
\n
background-color: lightgrey;
\n
}
\n \n
.box-percentage {
\n
width: 50%; /* 50% of the parent width */
\n
height: 50%; /* 50% of the parent height */
\n
background-color: lightblue;
\n
}
\n
</style>
\n
<div class=\"container-box\">
\n
<div class=\"box-percentage\">
\n
This element has 50% height and width of parent element.
\n
</div>
\n
</div>
\n `\n }}>
\n
\n
\n Output will be the following -\n
\n
\n
\n .container-box {\n width: 100%;\n height: 300px;\n background-color: lightgrey;\n }\n \n .box-percentage {\n width: 50%; /* 50% of the parent width */\n height: 50%; /* 50% of the parent height */\n background-color: lightblue;\n }\n \n
\n
\n This element has 50% height and width of parent element.\n
\n
\n `\n }}>
\n
\n
\n
\n\n
Viewport Area in CSS
\n
\n The viewport refers to the visible area of a web page on a screen. It is the part of the web page that the user can see without scrolling. The size of the viewport varies depending on the device and its screen size.\n
\n
Viewport Units:
\n
\n
`vw` (viewport width): 1vw is equal to 1% of the viewport's width.
\n
`vh` (viewport height): 1vh is equal to 1% of the viewport's height.
\n
\n
\n Example of using viewport units - \n
\n
\n
.box-viewport {\n
width: 50vw; /* 50% of the viewport width */
\n
height: 50vh; /* 50% of the viewport height */
\n
background-color: lightblue;
\n
}
\n `\n }}>
\n
\n\n
Setting Min and Max Values
\n
\n By setting min and max value in height and width of an element you can set minimum and maximum height and width of that element. You can use `min-width`, `max-width`, `min-height`, and `max-height` to control the minimum and maximum size of an element.\n
\n
\n Look at the below example for understanding better.\n
\n Using `max-width` and `max-height` in above `box-child` element, width will be `250px` instead of `320px` and height will be `100px` instead of `160px`.\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/how-to-use\";\n\nexport default function CSSSelectors() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"How to use CSS ? | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/selectors',\n 'next': '/css/comments'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
\n
How to use CSS?
\n
\n We can apply CSS in HTML Web page mainly three primary ways: `inline styles`, `internal styles`, and `external styles`. Each method has different use cases, advantages, and disadvantages. Let's see how it is different from another way.\n
\n
Inline Styles
\n
\n Inline styles are applied directly within an HTML element using the style attribute. It has a basic syntax -\n
\n
\n
<element style=\"property: value;\">\n `\n }}>
\n
\n
\n Ok, For clear understand this, let's have a look at below example -\n
\n Pros & Cons \n It is very easy to use for small, specific styles. No need to write additional `<style>` block. But for larger projects it is very difficult to maintain. It can not be re-use across multiple elements. It is very hard to override with other CSS rules.\n
\n\n
Internal Styles
\n
\n Internal styles are defined within the `<style>` tag inside the `<head>` section of an HTML document. It has a basic syntax -\n
\n
\n
<style>\n
CSS rules
\n
</style>
\n `\n }}>
\n
\n
\n Ok, let's have a look at below example for better understanding.\n
\n
\n
<style>\n
h1 {
\n
color: blue;
\n
text-align: center;
\n
}
\n
p {
\n
font-size: 16px;
\n
line-height: 1.5;
\n
color: red;
\n
}
\n
</style>
\n
<h1>Hello, World!</h1>
\n
<p>This is a paragraph styled with internal CSS.</p>
\n Pros & Cons \n It is useful for single page web page. It's styles are centralized, making them easier to manage compared to inline styles. But Styles are not reusable across multiple HTML files.\n
\n\n
External Styles
\n
\n External styles are defined in a separate CSS file, which is linked to the HTML document using the `<link>` tag.\n
<p>This is a paragraph styled with external CSS.</p>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
CSS (`styles.css`):
\n
\n
body {\n
font-family: Arial, sans-serif;
\n
}
\n
h1 {
\n
color: blue;
\n
text-align: center;
\n
}
\n
p {
\n
font-size: 16px;
\n
line-height: 1.5;
\n
}
\n `\n }}>
\n
\n
\n Pros & Cons \n This types of style is reusable across multiple HTML files. It keeps HTML files clean and separates content from presentation. It is easier to maintain and update styles in large projects. But in this style, it requires additional HTTP requests to load the CSS file (though this can be mitigated with caching).\n
\n
\n \n )\n}","const requireModule = require.context(\"./\",true,/\\.js$/); //console.log(requireModule.keys())\nconst api = {};\nconst routes = [];\nrequireModule.keys().forEach((fileName) => {\n if (fileName === \"./Index.js\") return;\n const moduleName = fileName.replace(/(\\.\\/|\\.js)/g, \"\");\n const module = requireModule(fileName);\n if (module.default) {\n api[moduleName] = module.default;\n } else {\n api[moduleName] = module;\n }\n if (module.pageUrl) {\n routes.push({ path: module.pageUrl(), component: moduleName });\n }\n});\n\napi['Routes'] = routes;\nexport default api;\n","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/margin/collapse\";\n\nexport default function MarginCollapse() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Margin Collapse in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/margins',\n 'next': '/css/padding'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Margin Collapse
\n
\n
\n Margin collapse is a behavior in CSS where vertical margins between adjacent block-level elements are combined into a single margin, rather than adding up. This usually happens with top and bottom margins of elements. The resulting margin is equal to the largest of the combined margins.\n
\n\n
When Margins Collapse Occur ?
\n
\n
\n Adjacent Sibling Elements:\n The bottom margin of one element and the top margin of the next element collapse.\n
\n
\n Parent and First/Last Child:\n The top margin of the first child and the parent's top margin (or the bottom margin of the last child and the parent's bottom margin) collapse.\n
\n
\n Empty Elements:\n If an element has no content, padding, or border, its top and bottom margins collapse.\n
\n
\n
Example 1 : Adjacent Sibling Elements
\n
\n When two sibling elements have vertical margins that meet, only the larger margin is applied. Like first element has a bottom margin and second element has a top margin, then in between these two margin larger margin will be applied here. Ok let's take an example -\n
\n In this example, the top margin of the `parent` (50px) and the top margin of the `child` (30px) collapse into a single 50px margin because there is no padding or border between them.\n
\n\n
Example 3: Empty Elements
\n
\n If an element has no content, padding, or border, its top and bottom margins collapse.\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/outline\";\n\nexport default function Outline() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Outline in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/box/model',\n 'next': '/css/outline/width'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Outline
\n
\n
\n The outline property in CSS is used to draw a line outside the element's border, making the element stand out. Unlike the border, the outline does not take up space and is always drawn outside the element's box, potentially overlapping other elements. Basically an outline is a line drawn outside the element's border.\n
\n
\n
\n
\n \n
\n
\n
\n
Outline Properties
\n
\n CSS has the following outline properties:\n
\n
\n
\n `outline-style` : It defines the style of the outline.\n
\n
\n `outline-width` : It specifies the thickness of the outline. \n
\n
\n `outline-color` : It sets the color of the outline.\n
\n
\n `outline-offset` : It adds space between the element's border and its outline.\n
\n
\n `outline` : A shorthand property for setting the style, width, and color of the outline in a single declaration.\n
\n
\n\n
CSS Outline Style
\n
\n The `outline-style` property specifies the style of the outline. It can take several values, similar to the border-style property. It has many predefined value -\n
\n
\n
`none`: No outline.
\n
`solid`: A single solid line.
\n
`dotted`: A series of dots.
\n
`dashed`: A series of short dashes.
\n
`double`: Two solid lines.
\n
`groove`: A 3D grooved (indented) border.
\n
`ridge`: A 3D ridged (raised) border.
\n
`inset`: A 3D inset border that makes the element appear embedded.
\n
`outset`: A 3D outset border that makes the element appear raised.
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/outline/color\";\n\nexport default function OutlineColor() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Outline Color in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/outline/width',\n 'next': '/css/outline/shorthand'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Outline Color
\n
\n
\n The `outline-color` property in CSS is used to set the color of an element's outline. The outline color can be defined in various formats, including named colors, HEX values, RGB/RGBA values, HSL/HSLA values, or the keyword `invert`.\n
\n
\n The `outline-color` property sets the color of an element's outline.\n
\n
\n You can set the color using:\n
\n
\n
Name: A color name, like \"red.\"
\n
HEX: A hex value, like \"#ff0000.\"
\n
RGB: An RGB value, like \"rgb(255, 0, 0).\"
\n
HSL: An HSL value, like \"hsl(0, 100%, 50%).\"
\n
Invert: This inverts the color, making sure the outline is visible against any background.
\n
\n
\n Here’s an example showing different outlines with various colors. Notice that each element also has a thin black border inside the outline.\n
\n
\n
<style>\n
.box {
\n
width: 200px;
\n
height: 100px;
\n
padding: 20px;
\n
margin: 10px;
\n
outline-style: solid;
\n
outline-width: 4px;
\n
display: inline-flex;
\n
}
\n \n
.box1 {
\n
outline-color: red; /* Named color */
\n
}
\n \n
.box2 {
\n
outline-color: #00ff00; /* HEX color */
\n
}
\n \n
.box3 {
\n
outline-color: rgb(0, 0, 255); /* RGB color */
\n
}
\n \n
.box4 {
\n
outline-color: rgba(255, 165, 0, 0.7); /* RGBA color */
\n
}
\n \n
.box5 {
\n
outline-color: hsl(120, 100%, 50%); /* HSL color */
\n
}
\n \n
.box6 {
\n
outline-color: hsla(240, 100%, 50%, 0.5); /* HSLA color */
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/outline/offset\";\n\nexport default function OutlineOffset() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Outline Offset in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/outline/shorthand',\n 'next': '/css/text/color'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Outline Offset
\n
\n
\n The `outline-offset` property in CSS is used to specify the distance between an element's outline and its border edge. Essentially, it controls how far the outline is drawn from the border or edge of the element. It has a basic syntax -\n
\n
\n
element {\n
outline-offset: value;
\n
}
\n `\n }}>
\n
\n
\n Where, value is specifies the distance by which the outline is offset from the border edge. It can be defined in any valid CSS length unit, such as `px` (pixels), `em`, `rem`, `%`, etc.\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/outline/shorthand\";\n\nexport default function OutlineShorthand() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Outline Shorthand in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/outline/color',\n 'next': '/css/outline/offset'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Outline Shorthand
\n
\n
\n The `outline` shorthand property in CSS is a convenient way to set all the individual outline properties (`outline-width`, `outline-style`, and `outline-color`) in a single declaration. This property is used to create an outline around an element, which is a line drawn outside the border edge.\n
\n
\n It has a basic syntax, you have to follow the order.\n
`outline-width`: Specifies the thickness of the outline (e.g., `thin`, `medium`, `thick`, or a specific length like `2px`).
\n
`outline-style`: Specifies the style of the outline (e.g., `solid`, `dashed`, `dotted`).
\n
`outline-color`: Specifies the color of the outline (e.g., `red`, `#ff0000`, `rgb(255, 0, 0))`.
\n
\n\n
\n If any of the individual properties are omitted, their default values will be used. Default value of `outline-width` is `medium`. Default value of `outline-style` is `none`. Default value of `outline-color` is the current color of the element (usually the `color` property of the text).\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/outline/width\";\n\nexport default function OutlineWidth() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Outline Width in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/outline',\n 'next': '/css/outline/color'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Outline Width
\n
\n
\n The `outline-width` property in CSS is used to specify the thickness of the outline surrounding an element. Unlike borders, outlines do not affect the element's layout because they are drawn outside the element's border edge. The `outline-width` property can be set using keywords or length units.\n
\n
\n The `outline-width` property specifies the width of the outline, and can have one of the following values:\n
\n
\n
thin (typically 1px)
\n
medium (typically 3px)
\n
thick (typically 5px)
\n
A specific size (in px, pt, cm, em, etc)
\n
\n
\n The following example shows some outlines with different widths:\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/padding\";\n\nexport default function Padding() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Padding in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/margin/collapse',\n 'next': '/css/height/width'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
What is Padding ?
\n
\n
\n Padding is the space between the content of an element and its border. It is used to create space inside an element, pushing the content away from the edges. Padding is defined using CSS properties, and it can be set for all four sides of an element (`top`, `right`, `bottom`, `left`).\n
\n You can set different padding to each indivisual side using these indivisual side properties like `padding-top`, `padding-right`, `padding-bottom` and `padding-left`.\n
\n\n
\n
<style>\n
.example {
\n
padding-top: 30px;
\n
padding-right: 85px;
\n
padding-bottom: 30px;
\n
padding-left: 85px;
\n
}
\n
</style>
\n
<div class=\"example\">This is a example of indivisual side padding properties which explain different padding to each side. This area is 30px top padding, 85px right padding, 30px bottom padding and 85px left padding.</div>
This is a example of indivisual side padding properties which explain different padding to each side. This area is 30px top padding, 85px right padding, 30px bottom padding and 85px left padding.
\n `\n }}>
\n
\n\n
Shorthand Property of Padding
\n
\n Using shorthand property you can set padding to indivisual sides. Below are the some examples of shorthand property value.\n The shorthand property can take one, two, three, or four values:\n
\n
\n
\n One Value: Applies the same padding to all four sides.\n
\n
.example {\n
padding: 10px; /* 10px for all sides */
\n
}
\n `\n }}>
\n
\n
\n
\n Two Values: First value for top and bottom, second value for right and left.\n
\n
.example {\n
padding: 10px 15px; /* 10px top and bottom, 15px right and left */
\n
}
\n `\n }}>
\n
\n
\n
\n Three Values: First value for top, second value for right and left, third value for bottom.\n
\n
.example {\n
padding: 10px 15px 20px; /* 10px top, 15px right and left, 20px bottom */
\n
}
\n `\n }}>
\n
\n
\n
\n Four Values: First value for top and bottom, second value for right and left.\n
\n
.example {\n
padding: 10px 15px 20px 25px; /* 10px top, 15px right, 20px bottom, 25px left */
\n
}
\n `\n }}>
\n
\n
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/border-rounded\";\n\nexport default function RoundedBorders() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Rounded Borders in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/border-shorthand',\n 'next': '/css/margins'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Rounded Borders
\n
\n
\n Rounded borders in CSS can be created using the `border-radius` property. This property allows you to add rounded corners to an element, giving it a softer and more modern appearance. It has a simple syntax -\n
\n
\n
selector {\n
border-radius: value;
\n
}
\n `\n }}>
\n
\n
\n Where, `value` specifies the radius of the element's corners. It can be a length (e.g., `px`, `em`, `%`) or multiple values to control individual corners.\n
\n\n
How a Rounded Corner Look Like
\n
\n Below are some examples of how rounded corner's are look like - \n
\n
Example 1
\n
\n
<style>\n
.roundedStyle1{
\n
padding: 10px 20px;
\n
border : 2px solid green;
\n
border-radius : 10px;
\n
}
\n
</style>
\n
<p class=\"roundedStyle1\"> This is rounded corner style 1</p>
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/text/alignment\";\n\nexport default function TextAlignment() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Text Alignment in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/text/color',\n 'next': '/css/text/decoration'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Text Alignment
\n
\n
\n Text alignment in CSS is managed using the `text-align` property, which controls the horizontal alignment of text within an element. This property is most commonly applied to block-level elements like paragraphs, headings, divs, etc.\n
\n
\n It has a basic syntax -\n
\n
\n
element {\n
text-align: value;
\n
}
\n `\n }}>
\n
\n
\n Where, `value` determines how the text is aligned. It can be `left`, `right`, `center`, `justify`, `initial` and `inherit`.\n
\n\n
Examples : How Text Alignment Works
\n
\n
<style>\n
.left-align {
\n
text-align: left;
\n
}
\n \n
.right-align {
\n
text-align: right;
\n
}
\n \n
.center-align {
\n
text-align: center;
\n
}
\n \n
.justify-align {
\n
text-align: justify;
\n
}
\n
</style>
\n
<p class=\"left-align\">This text is aligned to the left.</p>
\n
<p class=\"right-align\">This text is aligned to the right.</p>
\n
<p class=\"center-align\">This text is centered.</p>
\n
<p class=\"justify-align\">This is an example of justified text. This text will spread out to fill the entire width of the paragraph, creating a clean block of text with both edges aligned.</p>
This is an example of justified text. This text will spread out to fill the entire width of the paragraph, creating a clean block of text with both edges aligned.
\n `\n }}>
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/text/color\";\n\nexport default function TextColor() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Text Color in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/outline/offset',\n 'next': '/css/text/alignment'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Text Color
\n
\n
\n The `color` property in CSS is used to set the color of text in an element. It controls the foreground color, which means it affects the color of the text content inside an HTML element. It has a basic syntax -\n
\n
\n
element {\n
color: value;
\n
}
\n `\n }}>
\n
\n
\n Where, value can be a named color (like `red`), a HEX value (like `#ff0000`), an RGB or RGBA value (like `rgb(255, 0, 0)` or `rgba(255, 0, 0, 0.8)`), an HSL or HSLA value (like `hsl(0, 100%, 50%)` or `hsla(0, 100%, 50%, 0.8)`), or a global value like `inherit`.\n
Some text under paragraph to show how a color in text looks like. This text is blue in color. You can see the heading is in green color. We can use different color in different section using selectors.
\n `\n }}>
\n
\n\n
Examples : How We Use Color Property
\n
\n Lets discuss the above example - \n
\n
\n
<style>\n
h2{
\n
color: green;
\n
text-align: center;
\n
}
\n
.myTextColor{
\n
color: blue;
\n
text-align: center;
\n
}
\n
</style>
\n
<h2>Heading</h2>
\n
<p class=\"myTextColor\">
\n
Some text under paragraph to show how a color in text looks like. This text is blue in color. You can see the heading is in green color. We can use different color in different section using selectors.
\n
</p>
\n `\n }}>
\n
\n
\n Here, The heading \"Heading\" will appear in `green` and will be centered on the page and The paragraph text \"Some text under paragraph...\" will appear in `blue` and will also be centered.\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/text/decoration\";\n\nexport default function TextDecoration() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Text Decoration in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/text/alignment',\n 'next': '/css/text/transformation'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Text Decoration
\n
\n
\n The `text-decoration` property in CSS is used to add decorative elements to text, such as underlines, overlines, line-throughs, and more. This property allows you to control the appearance of these decorations, including their color, style, and position relative to the text.\n
\n
\n It has a basic syntax -\n
\n
\n
element {\n
text-decoration: value;
\n
}
\n `\n }}>
\n
\n
\n Where, value can be a single decoration or a combination of several values to customize the decoration.\n
\n\n
Sub-Properties of `text-decoration`
\n
\n The `text-decoration` property in CSS can be broken down into several sub-properties that provide fine-grained control over text decorations like underlines, overlines, and line-throughs. Here's a detailed explanation of each:\n
\n
\n
\n `text-decoration-line` \n It specifies the type of line decoration to apply to the text. It can be `none`, `underline`, `overline` and `line-through`.\n
\n
`none`: It is used for no text decoration.
\n
`underline`: It is used to add an underline under the text.
\n
`overline`: It is used to add a line above the text.
\n
`line-through`: It is used to add a line through the text (strikethrough).
\n
\n
\n
<style>\n
p.none{
\n
text-decoration-line : none;
\n
}
\n
p.underline{
\n
text-decoration-line : underline;
\n
}
\n
p.overline{
\n
text-decoration-line : overline;
\n
}
\n
p.line-through{
\n
text-decoration-line : line-through;
\n
}
\n
</style>
\n
<p class=\"none\"> This paragraph is no decoration. </p>
\n
<p class=\"underline\"> This paragraph is decorate with underline. </p>
\n
<p class=\"overline\"> This paragraph decorate with overline. </p>
\n
<p class=\"line-through\"> This paragraph is decorate with line-through. </p>
\n `text-decoration-color` \n It specifies the color of the text decoration line. It can be a named color (like `red`), a HEX value (like `#ff0000`), an RGB or RGBA value (like `rgb(255, 0, 0)` or `rgba(255, 0, 0, 0.8)`), an HSL or HSLA value (like `hsl(0, 100%, 50%)` or `hsla(0, 100%, 50%, 0.8)`)\n
\n
<style>\n
p.colorname{
\n
text-decoration-color : blue;
\n
text-decoration-line : underline;
\n
}
\n
p.colorcode{
\n
text-decoration-color : #e80707;
\n
text-decoration-line : underline;
\n
}
\n
</style>
\n
<p class=\"colorname\"> This paragraph is underline with blue color. </p>
\n
<p class=\"colorcode\"> This paragraph is underline with red color. </p>
This paragraph is decorate with 5px dotted underline.
\n
This paragraph is decorate with dashed (50% of font size) underline.
\n `\n }}>
\n
\n
\n
\n\n
Shorthand of `text-decoration`
\n
\n You can also use the shorthand version of the `text-decoration` property to specify multiple aspects at once, such as style, color, and line type. It has a basic syntax -\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/text/shadow\";\n\nexport default function TextShadow() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Text Shadow in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/text/spacing',\n 'next': '/css/font/family'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Text Shadow
\n
\n
\n The `text-shadow` property in CSS is used to add shadow effects to text. It allows you to create various visual effects by specifying the position, blur, and color of the shadow. This property is often used to give text a more polished or dramatic look on webpages.\n
\n
\n It has a basic syntax -\n
\n
\n
element {\n
text-shadow: offset-x offset-y blur-radius color;
\n
}
\n `\n }}>
\n
\n
\n Where,\n
\n
\n
`offset-x`: The horizontal distance of the shadow. Positive values move the shadow to the right, while negative values move it to the left.
\n
`offset-y`: The vertical distance of the shadow. Positive values move the shadow down, while negative values move it up.
\n
`blur-radius (optional)`: Defines the blur radius of the shadow. The larger the value, the more blurred the shadow will appear. If omitted, the default is 0 (a sharp shadow).
\n
`color (optional)`: Specifies the color of the shadow. If omitted, the color of the text will be used.
\n
\n\n
How a Text Shadow Looks Like
\n
\n Here are some example of how text shadow looks like -\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/text/spacing\";\n\nexport default function TextSpacing() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Text Spacing in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/text/transformation',\n 'next': '/css/text/shadow'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Text Spacing
\n
\n
\n Text spacing in CSS refers to the manipulation of space between characters, words, and lines within text elements. CSS provides several properties to control these aspects, allowing for fine-tuned typography that improves readability and visual appeal.\n
\n
Key Properties for Text Spacing
\n
\n Here, we will discuss each of the following properties.\n
\n
\n
letter-spacing
\n
word-spacing
\n
line-height
\n
text-indent
\n
white-space
\n
\n\n
Letter Spacing
\n
\n It controls the space between individual characters in the text. If you set it's value to `normal` then it use default spacing between characters. You can also add a specific amount of space, which can be positive or negative, measured in units like `px`, `em`, etc.\n
\n
\n
p {\n
letter-spacing: 2px;
\n
}
\n `\n }}>
\n
\n
\n In above example, This will adds 2 pixels of space between each character in the paragraph.\n
\n\n
Word Spacing
\n
\n It controls the space between individual words in the text. If you set it's value to `normal` then it use default spacing between words. You can also add a specific amount of space, which can be positive or negative, measured in units like `px`, `em`, etc.\n
\n
\n
p {\n
word-spacing: 5px;
\n
}
\n `\n }}>
\n
\n
\n In above example, This will adds 5 pixels of space between each word in the paragraph.\n
\n\n
Line Height
\n
\n It controls the space between lines of text within a block of text. If you set it's value to `normal` then line height usually around 1.2 times the font size. You can set even a number in value, which is a multiplier of the element's font size. You can set a specific value in units like `px`, `em`, etc or a percentage, which is a percentage of the element's font size..\n
\n
\n
p {\n
line-height: 1.5;
\n
}
\n `\n }}>
\n
\n
\n The above example sets the line height to 1.5 times the font size, adding more space between lines.\n
\n\n
Text Indent
\n
\n It controls the indentation of the first line of text in a block-level element. You can set a specific length in values to indent the first line, measured in px, em, etc. You can set a percentage in value which is a percentage of the containing block's width.\n
\n
\n
p {\n
text-indent: 30px;
\n
}
\n `\n }}>
\n
\n
\n In the above example, it indents the first line of the paragraph by 30 pixels.\n
\n\n
White Space
\n
\n It controls how white space (spaces, tabs, and newlines) inside an element is handled. It has many possible values -\n
\n
\n
`normal`: It collapses white space and breaks lines when necessary (default).
\n
`nowrap`: It collapses white space but prevents line breaks.
\n
`pre`: It preserves white space and line breaks.
\n
`pre-wrap`: It preserves white space but allows lines to wrap.
\n
`pre-line`: It collapses white space but preserves line breaks.
\n
\n
\n
p {\n
white-space: nowrap;
\n
}
\n `\n }}>
\n
\n
\n Above example prevents the text in the paragraph from wrapping to the next line.\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/text/transformation\";\n\nexport default function TextTransformation() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"Text Transformation in CSS | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/text/decoration',\n 'next': '/css/text/spacing'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Text Transformation
\n
\n
\n The `text-transform` property in CSS is used to control the capitalization of text. It allows you to convert text to uppercase, lowercase, or capitalize the first letter of each word. This property is particularly useful for styling text without altering the actual content in the HTML. It has a basic syntax -\n
\n
\n
element {\n
text-transform: value;
\n
}
\n `\n }}>
\n
\n
\n Where, value defines how the text will be transformed.\n
\n\n
Values of `text-transform`
\n
\n
\n `none` : If the value is none then no transformation is applied. The text appears exactly as it is written in the HTML.\n
\n
\n `capitalize` : If the value is capitalize then it transforms the first letter of each word in the text to uppercase.\n
\n
\n `uppercase` : If the value is uppercase then it converts all characters in the text to uppercase.\n
\n
\n `lowercase` : If the value is lowercase then it converts all characters in the text to lowercase.\n
\n
\n `full-width` : If the value is full-width then it transforms characters into their full-width form.\n
\n
\n\n
Examples of `text-transform`
\n
\n Here are some examples of `text-transform`.\n
\n
\n
<style>\n
.none {
\n
text-transform: none;
\n
}
\n \n
.capitalize {
\n
text-transform: capitalize;
\n
}
\n \n
.uppercase {
\n
text-transform: uppercase;
\n
}
\n \n
.lowercase {
\n
text-transform: lowercase;
\n
}
\n
</style>
\n
<p class=\"none\"<This is normal text.</p>
\n
<p class=\"capitalize\">this is capitalized text.</p>
\n
<p class=\"uppercase\">this is uppercase text.</p>
\n
<p class=\"lowercase\">THIS IS LOWERCASE TEXT.</p>
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/css/font/web/safe\";\n\nexport default function WebSafeFonts() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"What is Web Safe Fonts in CSS? | A Complete Guide\");\n title.setKeyWords(\"\");\n title.setPageDescription(\"\");\n const urls = {\n 'previous': '/css/font/family',\n 'next': '/css/font/fallbacks'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
Web Safe Fonts
\n
\n
\n Web safe fonts are fonts that are commonly installed across most operating systems and devices, ensuring consistent display of text on web pages. When you use web safe fonts in your CSS, you can be more confident that the text will appear as intended for the vast majority of users, regardless of the platform they are using.\n
\n
Some Key Features of Web Safe Fonts
\n
\n
\n Cross-Platform Availability: Web safe fonts are pre-installed on Windows, macOS, Linux, iOS, Android, and other operating systems, making them universally accessible.\n
\n
\n Consistent Display: Since these fonts are commonly available, the text will look the same (or very similar) across different browsers and devices, providing a consistent user experience.\n
\n
\n Fallback Options: If a web safe font is not available, CSS allows you to specify fallback fonts to ensure text is still displayed appropriately.\n
\n
\n
Common Web Safe Fonts
\n
\n
\n Serif Fonts:\n
\n
Times New Roman
\n
Georgia
\n
Garamond
\n
\n
\n
\n Sans-Serif Fonts:\n
\n
Arial
\n
Helvetica
\n
Verdana
\n
Tahoma
\n
\n
\n
\n Monospace Fonts:\n
\n
Courier New
\n
Lucida Console
\n
Monaco
\n
\n
\n
\n Cursive Fonts:\n
\n
Comic Sans MS
\n
Brush Script MT
\n
\n
\n
\n Fantasy Fonts:\n
\n
Impact
\n
Papyrus
\n
\n
\n
\n\n
Examples of Web Safe Fonts
\n
\n
body {\n
font-family: Arial, Helvetica, sans-serif;
\n
}
\n \n
h1 {
\n
font-family: \"Times New Roman\", Times, serif;
\n
}
\n \n
code {
\n
font-family: \"Courier New\", Courier, monospace;
\n
}
\n `\n }}>
\n
\n\n
Benifits of Web Safe Fonts
\n
\n
Reliability: Ensures that your website’s typography is displayed correctly across various devices and browsers.
\n
Performance: Web safe fonts load faster since they are already installed on the user's device, unlike custom fonts which may require additional loading time.
\n
Fallback Strategy: Even if the primary font isn't available, you can specify alternative fonts to maintain a consistent appearance.
\n
\n
\n \n )\n}","import React from 'react'\nimport * as moment from 'moment'\n\nexport default function Footer() {\n return (\n <>\n
\n Aspirant's Home is an innovative educational and career development platform designed to empower individuals in achieving their academic and professional aspirations. \n Terms of UseAbout UsPrivacy Policy\n
\n The <audio> element in HTML is used to embed audio content on a webpage. Like the <video> element, it allows you to play audio files without relying on third-party plugins. Here's a detailed overview of its features and how to use it.\n
\n
Basic Structure
\n
Here’s a simple example of the <audio> element:
\n
\n
<audio controls>\n
<source src=\"audio.mp3\"type=\"audio/mpeg\">
\n
<source src=\"audio.ogg\"type=\"audio/ogg\">
\n
Your browser does not support the audio tag.
\n
</audio>
\n \n `\n }}>
\n
\n
Here is an output of above example -
\n
\n
\n \n \n Your browser does not support the audio tag.\n \n `\n }}>
\n
\n\n
Key Attributes
\n
\n
src: Specifies the URL of the audio file. This is used in the <source> elements.
\n\n
controls: Adds audio controls, such as play, pause, and volume.
\n\n
autoplay: Automatically starts playing the audio when the page loads. (Note: it may be muted in some browsers.)
\n\n
loop: Causes the audio to repeat indefinitely once it reaches the end.
\n\n
muted: Starts the audio with the sound muted.
\n\n
\n preload: Provides a hint to the browser about whether to load the audio when the page loads. Options include:\n
\n
\"none\": Don’t preload the audio.
\n
\"metadata\": Preload only the metadata (like duration).
\n
\"auto\": Preload the whole audio file.
\n
\n
\n
\n\n
Source Elements
\n
You can include multiple <source> elements to provide different audio formats. This helps ensure compatibility across various browsers, as different browsers may support different audio formats.
\n\n\n
Fallback Content
\n
If the browser doesn’t support the <audio> element, any content between the opening and closing <audio> tags (like the message \"Your browser does not support the audio tag.\") will be displayed.
\n\n\n
Example with Attributes
\n
Here’s a more detailed example with various attributes:
\n \n \n Your browser does not support the audio tag.\n \n `\n }}>
\n
\n
The <audio> element provides an easy and effective way to add audio content to your web pages. With its built-in controls and support for various formats, it enhances user engagement without the need for external plugins.
\n The <canvas> element in HTML is a powerful feature that allows you to draw graphics on the fly using JavaScript. It provides a bitmap-based drawing surface for rendering 2D shapes, images, and animations. The <canvas> element is particularly useful for game graphics, data visualization, and dynamic graphics. Here’s a detailed overview:\n
\n\n
Basic Structure
\n
To use the <canvas> element, you need to define it in your HTML:
requestAnimationFrame(draw); // Call draw again for animation
\n
}
\n \n
draw(); // Start the animation
\n
</script>
\n `\n }}>
\n
\n\n
The <canvas> element in HTML is a powerful tool for drawing and animating graphics directly in the browser using JavaScript. It is highly flexible, allowing for the creation of various visual content, including shapes, text, and images, making it ideal for applications like games, interactive visualizations, and custom graphics.
\n The Drag and Drop API in HTML provides a way to create interactive elements that can be dragged and dropped on a web page. It uses JavaScript and a set of events that are triggered during a drag-and-drop interaction. Here’s a clear step-by-step explanation of how it works and how to implement it.\n
\n\n
Make an Element Draggable
\n
To make an element draggable, set the draggable attribute to true:
\n
\n
<img draggable=\"true\">\n `\n }}>
\n
\n\n
What to Drag - ondragstart and setData()
\n
Then, specify what should happen when the element is dragged.
\n\n
In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.
\n\n
The dataTransfer.setData() method sets the data type and the value of the dragged data:
\n
\n
functiondrag(ev) {\n
ev.dataTransfer.setData(\"text\", ev.target.id);
\n
}
\n `\n }}>
\n
\n\n
In this case, the data type is \"text\" and the value is the id of the draggable element (\"drag1\").
\n\n\n
Where to Drop - ondragover
\n
The ondragover event specifies where the dragged data can be dropped.
\n\n
By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
\n\n
This is done by calling the event.preventDefault() method for the ondragover event:
\n
\n
event.preventDefault()\n `\n }}>
\n
\n\n\n
Do the Drop - ondrop
\n
When the dragged data is dropped, a drop event occurs.
\n\n
In the example above, the ondrop attribute calls a function, drop(event):
\n Embedding multimedia in HTML allows you to incorporate various types of media—such as audio, video, images, and interactive content—directly into web pages. This enhances user experience by providing rich content without requiring users to navigate away from the page.\n
\n
\n Here’s a breakdown of how to embed different types of multimedia in HTML:\n
\n\n
\n
\n
Images
\n
To embed images, you can use the <img> tag.
\n
\n
<img src=\"image.jpg\"alt=\"Description of image\"width=\"500\"height=\"300\">\n `\n }}>
\n
\n
Where,
\n
\n
src: Specifies the path to the image file.
\n
alt: Provides alternative text for the image if it cannot be displayed.
\n
width and height: Set the dimensions of the image.
<p>Your browser does not support the object tag.</p>
\n
</object>
\n `\n }}>
\n
\n
Where,
\n
\n
data: Specifies the URL of the file to embed.
\n
type: Indicates the MIME type of the content.
\n
\n
\n
\n
SVG (Scalable Vector Graphics)
\n
You can embed SVG images directly in HTML.
\n
\n
<svg width=\"100\"height=\"100\">\n
<circle cx=\"50\"cy=\"50\"r=\"40\"fill=\"red\" />
\n
</svg>
\n `\n }}>
\n
\n
\n
\n\n
Embedding multimedia in HTML enhances the visual and auditory experience of a webpage. Using the appropriate tags and attributes allows developers to control how content is presented and interacted with, making web pages more engaging and informative.
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onblur\";\n\nexport default function Onblur() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onblur Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onblur Event
\n
\n
\n The onblur event in HTML is triggered when an element loses focus. It’s commonly used with form fields (like <input>, <textarea>, <select>, etc.) to validate input, hide help text, or perform an action after a user has finished interacting with the element.\n
\n\n
Basic Syntax
\n
To use onblur, add it as an attribute to an HTML element, with JavaScript code or a function to execute when the element loses focus.
\n
\n
<input type=\"text\"onblur=\"alert('Input field lost focus')\"placeholder=\"Click here\">\n `\n }}>
\n
\n
In this example, An alert appears when the input field loses focus.
\n\n\n
Example: Basic Input Validation with onblur
\n
You can use onblur to validate a form field as soon as it loses focus.
The validateUsername function checks if the \"username\" field is empty when it loses focus.
\n
If empty, it displays an error message; otherwise, the message remains hidden.
\n
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onchange\";\n\nexport default function Onchange() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onchange Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onchange Event
\n
\n
\n The onchange event in HTML is triggered when the value of an element is changed and the focus is moved away (or the user presses \"Enter\" in some cases). It’s commonly used with form elements like <input>, <select>, <textarea>, and <input type=\"checkbox\">. This event is helpful for validating or processing data only after the user finishes making changes, rather than during every keystroke.\n
\n\n
Basic Syntax
\n
To use onchange, add it as an attribute to an HTML element, along with JavaScript code or a function to execute when the element’s value changes.
In this example, The showSelectedFruit function updates a <p> element with the selected fruit when the dropdown changes.
\n\n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onclick\";\n\nexport default function Onclick() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onclick Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onclick Event
\n
\n
\n The onclick event in HTML is an attribute used to execute JavaScript code when an HTML element is clicked. This event can be added to various elements, such as buttons, links, images, or even divs, allowing for interactivity in a webpage. For instance, it can be used to display an alert, call a function, toggle content visibility, or perform any other JavaScript action upon clicking.\n
\n\n
Basic Syntax
\n
To use onclick, add the attribute to an HTML element and specify the JavaScript code or function you want to run when the element is clicked.
In this example, when the button is clicked, an alert box with the message \"Button clicked!\" appears.
\n\n\n
Usage of onclick with JavaScript Functions
\n
It’s often better to call a JavaScript function in the onclick attribute instead of writing the entire code directly inside it, especially if the code is complex.
\n\n
Example: Calling a Function on Click
\n
Define a function in JavaScript, then call it using onclick.
\n
\n
<!DOCTYPEhtml>\n
<html lang=\"en\">
\n
<head>
\n
<meta charset=\"UTF-8\">
\n
<title>onclick Example</title>
\n
<script>
\n
functionshowMessage() {
\n
alert(\"Hello, this message is from a function!\");
<div id=\"content\">This is the content to show or hide.</div>
\n \n
</body>
\n
</html>
\n `\n }}>
\n
\n
Here, clicking the button toggles the display style of the #content div between \"block\" and \"none\", making it appear and disappear.
\n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/oncopy\";\n\nexport default function Oncopy() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - oncopy Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - oncopy Event
\n
\n
\n The oncopy event in HTML is triggered when a user copies content from a webpage, typically using keyboard shortcuts (like Ctrl+C) or right-clicking and selecting \"Copy.\" This event can be used to display a message, track content copying, or modify the copied content.\n
\n\n
Basic Syntax
\n
The oncopy event can be attached to an HTML element that contains the text or content users may want to copy.
\n
\n
<p oncopy=\"handleCopy()\">This is some copyable text.</p>\n `\n }}>
\n
\n
Alternatively, it can be attached using JavaScript:
This example displays a message in the console when the text is copied.
\n
\n
<p oncopy=\"showCopyMessage()\">Copy this text!</p>\n \n
<script>
\n
functionshowCopyMessage() {
\n
console.log(\"Content has been copied!\");
\n
}
\n
</script>
\n `\n }}>
\n
\n
In this example, The showCopyMessage function is triggered when the text is copied, logging a message to the console.
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/oncut\";\n\nexport default function Oncut() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - oncut Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - oncut Event
\n
\n
\n The oncut event in HTML is triggered when a user cuts content from an element, typically using keyboard shortcuts (like Ctrl+X) or right-clicking and selecting \"Cut.\" This event can be used to track cut actions, display messages, or modify the content that gets cut.\n
\n\n
Basic Syntax
\n
The oncut event can be added to an HTML element where users might cut content.
\n
\n
<p oncut=\"handleCut()\">This is some cuttable text.</p>\n `\n }}>
\n
\n
Alternatively, you can attach it using JavaScript:
This example displays a message in the console when text is cut.
\n
\n
<p oncut=\"showCutMessage()\">Try cutting this text!</p>\n \n
<script>
\n
functionshowCutMessage() {
\n
console.log(\"Content has been cut!\");
\n
}
\n
</script>
\n `\n }}>
\n
\n
Here, The showCutMessage function is triggered when the text is cut, logging a message to the console.
\n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/ondblclick\";\n\nexport default function Ondblclick() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - ondblclick Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - ondblclick Event
\n
\n
\n The ondblclick event in HTML is used to trigger JavaScript code when an HTML element is double-clicked. This event allows for actions to be taken only after a quick, consecutive double-click on an element, often providing a secondary interaction option. For example, you can use ondblclick to edit text, zoom in on an image, or perform other custom actions.\n
\n\n
Basic Syntax
\n
To use ondblclick, add it as an attribute to an HTML element and specify the JavaScript code or function you want to run when the element is double-clicked.
In this example, when the button is double-clicked, an alert box displays the message \"Button double-clicked!\"
\n\n
Example: Using ondblclick with JavaScript Functions
\n
It’s often better to call a separate JavaScript function from the ondblclick attribute, which keeps the HTML cleaner and allows for more complex logic.
\n\n
Example: Calling a Function on Double-Click
\n
Define a JavaScript function, then call it with ondblclick.
\n
\n
<!DOCTYPEhtml>\n
<html lang=\"en\">
\n
<head>
\n
<meta charset=\"UTF-8\">
\n
<title>ondblclick Example</title>
\n
<script>
\n
functionshowDoubleClickMessage() {
\n
alert(\"You double-clicked this element!\");
\n
}
\n
</script>
\n
</head>
\n
<body>
\n \n
<div ondblclick=\"showDoubleClickMessage()\">Double-click this text</div>
\n \n
</body>
\n
</html>
\n `\n }}>
\n
\n
Here, when the text inside the div is double-clicked, the showDoubleClickMessage() function runs, showing an alert.
\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/ondrag\";\n\nexport default function Ondrag() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - ondrag Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - ondrag Event
\n
\n
\n The ondrag event in HTML is triggered when an element is being dragged. It fires repeatedly as the user moves the element, while dragging it over the page. This event is part of the Drag and Drop API and is used to provide real-time feedback during the drag operation.\n
\n\n
Basic Syntax
\n
The ondrag event can be added directly to an element that is draggable:
Here, The showDragMessage function is called while the element is being dragged, and it logs the message \"The element is being dragged.\" to the console.
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/ondragover\";\n\nexport default function Ondragover() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - ondragover Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - ondragover Event
\n
\n
\n The ondragover event in HTML is triggered when an element or its descendants are being dragged over a valid drop target. This event is essential in the Drag and Drop API, as it allows the browser to recognize that the element being dragged can be dropped onto the target element. The ondragover event does not occur until the browser is explicitly told that the drop is allowed, usually by calling event.preventDefault() within the event handler.\n
\n\n
Basic Syntax
\n
You can use the ondragover event in the HTML element that you want to act as the drop target:
Here, changeAppearance(event) function changes the background color of the drop target to indicate that the element can be dropped there. The background reverts after the drop.
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/ondrop\";\n\nexport default function Ondrop() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - ondrop Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - ondrop Event
\n
\n
\n The ondrop event in HTML is triggered when an element is dropped onto a valid drop target. This event is part of the Drag and Drop API and occurs when a user completes a drag-and-drop action. It usually works in conjunction with the ondrag and ondragover events.\n
\n\n
Basic Syntax
\n
The ondrop event is added to an element that is designated as a drop target. Typically, this is an element where you can drop another element that has been dragged.
allowDrop(event): This function is necessary to allow an element to be dropped into the target. By default, browsers prevent dropping elements into unknown targets.
\n
dropElement(event): This function is triggered when the element is dropped. It changes the content of the drop target to display \"Element Dropped!\" and logs a message to the console.
\n
dragStart(event): This function sets the dragged element's ID to be transferred during the drag.
\n
\n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onended\";\n\nexport default function Onended() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onended Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onended Event
\n
\n
\n The onended event in HTML is triggered when the playback of a media element (such as <audio> or <video>) has finished. This event occurs when the media has played through to the end, meaning it has reached the end of the file or the specified end time.\n
\n \n
Basic Syntax
\n
The onended event can be added directly to an <audio> or <video> element:
\n
\n
<video onended=\"handleEnd()\">Your browser does not support the video tag.</video>\n `\n }}>
\n
\n
Alternatively, it can be attached using JavaScript:
Example: Display a Message When Media Playback Ends
\n
This example logs a message in the console when a video ends.
\n
\n
<video onended=\"showEndMessage()\"controls>\n
<source src=\"video.mp4\"type=\"video/mp4\">
\n
Your browser does not support the video tag.
\n
</video>
\n \n
<script>
\n
functionshowEndMessage() {
\n
console.log(\"The video has ended.\");
\n
}
\n
</script>
\n `\n }}>
\n
\n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onfocus\";\n\nexport default function Onfocus() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onfocus Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onfocus Event
\n
\n
\n The onfocus event in HTML triggers when an element gains focus, meaning it's clicked on, tabbed into, or otherwise activated. It’s most commonly used with form elements such as <input>, <textarea>, and <select>, allowing developers to provide a visual cue, perform actions, or validate data as soon as the element is focused.\n
\n\n
Basic Syntax
\n
To use onfocus, add it as an attribute to an HTML element with JavaScript code or a function to execute when the element receives focus.
\n
\n
<input type=\"text\"onfocus=\"alert('Input field is focused')\"placeholder=\"Click here\">\n `\n }}>
\n
\n
In this example, An alert is shown when the input field gains focus.
\n\n\n
Example: Highlighting Input Field on Focus
\n
You can use onfocus to change the background color of an input field when it's focused, giving users a visual cue.
element.style.backgroundColor = \"#e0f7fa\"; // Light blue background on focus
\n
}
\n
</script>
\n `\n }}>
\n
\n
In this example, The highlight function changes the background color when the input field is focused.
\n
Output will be the following -
\n
\n
\n\n `\n }}>
\n
\n \n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/oninput\";\n\nexport default function Oninput() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - oninput Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - oninput Event
\n
\n
\n The oninput event in HTML is triggered whenever the value of an element changes, such as when the user types in a text field, changes a slider position, or updates a textarea. Unlike the onchange event, oninput fires immediately with each change, making it ideal for real-time feedback.\n
\n\n
Basic Syntax
\n
To use oninput, add it as an attribute to an HTML element, with JavaScript code or a function to run every time the element’s value changes.
In this example, The countCharacters function updates the character count in real-time as the user types.
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onkeydown\";\n\nexport default function Onkeydown() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onkeydown Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onkeydown Event
\n
\n
\n The onkeydown event in HTML is triggered when a user presses down on a key on the keyboard. This event is typically used to detect when a specific key is pressed, enabling features like keyboard shortcuts, form navigation, real-time character validation, or initiating actions through keyboard interaction. The onkeydown event can capture most keys, including letters, numbers, function keys, and even special keys like \"Shift,\" \"Enter,\" and \"Control.\"\n
\n\n
Basic Syntax
\n
To use onkeydown, add it as an attribute to an HTML element and specify JavaScript code or a function that should run whenever a key is pressed down within that element.
Every time a key is pressed down while typing in the input field, an alert is displayed.
\n\n\n
Example: Detecting Specific Key Presses
\n
\n You can use onkeydown to check which specific key was pressed by accessing the event.key property. This is useful for creating keyboard shortcuts or triggering actions based on specific keys.\n
if (isNaN(event.key) && event.key !== \"Backspace\") {
\n
event.preventDefault(); // Prevents typing of non-numeric characters
\n
}
\n
}
\n
</script>
\n `\n }}>
\n
\n
The allowNumbersOnly function prevents typing any non-numeric characters (except \"Backspace\") by calling event.preventDefault() for those keys.
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onkeypress\";\n\nexport default function Onkeypress() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onkeypress Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onkeypress Event
\n
\n
\n The onkeypress event in HTML is triggered when a user presses a key that produces a character value (like letters, numbers, and symbols). This event is commonly used to detect character input, apply filters (such as allowing only letters or numbers), or capture key input for custom functionality. However, it’s worth noting that onkeypress doesn’t detect non-character keys, like \"Shift,\" \"Ctrl,\" or \"Arrow\" keys, and it's now largely superseded by the onkeydown event, which captures all key types.\n
\n\n
Basic Syntax
\n
To use onkeypress, add it as an attribute to an HTML element and specify JavaScript code or a function to run when a keypress is detected.
\n
\n
<input type=\"text\"onkeypress=\"alert('A key was pressed!')\"placeholder=\"Type here\">\n `\n }}>
\n
\n
Whenever a key that produces a character (e.g., letters or numbers) is pressed within the input field, an alert appears.
\n\n\n
Example: Allowing Only Alphabet Characters
\n
You can use onkeypress to filter input, allowing only alphabet characters.
The allowOnlyLetters function restricts input to uppercase and lowercase English letters by using ASCII ranges (65–90 for uppercase, 97–122 for lowercase).
\n\n\n
Example: Limiting Input Length
\n
Using onkeypress, you can limit the maximum number of characters a user can enter in an input field.
The limitInputLength function restricts the input length to 10 characters by calling event.preventDefault() if the length exceeds maxLength.
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onkeyup\";\n\nexport default function Onkeyup() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onkeyup Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onkeyup Event
\n
\n
\n The onkeyup event in HTML is triggered when a user releases a key on the keyboard. This event is useful for detecting input changes in real time, validating or formatting data as the user types, and enabling keyboard shortcuts. Unlike onkeypress, onkeyup captures both character and non-character keys, including \"Shift,\" \"Enter,\" and arrow keys.\n
\n\n
Basic Syntax
\n
To use onkeyup, add it as an attribute to an HTML element and specify JavaScript code or a function that should run when a key is released.
The updateCharacterCount function updates the displayed character count each time the user releases a key in the textarea.
\n
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onload\";\n\nexport default function Onload() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onload Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onload Event
\n
\n
\n The onload event in HTML is triggered when a web page or an element (like an image, iframe, or script) has fully loaded. This event is often used to initialize scripts or functions, preload images, or fetch data from a server once all elements are loaded.\n
\n\n
Basic Syntax
\n
To use onload, add it as an attribute to the <body> tag (for the entire page) or other elements like <img> or <iframe>.
\n
\n
<body onload=\"init()\">\n `\n }}>
\n
\n
In this example, the init() function will run when the page fully loads.
\n\n
Example: Page Load Greeting
\n
Using onload, you can display a greeting or initiate a welcome action once the page loads.
\n
\n
<body onload=\"displayGreeting()\">\n
<h1>Welcome to My Website</h1>
\n
<p id=\"greeting\"></p>
\n \n
<script>
\n
functiondisplayGreeting() {
\n
document.getElementById(\"greeting\").textContent = \"Hello! Thanks for visiting.\";
\n
}
\n
</script>
\n
</body>
\n `\n }}>
\n
\n
In this example, The displayGreeting function updates the <p> element with a welcome message when the page loads.
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onmousedown\";\n\nexport default function Onmousedown() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onmousedown Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onmousedown Event
\n
\n
\n The onmousedown event in HTML is triggered when a user presses down any mouse button on an HTML element. This event fires at the moment the mouse button is pressed, allowing you to define actions that should occur as soon as the button is clicked, even if the button isn't yet released. This event is often used for interactive elements to initiate actions, show tooltips, start animations, or detect specific button clicks.\n
\n\n
Basic Syntax
\n
To use onmousedown, add it as an attribute to an HTML element, specifying the JavaScript code or function to execute when the mouse button is pressed down.
\n
\n
<button onmousedown=\"alert('Mouse button is pressed!')\">Press Mouse Here</button>\n `\n }}>
\n
\n
In this example, when a mouse button is pressed on the button, an alert box displays \"Mouse button is pressed!\" immediately.
\n\n
Mouse Button Detection with onmousedown
\n
Using event.button, you can determine which mouse button was pressed:
\n
\n
0: Left button
\n
1: Middle button (usually the scroll wheel button)
\n
2: Right button
\n
\n\n
Example: Detecting Which Mouse Button Was Pressed
\n
\n
<!DOCTYPEhtml>\n
<html lang=\"en\">
\n
<head>
\n
<meta charset=\"UTF-8\">
\n
<title>onmousedown Example</title>
\n
<script>
\n
functiondetectMouseButton(event) {
\n
if (event.button === 0) {
\n
alert(\"Left mouse button pressed\");
\n
} else if (event.button === 1) {
\n
alert(\"Middle mouse button pressed\");
\n
} else if (event.button === 2) {
\n
alert(\"Right mouse button pressed\");
\n
}
\n
}
\n
</script>
\n
</head>
\n
<body>
\n \n
<div onmousedown=\"detectMouseButton(event)\">Click any mouse button on this text</div>
\n \n
</body>
\n
</html>
\n `\n }}>
\n
\n
When the mouse is pressed down on the div, the detectMouseButton function runs, identifying the button that was pressed.
\n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onmousemove\";\n\nexport default function Onmousemove() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onmousemove Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onmousemove Event
\n
\n
\n The onmousemove event in HTML is triggered when the mouse pointer moves within an HTML element. This event fires continuously as the pointer moves, making it useful for interactive features like real-time animations, tracking the cursor's position, updating UI elements based on pointer position, or displaying custom cursors and tooltips that follow the pointer.\n
\n\n
Basic Syntax
\n
To use onmousemove, add it as an attribute to an HTML element and specify JavaScript code or a function that should run whenever the mouse moves over that element.
\n
\n
<div onmousemove=\"alert('Mouse is moving!')\">Move your mouse over this area</div>\n `\n }}>
\n
\n
In this example, whenever the mouse pointer moves within the div, an alert is triggered. However, frequent alerts can be intrusive, so this event is usually best suited for updating elements rather than triggering pop-ups.
\n\n\n
Example: Displaying Mouse Coordinates
\n
You can use onmousemove to capture and display the coordinates of the mouse pointer as it moves within an element.
As the mouse moves within the div, showCoordinates updates the coordinates (relative to the viewport) in the <p> element with id=\"coordinates\".
\n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onmouseout\";\n\nexport default function Onmouseout() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onmouseout Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onmouseout Event
\n
\n
\n The onmouseout event in HTML is triggered when the mouse pointer leaves an HTML element. This event is often used to reverse or hide changes made when the mouse entered the element (typically with onmouseover). It can help you create interactive effects like hiding tooltips, removing highlights, or stopping animations when the mouse moves away from an element.\n
\n\n
Basic Syntax
\n
To use onmouseout, add it as an attribute to an HTML element and specify the JavaScript code or function that should execute when the mouse leaves the element.
\n
\n
<p onmouseout=\"alert('Mouse left this text!')\"\n >Hover over and then move away from this text</p>\n `\n }}>
\n
\n
In this example, when the user hovers over the paragraph and then moves the mouse away, an alert appears saying \"Mouse left this text!\"
\n\n
Example: Reverting Styles with onmouseout
\n
onmouseout is commonly used to reverse style changes made with onmouseover, providing a dynamic and interactive effect.
\n Hover over me to change my style, then move away to revert it\n
\n `\n }}>
\n
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onmouseover\";\n\nexport default function Onmouseover() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onmouseover Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onmouseover Event
\n
\n
\n The onmouseover event in HTML is triggered when a user moves the mouse pointer over an HTML element. This event is useful for creating interactive effects, such as displaying tooltips, highlighting elements, showing additional content, or starting animations when a user hovers over an element.\n
\n\n
Basic Syntax
\n
To use onmouseover, add it as an attribute to an HTML element and specify the JavaScript code or function that should execute when the mouse pointer hovers over that element.
\n
\n
<p onmouseover=\"alert('Mouse is over this text!')\">Hover over this text</p>\n `\n }}>
\n
\n
In this example, when the user hovers over the paragraph, an alert message displays \"Mouse is over this text!\"
\n\n\n
Example: Changing Styles with onmouseover
\n
onmouseover is commonly used to change an element’s style, providing visual feedback when the user hovers over it.
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onmouseup\";\n\nexport default function Onmouseup() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onmouseup Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onmouseup Event
\n
\n
\n The onmouseup event in HTML is triggered when the user releases a mouse button over an HTML element. This event fires when the mouse button is released, making it useful for completing actions started with the onmousedown event, toggling styles, stopping animations, or triggering specific actions after the mouse button is let go.\n
\n\n
Basic Syntax
\n
To use onmouseup, add it as an attribute to an HTML element, specifying the JavaScript code or function to execute when the mouse button is released.
In this example, when a mouse button is released over the button, an alert box shows \"Mouse button released!\"
\n
Output will be the following -
\n
\n
Release Mouse Here\n `\n }}>
\n
\n\n
The onmouseup event is triggered when a mouse button is released over an element, ideal for completing interactions started on onmousedown.
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onpaste\";\n\nexport default function Onpaste() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onpaste Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onpaste Event
\n
\n
\n The onpaste event in HTML triggers when a user pastes content into an element. This event is commonly used in input fields or editable elements to monitor, validate, or modify pasted content.\n
\n\n
Basic Syntax
\n
The onpaste event can be added directly to an HTML element, like an <input> or <textarea>.
Here, The showPasteMessage function logs a message when content is pasted into the input field.
\n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onpause\";\n\nexport default function Onpause() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onpause Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onpause Event
\n
\n
\n The onpause event in HTML is triggered when a media element (like <audio> or <video>) is paused. This event occurs when the pause() method is called or when the user manually pauses the media (e.g., using the pause button on the media player controls).\n
\n\n
Basic Syntax
\n
The onpause event can be added directly to a media element:
\n
\n
<video onpause=\"handlePause()\">Your browser does not support the video tag.</video>\n `\n }}>
\n
\n
Alternatively, it can be attached using JavaScript:
Example: Display a Message When Playback is Paused
\n
This example logs a message in the console when a video is paused.
\n
\n
<video onpause=\"showPauseMessage()\"controls>\n
<source src=\"video.mp4\"type=\"video/mp4\">
\n
Your browser does not support the video tag.
\n
</video>
\n \n
<script>
\n
functionshowPauseMessage() {
\n
console.log(\"The video has been paused.\");
\n
}
\n
</script>
\n `\n }}>
\n
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onplay\";\n\nexport default function Onplay() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onplay Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onplay Event
\n
\n
\n The onplay event in HTML is triggered when a media element (such as <audio> or <video>) starts playing. This event occurs when the play() method is called, or when the user interacts with the media controls to start the playback.\n
\n \n
Basic Syntax
\n
The onplay event can be added directly to the <audio> or <video> tag:
\n
\n
<video onplay=\"handlePlay()\">Your browser does not support the video tag.</video>\n `\n }}>
\n
\n
Alternatively, it can be attached using JavaScript:
This example logs a message in the console when a video starts playing.
\n
\n
<video onplay=\"showPlayMessage()\"controls>\n
<source src=\"video.mp4\"type=\"video/mp4\">
\n
Your browser does not support the video tag.
\n
</video>
\n \n
<script>
\n
functionshowPlayMessage() {
\n
console.log(\"The video has started playing!\");
\n
}
\n
</script>
\n `\n }}>
\n
\n
Here, The showPlayMessage function is triggered when the video starts playing, logging the message \"The video has started playing!\" to the console.
\n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onresize\";\n\nexport default function Onresize() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onresize Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onresize Event
\n
\n
\n The onresize event in HTML is triggered when the browser window or an element is resized. This event is commonly used to adjust layouts, scale elements, or change other properties dynamically based on the new window size, making it essential for responsive web design.\n
\n\n
Basic Syntax
\n
The onresize event is typically used on the <body> or window object to monitor the resizing of the browser window.
\n
\n
<body onresize=\"resizeHandler()\">\n `\n }}>
\n
\n
However, it is more common to attach onresize using JavaScript on the window object:
\n
\n
window.onresize = function() {\n
console.log(\"Window resized!\");
\n
};
\n `\n }}>
\n
\n\n\n
Example: Display Window Size on Resize
\n
This example shows how you can display the window’s width and height every time it is resized.
In this example, The displaySize function updates the window dimensions in the paragraph element whenever the window is resized.
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onscroll\";\n\nexport default function Onscroll() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onscroll Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onscroll Event
\n
\n
\n The onscroll event in HTML triggers whenever an element or the entire page is scrolled. This event is commonly used to implement features like sticky headers, infinite scrolling, or animations based on the scroll position.\n
\n\n
Basic Syntax
\n
The onscroll event is typically added directly to the <body> tag or any scrollable element.
\n
\n
<body onscroll=\"handleScroll()\">\n `\n }}>
\n
\n
Or, you can attach it using JavaScript:
\n
\n
window.onscroll = function() {\n
console.log(\"Page scrolled!\");
\n
};
\n `\n }}>
\n
\n\n
Example: Display Scroll Position
\n
This example shows how to display the scroll position of the page.
\n
\n
<body onscroll=\"displayScrollPosition()\">\n
<div style=\"height: 1500px; padding: 10px;\">
\n
<p id=\"scrollPosition\">Scroll position: 0</p>
\n
</div>
\n \n
<script>
\n
functiondisplayScrollPosition() {
\n
const scrollPos = window.scrollY; // Vertical scroll position
Here, The displayScrollPosition function updates the scroll position as the user scrolls down the page.
\n\n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onsubmit\";\n\nexport default function Onsubmit() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onsubmit Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onsubmit Event
\n
\n
\n The onsubmit event in HTML triggers when a form is submitted. This event is used to execute JavaScript code when the user submits a form, which is especially useful for client-side form validation, preventing submission under certain conditions, or modifying the submitted data before it’s sent to the server.\n
\n\n
Basic Syntax
\n
To use onsubmit, add it as an attribute to a <form> element, with JavaScript code or a function to run when the form is submitted.
\n
\n
<form onsubmit=\"return validateForm()\">\n
<input type=\"text\"name=\"username\"required>
\n
<button type=\"submit\">Submit</button>
\n
</form>
\n `\n }}>
\n
\n
In this example,
\n
\n
The onsubmit attribute triggers the validateForm function when the form is submitted.
\n
The return statement allows the function to control submission: if validateForm() returns false, the form will not submit.
\n
\n\n
Example: Preventing Default Submission
\n
You can use onsubmit to prevent default form submission, which is helpful when submitting data via AJAX without reloading the page.
alert(\"Submitting \" + username + \" via AJAX\");
\n
// AJAX code here to submit the form data
\n
}
\n
</script>
\n `\n }}>
\n
\n
In this example -
\n
\n
event.preventDefault() stops the form from reloading the page on submit.
\n
You could then use AJAX to send form data without page reload.
\n
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/ontouchend\";\n\nexport default function Ontouchend() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - ontouchend Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - ontouchend Event
\n
\n
\n The ontouchend event in HTML is triggered when a touch point (such as a finger or stylus) is removed from a touch-enabled device's screen. This event is part of the Touch Events API, which is used primarily for handling touch interactions on mobile and tablet devices.\n
\n
\n The ontouchend event typically indicates the end of a touch gesture and can be used to finalize actions like dragging, drawing, or completing a tap.\n
\n\n\n
Basic Syntax
\n
You can use the ontouchend event directly in HTML, like this:
This example demonstrates how the ontouchend event is used to detect when a user lifts their finger from the screen, and changes the background color of the element.
The ontouchend event is used to detect when a touch point is removed. It works well for actions like completing a drag, tapping, or ending a gesture.
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/ontouchmove\";\n\nexport default function Ontouchmove() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - ontouchmove Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - ontouchmove Event
\n
\n
\n The ontouchmove event in HTML is triggered when a touch point (such as a finger or stylus) is moved across the screen while it is still in contact with a touch-enabled element. This event is part of the Touch Events API and is typically used in mobile and tablet applications to track the movement of a user's touch gesture.\n
\n\n
Basic Syntax
\n
You can use the ontouchmove event directly in HTML, like this:
The ontouchmove event allows you to track multiple touch points, so you can monitor the movement of more than one finger at a time. You can access all active touch points using the event.touches array.
\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/ontouchstart\";\n\nexport default function Ontouchstart() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - ontouchstart Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - ontouchstart Event
\n
\n
\n The ontouchstart event in HTML is triggered when a touch point (such as a finger) is placed on an element, typically used for mobile and tablet devices that support touch events. This event is part of the Touch Events API and allows web developers to detect when a user first touches an element on the screen.\n
\n\n
Basic Syntax
\n
You can use the ontouchstart event in an HTML element like this:
ontouchstart: When the user touches the element (in this case, the div with the ID touchArea), the event handler handleTouchStart(event) is triggered.
\n
event.preventDefault(): This prevents the default touch behavior (e.g., scrolling or zooming) when touching the element.
\n
\n\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onunload\";\n\nexport default function Onunload() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onunload Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onunload Event
\n
\n
\n The onunload event in HTML is triggered when a user leaves a webpage, either by closing the browser tab or window, navigating to a different page, or refreshing the page. This event can be used to perform cleanup actions, save data, or alert users before they leave.\n
\n\n
Basic Syntax
\n
To use onunload, add it as an attribute to the <body> tag to run JavaScript code when the page unloads.
\n
\n
<body onunload=\"alert('You are leaving the page')\">\n `\n }}>
\n
\n
In this example, The alert message appears when the user attempts to leave the page.
\n\n\n
Example: Save User Progress
\n
You can use onunload to save user data, such as form inputs, to localStorage when the page unloads. This lets users continue where they left off if they return to the page later.
\n
\n
<body onunload=\"saveProgress()\">\n
<h1>Save Progress Example</h1>
\n
<label for=\"notes\">Notes:</label>
\n
<textarea id=\"notes\"placeholder=\"Type your notes here...\"></textarea>
The saveProgress function saves the content of the textarea to localStorage when the page unloads.
\n
When the page loads, the previous notes are restored from localStorage.
\n
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/events/onvolumechange\";\n\nexport default function Onvolumechange() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - onvolumechange Event | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - onvolumechange Event
\n
\n
\n The onvolumechange event in HTML is triggered when the volume of a media element (such as <audio> or <video>) is changed. This event occurs when the user interacts with the volume control or when the volume is programmatically adjusted using JavaScript.\n
\n\n
Basic Syntax
\n
The onvolumechange event can be added directly to an <audio> or <video> element:
\n
\n
<video onvolumechange=\"handleVolumeChange()\">Your browser does not support the video tag.</video>\n `\n }}>
\n
\n
Alternatively, it can be attached using JavaScript:
\n Geolocation in HTML refers to the ability of web applications to determine a user's geographical location through their device's GPS, IP address, or other location services. The Geolocation API provides a simple and standardized way to access this information in web browsers, enabling features such as location-based services and applications. Here’s a detailed overview of how it works:\n
\n
How Geolocation Works
\n
\n The Geolocation API allows web developers to request the geographical location of a user's device. The user's permission is required before the location can be accessed. The API provides methods to retrieve the location, handle errors, and watch for changes in the user's location.\n
\n
Basic Usage
\n
To use the Geolocation API, you typically follow these steps:
\n
\n
Check for Support: Ensure the user's browser supports the Geolocation API.
\n
Request Location: Use the getCurrentPosition() method to get the current location.
\n
Handle the Result: Process the location data returned by the API.
\n
Handle Errors: Implement error handling to manage cases where location access is denied or unavailable.
\n
\n\n
Here’s a simple example demonstrating how to use the Geolocation API:
Check for Support: The script checks if the Geolocation API is available in the user's browser using \"geolocation\" in navigator.
\n\n
Request Location: The getCurrentPosition() method is called to request the user's current location. It takes two callback functions: one for success and one for error handling.
\n\n
Success Callback: In the success() function, the latitude and longitude are retrieved from the position.coords object, and then displayed on the page.
\n\n
Error Callback: The error() function handles various error cases, such as permission denial or timeout, providing appropriate feedback to the user.
\n
\n\n
Watching for Location Changes
\n
You can also monitor changes in the user's location using the watchPosition() method:
The Geolocation API is a powerful tool for web developers, allowing the creation of location-aware applications and services. By leveraging this API, you can enhance user experience with features like maps, location tracking, and personalized content based on the user’s geographical location.
\n HTML attributes provide additional information about HTML elements. They are used to modify the default behavior or appearance of elements and are included within the opening tag. Attributes come in name/value pairs, where the name is the attribute and the value provides specific information.\n
\n
Structure of HTML Attributes
\n
An attribute is included within an opening tag and consists of:
\n
\n
Name: The attribute name (e.g., `href`, `src`, `class`).
\n
Value: The attribute value (e.g., `https://example.com`, `image.jpg`, `myClass`), enclosed in quotes.
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\nexport const pageUrl = () => \"/html/basic-tags/body\";\n\nexport default function HTMLBasicBODYTags() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - Basic Tags | Aspirant's Home\");\n path.setPreviousNext({});\n }, [])\n\n return (\n <>\n \n \n path.setPathName('/html/basic-tags')} className='btn btn-primary'> Back to Basic Tags \n \n \n \n
HTML - <body> Basic tags
\n
\n
\n The `<body>` tag in an HTML document is a container for all the content that is displayed on the web page. This includes text, images, videos, links, forms, and any other elements that make up the visual and interactive aspects of the page.\n
\n
Purpose of the `<body>` Tag
\n
\n
\n Content Container: The `<body>` tag contains all the content that is visible to users on the web page.\n
\n
\n Structure and Layout: It helps organize the structure and layout of the web page by holding various HTML elements and components.\n
\n
\n Interactivity: The `<body>` tag can include interactive elements like forms, buttons, and scripts that enhance user interaction.\n
\n
\n
Syntax of the `<body>` Tag
\n
\n The `<body>` tag is placed right after the closing `</head>` tag and it is closed before the closing `</html>` tag.\n
\n \n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\nexport const pageUrl = () => \"/html/basic-tags/head\";\n\nexport default function HTMLBasicHEADTags() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - Basic Tags | Aspirant's Home\");\n path.setPreviousNext({});\n }, [])\n\n return (\n <>\n \n \n path.setPathName('/html/basic-tags')} className='btn btn-primary'> Back to Basic Tags \n \n \n \n
HTML - <head> Basic tags
\n
\n
\n The `<head>` tag in an HTML document is a container for metadata (data about data) and links to external resources that are related to the document. The content inside the `<head>` tag is not displayed on the webpage itself, but it plays a crucial role in defining the document's properties and behavior.\n
\n
Purpose of the `<head>` Tag
\n
\n
\n Metadata: The `<head>` tag contains metadata about the HTML document, such as its character set, author, and description.\n
\n
\n Links to External Resources: It can link to external stylesheets, scripts, and other resources that are needed for the webpage.\n
\n
\n SEO and Accessibility: The metadata within the `<head>` tag helps search engines understand the content of the page, improving SEO. It also provides information that improves accessibility for users.\n
\n
\n
Common Elements Inside the `<head>` Tag
\n
\n
\n <title>: Sets the title of the webpage, which appears in the browser's title bar or tab.\n
\n
<title>Page Title</title>\n `\n }}>
\n
\n
\n
\n <meta>: Provides metadata about the HTML document. Common attributes include:\n
\n
`charset`: Specifies the character encoding for the document.
\n
`name and content`: Provide meta-information such as author, description, and keywords.
\n
\n
\n
<meta charset=\"UTF-8\">\n
<meta name=\"description\"content=\"A brief description of the webpage\">
\n <style>: Contains internal CSS styles for the document.\n
\n
<style>\n
body {
\n
font-family: Arial, sans-serif;
\n
}
\n
</style>
\n `\n }}>
\n
\n
\n
\n <script>: Links to external JavaScript files or contains inline JavaScript code.\n
\n
<script src=\"script.js\"></script>\n
<script>
\n
console.log('Inline JavaScript');
\n
</script>
\n `\n }}>
\n
\n
\n
\n
\n \n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\nexport const pageUrl = () => \"/html/basic-tags/html\";\n\nexport default function HTMLBasicHTMLTags() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - Basic Tags | Aspirant's Home\");\n path.setPreviousNext({});\n }, [])\n\n return (\n <>\n \n \n path.setPathName('/html/basic-tags')} className='btn btn-primary'> Back to Basic Tags \n \n \n \n
HTML - <html> Basic tags
\n
\n
\n The <html> tag is a fundamental part of an HTML document. It serves as the root element that encapsulates all the content and elements within the HTML page. Here’s an in-depth explanation of the <html> tag:\n
\n
Purpose of the `<html>` Tag
\n
\n
\n Root Element: The `<html>` tag is a fundamental part of an HTML document. It serves as the root element that encapsulates all the content and elements within the HTML page. \n
\n
\n Document Type Identification: The `<html>` tag defines the beginning and end of an HTML document. All other elements, such as the `<head>` and `<body>` tags, are nested inside the `<html>` tag.\n
\n
\n Language Attribute: The `<html>` tag often includes the lang attribute, which specifies the language of the document’s content. This is useful for accessibility and for search engines to better understand the content.\n
\n
\n
Syntax of the <html> Tag
\n
\n The `<html>` tag is placed at the very beginning of the HTML document, right after the <!DOCTYPE> declaration, and it is closed at the very end of the document.\n
\n
\n
<html>\n
<!-- All other elements go here -->
\n
</html>
\n `\n }}>
\n
\n
Attributes of the <html> Tag
\n
\n
\n lang: Specifies the language of the document. It helps search engines and screen readers understand the primary language of the content.\n
\n
<html lang=\"en\">\n `\n }}>
\n
\n
\n
\n xml: Used when the document is served as XML. It specifies the language of the document.\n
\n HTML (HyperText Markup Language) uses various tags to define the structure and content of web pages. Each tag describes a different type of content or function within the HTML document. Here are some of the most common and essential HTML tags:\n
\n
What is HTML document ?
\n
\n An HTML (HyperText Markup Language) document is a file that contains the markup language used to structure and present content on the web. It is the foundation of web pages and is interpreted by web browsers to display text, images, and other elements.\n
\n
\n All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.\n
\n
\n
<!DOCTYPE html>\n
<html>
\n
<body>
\n \n
<h1>My First Heading</h1>
\n \n
<p>My first paragraph.</p>
\n \n
</body>
\n
</html>
\n `\n }}>
\n
\n
The <!DOCTYPE> Declaration
\n
\n The <!DOCTYPE> declaration is an important part of an HTML document. It informs the web browser about the version of HTML being used and ensures that the browser renders the page correctly. \n
\n
\n The <!DOCTYPE> declaration specifies the Document Type Definition, which is a set of rules for the HTML document's structure. This helps the browser understand how to interpret the HTML.\n
\n
Syntax of the <!DOCTYPE> Declaration
\n
\n The syntax for the <!DOCTYPE> declaration varies depending on the version of HTML:\n
\n
HTML5
\n
\n HTML5 has a simple and straightforward <!DOCTYPE> declaration:\n
\n
\n
<!DOCTYPEhtml>\n `\n }}>
\n
\n
HTML 4.01
\n
\n HTML 4.01 has three types of `<!DOCTYPE>` declarations: strict, transitional, and frameset.\n
\n
\n
\n Strict: No deprecated elements or attributes allowed.\n
\n
<!DOCTYPEHTML PUBLIC\"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n `\n }}>
\n
\n
\n
\n Transitional: Allows deprecated elements and attributes.\n
\n
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\n `\n }}>
\n
\n
\n
\n Frameset: Used for documents containing frames.\n
\n
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\" \"http://www.w3.org/TR/html4/frameset.dtd\">\n `\n }}>
\n
\n
\n
\n
The <html> Tag
\n
\n
\n The `<html>` tag is a fundamental part of an HTML document. It serves as the root element that encapsulates all the content and elements within the HTML page. \n
\n
\n The `<html>` tag defines the beginning and end of an HTML document. All other elements, such as the `<head>` and `<body>` tags, are nested inside the `<html>` tag.\n
\n
\n The `<html>` tag often includes the lang attribute, which specifies the language of the document’s content. This is useful for accessibility and for search engines to better understand the content.\n
\n
\n
Syntax of the <html> Tag
\n
\n
<html>\n
<!-- All other elements go here -->
\n
</html>
\n `\n }}>
\n
\n \n
The <head> Tag
\n
\n The `<head>` tag in an HTML document is a container for metadata (data about data) and links to external resources that are related to the document. The content inside the `<head>` tag is not displayed on the webpage itself, but it plays a crucial role in defining the document's properties and behavior.\n
\n
Syntax of the <head> Tag
\n
\n
<head>\n
<title>Page Title</title>
\n
</head>
\n `\n }}>
\n
\n
The <body> Tag
\n
\n The `<body>` tag contains the content of the HTML document, such as text, images, links, and other media.\n
\n HTML elements can be categorized into two main types: block-level elements and inline elements. Understanding the difference between these types is essential for controlling the layout and structure of a webpage.\n
\n
Block-Level Elements
\n
\n Block-level elements occupy the full width of their parent container and always start on a new line. They typically contain other block-level elements and inline elements. Block-level elements are used to create the basic structure and layout of a webpage.\n
<div class=\"block-element\">This is a div element, which is block-level.</div>
\n
<p class=\"block-element\">This is a paragraph element, which is block-level.</p>
\n
<h1 class=\"block-element\">This is an h1 element, which is block-level.</h1>
\n
<section class=\"block-element\">
\n
This is a section element, which is block-level.
\n
<article class=\"block-element\">
\n
This is an article element inside a section.
\n
</article>
\n
</section>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output will be the following -\n
\n
\n
\n \n \n \n \n Block-Level Elements\n \n \n \n
This is a div element, which is block-level.
\n
This is a paragraph element, which is block-level.
\n
This is an h1 element, which is block-level.
\n \n This is a section element, which is block-level.\n \n This is an article element inside a section.\n \n \n \n \n `\n }}>
\n
\n
Inline Elements
\n
\n Inline elements do not start on a new line and only take up as much width as necessary. They are typically used to style parts of the text within block-level elements. Inline elements cannot contain block-level elements.\n
\n HTML classes are used to apply styles to groups of elements and to manipulate those elements using JavaScript. They are defined using the `class` attribute in HTML and can be applied to any HTML element. Multiple elements can share the same class, making it a powerful way to apply consistent styling and behavior.\n
\n
Syntax
\n
\n To assign a class to an HTML element, use the `class` attribute followed by the class name:\n
\n
\n
<div class=\"myClass\">This is a div element with a class.</div>\n
<p class=\"myClass\">This is a paragraph element with the same class.</p>
\n `\n }}>
\n
\n
Use of Classes in CSS
\n
\n Classes are commonly used in CSS to apply styles to elements. In CSS, class selectors are prefixed with a dot (.).\n
\n
\n
<!DOCTYPEhtml>\n
<html lang=\"en\">
\n
<head>
\n
<meta charset=\"UTF-8\">
\n
<title>HTML Classes Example</title>
\n
<style>
\n
.myClass {
\n
color: blue;
\n
font-size: 20px;
\n
}
\n
</style>
\n
</head>
\n
<body>
\n
<div class=\"myClass\">This is a styled div element.</div>
\n
<p class=\"myClass\">This is a styled paragraph element.</p>
\n
</body>
\n
</html>
\n \n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n \n HTML Classes Example\n \n \n \n
This is a styled div element.
\n
This is a styled paragraph element.
\n \n \n `\n }}>
\n
\n
\n You can see, using the same class we style multiple element of an web page.\n
\n
Use of Classes in JavaScript
\n
\n Classes can also be used in JavaScript to select and manipulate elements. The `classList` property provides methods to add, remove, and toggle classes.\n
\n
\n
<!DOCTYPEhtml>\n
<html lang=\"en\">
\n
<head>
\n
<meta charset=\"UTF-8\">
\n
<title>Manipulating Classes Example</title>
\n
<style>
\n
.highlight {
\n
background-color: yellow;
\n
}
\n
</style>
\n
<script>
\n
functiontoggleHighlight() {
\n
let elements = document.getElementsByClassName('myClass');
\n
for (let element of elements) {
\n
element.classList.toggle('highlight');
\n
}
\n
}
\n
</script>
\n
</head>
\n
<body>
\n
<div class=\"myClass\">This is a div element.</div>
\n
<p class=\"myClass\">This is a paragraph element.</p>
HTML elements can be assigned to multiple classes.
\n
To define multiple classes, separate the class names with a space, e.g., `<div class=\"city main\">`. The element will be styled according to all the specified classes.
\n
In the example below, the first `<h2>` element belongs to both the `city` class and the `main` class, and it will receive the CSS styles from both classes:
\n HTML comments are used to leave notes or explanations within the HTML code that are not displayed to users in the web browser. These comments can be helpful for developers to describe the code, leave reminders, or temporarily disable parts of the code during development and debugging.\n
\n
Syntax
\n
\n HTML comments start with `<!--` and end with `-->`. The content within these tags is ignored by the browser and is not rendered on the webpage.\n
\n
\n
<!-- This is a comment -->\n `\n }}>
\n
\n
Add Comments
\n
With the help of comments you can place notifications and reminders in your HTML code:
\n
\n
<!-- This is a comment -->\n\n
<p>This is a paragraph.</p>
\n \n
<!-- Remember to add more information here -->
\n `\n }}>
\n
\n
Hide Content
\n
\n Temporarily remove or disable sections of code without deleting them.\n
\n
\n
<p>This is a paragraph.</p>\n
<!-- <p>This is another paragraph </p> -->
\n
<p>This is a paragraph too.</p>
\n `\n }}>
\n
\n
\n You can also hide more than one line. Everything between the `<!--` and the `-->` will be hidden from the display.\n
\n Creating a bookmark in HTML allows users to jump to specific sections of a web page. This is achieved using anchor links with the id attribute and the `<a>` tag.\n
\n
Basic Structure
\n
\n
Define a Bookmark: Use the `id` attribute to create a bookmark within the page.
\n
Create a Link to the Bookmark: Use the `<a>` tag with the `href` attribute pointing to the `id` of the bookmark.
\n
\n
Example
\n
\n Here’s an example of how to create a bookmark in HTML:\n
\n
Step 1: Define a Bookmark
\n
\n First, add an `id` attribute to the element where you want to create the bookmark.\n
\n
\n
<h2 id=\"section1\">Section 1</h2>\n
<p>This is Section 1.</p>
\n `\n }}>
\n
\n
Step 2: Create a Link to the Bookmark
\n
\n Next, create a link that points to the bookmark using the `href` attribute with a hash (`#`) followed by the `id` value.\n
\n
\n
<a href=\"#section1\">Go to Section 1</a>\n `\n }}>
\n
\n\n
Complete Example
\n
\n Combining the two steps, here’s a complete example:\n
\n Customizing links in HTML involves using CSS to change their appearance and behavior. You can customize links to change their color, add underlines, change the appearance on hover, and more.\n
\n
Basic Example
\n
\n Here’s how you can style a link:\n
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<style>
\n
a {
\n
color: blue; /* Sets the link color */
\n
text-decoration: none; /* Removes the underline */
\n
}
\n
a:hover {
\n
color: red; /* Changes color on hover */
\n
text-decoration: underline; /* Adds underline on hover */
\n A definition list (`<dl>`) in HTML is used to display a list of terms and their corresponding definitions. This type of list is often used for glossaries, dictionaries, or to present metadata (a list of key-value pairs).\n
\n
Basic Structure
\n
\n The definition list consists of three main tags:\n
\n
\n
`<dl>`: Defines the definition list.
\n
`<dt>`: Defines a term in the definition list.
\n
`<dd>`: Describes the term in the definition list.
\n
\n
Syntax
\n
\n Here's the basic structure of a definition list:\n
\n
\n
<dl>\n
<dt>Term 1</dt>
\n
<dd>Description for Term 1</dd>
\n
<dt>Term 2</dt>
\n
<dd>Description for Term 2</dd>
\n
</dl>
\n `\n }}>
\n
\n
Example
\n
\n Here's an example of a definition list:\n
\n
\n
<!DOCTYPE html>\n
<html>
\n
<head>
\n
<title>Definition List Example</title>
\n
</head>
\n
<body>
\n
<dl>
\n
<dt>HTML</dt>
\n
<dd>A standard markup language for creating web pages.</dd>
\n
<dt>CSS</dt>
\n
<dd>A style sheet language used for describing the presentation of a document written in HTML.</dd>
\n
<dt>JavaScript</dt>
\n
<dd>A programming language commonly used to create interactive effects within web browsers.</dd>
\n
</dl>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n Definition List Example\n \n \n
\n
HTML
\n
A standard markup language for creating web pages.
\n
CSS
\n
A style sheet language used for describing the presentation of a document written in HTML.
\n
JavaScript
\n
A programming language commonly used to create interactive effects within web browsers.
\n
\n \n \n \n `\n }}>
\n
\n
Styling Definition Lists with CSS
\n
\n You can style definition lists using CSS to customize their appearance.\n
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<style>
\n
dl {
\n
font-family: Arial, sans-serif;
\n
padding: 10px;
\n
}
\n
dt {
\n
font-weight: bold;
\n
color: #2c3e50;
\n
margin-top: 10px;
\n
}
\n
dd {
\n
margin-left: 20px;
\n
color: #7f8c8d;
\n
}
\n
</style>
\n
<title>Styled Definition List</title>
\n
</head>
\n
<body>
\n
<dl>
\n
<dt>HTML</dt>
\n
<dd>A standard markup language for creating web pages.</dd>
\n
<dt>CSS</dt>
\n
<dd>A style sheet language used for describing the presentation of a document written in HTML.</dd>
\n
<dt>JavaScript</dt>
\n
<dd>A programming language commonly used to create interactive effects within web browsers.</dd>
\n
</dl>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n \n Styled Definition List\n \n \n
\n
HTML
\n
A standard markup language for creating web pages.
\n
CSS
\n
A style sheet language used for describing the presentation of a document written in HTML.
\n
JavaScript
\n
A programming language commonly used to create interactive effects within web browsers.
\n
\n \n \n \n `\n }}>
\n
\n
Nesting Definition Lists
\n
\n You can nest definition lists within other lists to create hierarchical structures.\n
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<title>Nesting Definition Lists</title>
\n
</head>
\n
<body>
\n
<dl>
\n
<dt>Programming Languages</dt>
\n
<dd>
\n
<dl>
\n
<dt>HTML</dt>
\n
<dd>A standard markup language for creating web pages.</dd>
\n
<dt>CSS</dt>
\n
<dd>A style sheet language used for describing the presentation of a document written in HTML.</dd>
\n
<dt>JavaScript</dt>
\n
<dd>A programming language commonly used to create interactive effects within web browsers.</dd>
\n
</dl>
\n
</dd>
\n
</dl>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n Nesting Definition Lists\n \n \n
\n
Programming Languages
\n
\n
\n
HTML
\n
A standard markup language for creating web pages.
\n
CSS
\n
A style sheet language used for describing the presentation of a document written in HTML.
\n
JavaScript
\n
A programming language commonly used to create interactive effects within web browsers.
\n
\n
\n
\n \n \n \n `\n }}>
\n
\n
\n By understanding and using definition lists properly, you can create well-structured and informative lists in your HTML documents.\n
\n HTML editors are software tools that help developers create and edit HTML code for building web pages. They provide various features to make the coding process easier, more efficient, and less error-prone. \n
\n
Examples of Mostly Used Text-Based HTML Editors
\n
\n
Visual Studio Code: A powerful, open-source editor with extensive extensions for web development.
\n
Sublime Text: Known for its speed and simplicity, offering a wide range of plugins.
\n
Atom: A hackable editor developed by GitHub, customizable with various packages.
\n
\n
\n You can also learn HTML from your Notepad or TextEdit.\n
\n
Learn HTML Using Notepad or TextEdit
\n
\n Follow the steps below to create your first web page with Notepad or TextEdit.\n
\n
Step 1: Open Notepad/TextEdit
\n
\n Open a new document to place the code.\n
\n
Step 2: Write Some HTML
\n
\n Write or copy the following HTML code into Notepad/TextEdit:\n
\n
\n
<!DOCTYPE html>\n
<html>
\n
<body>
\n \n
<h1>My First Heading</h1>
\n \n
<p>My first paragraph.</p>
\n \n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n \n
\n
Step 3: Save the HTML Page
\n
\n Save the file on your computer. Name the file \"index.html\"\n
\n
Step 4: View the HTML Page in Your Browser
\n
\n Open the saved HTML file in your favorite browser. Your result will be like this -\n
\n HTML elements are the building blocks of HTML documents. They define the structure and content of a webpage, allowing browsers to render text, images, links, forms, and other types of content. Each element is defined by a pair of tags: an opening tag and a closing tag, with content in between.\n
\n
Basic Structure of HTML Elements
\n
\n An HTML element typically consists of:\n
\n
\n
\n Opening Tag: This indicates the start of an element. It is enclosed in angle brackets and may contain attributes.\n
\n
<tagname attribute=\"value\">\n `\n }}>
\n
\n
\n
\n Content: This is the information or data that the element holds, such as text or other HTML elements.\n
\n
Content goes here\n `\n }}>
\n
\n
\n
\n Closing Tag: This indicates the end of an element. It is also enclosed in angle brackets but includes a forward slash before the tag name.\n
\n
</tagname>\n `\n }}>
\n
\n
\n
\n
Example of an HTML Element
\n
\n
<p>This is a paragraph.</p>\n `\n }}>
\n
\n
\n Where,\n
\n
\n
`<p>` is the opening tag.
\n
`This is a paragraph.` is the content.
\n
`</p>` is the closing tag.
\n
\n
Types of HTML Elements
\n
\n
\n Block-Level Elements: These elements typically start on a new line and take up the full width available. Examples include:\n
\n
Headings: `<h1>` to `<h6>`
\n
Paragraph: `<p>`
\n
Div: `<div>`
\n
Section: `<section>`
\n
Article: `<article>`
\n
Nav: `<nav>`
\n
Footer: `<footer>`
\n
\n
\n
<h1>This is a heading</h1>\n
<p>This is a paragraph.</p>
\n `\n }}>
\n
\n
\n
\n Inline Elements: These elements do not start on a new line and only take up as much width as necessary. Examples include:\n
\n
Span: `<span>`
\n
Anchor: `<a>`
\n
Image: `<img>`
\n
Strong: `<strong>`
\n
Em: `<em>`
\n
\n
\n
<p>This is a <strong>bold</strong> word in a paragraph.</p>\n `\n }}>
\n
\n
\n
\n Empty Elements: These elements do not have content and are self-closing. Examples include:\n
\n HTML elements can be nested inside other elements to create a hierarchical structure. Proper nesting is important for ensuring that the document is well-formed and displays correctly.\n
\n
\n
<div>\n
<h1>This is a heading</h1>
\n
<p>This is a paragraph with an <a href=\"https://example.com\">inline link</a>.</p>
\n HTML emojis are graphical representations of emotions, objects, and symbols that can be included in web pages to add visual interest and convey meaning. Emojis are a subset of Unicode characters, which means they are supported by most modern browsers and operating systems.\n
\n
Using Emojis in HTML
\n
\n To include an emoji in an HTML document, you can use its Unicode character directly or represent it with a numeric or hexadecimal entity. Emojis can be inserted in the same way as any other text character.\n
\n
\n
\n
<p>Happy face: {`😀`}</p>
\n
<p>Thumbs up: {`👍`}</p>
\n
<p>Heart: {`❤️`}</p>
\n
\n
\n
\n Output of the following -\n
\n
\n
Happy face: 😀\n
Thumbs up: 👍
\n
Heart: ❤️
\n `\n }}>
\n
\n
Common Emojis and Their Unicode Values
\n
Here are some commonly used emojis with their Unicode values:
\n
\n
\n Smileys & People:\n
\n
😀 Grinning Face: {`😀`} or {`😀`}
\n
😂 Face with Tears of Joy: {`😂`} or {`😂`}
\n
😍 Smiling Face with Heart-Eyes: {`😍`} or {`😍`}
\n
🤔 Thinking Face: {`🤔`} or {`🤔`}
\n
🙏 Folded Hands: {`🙏`} or {`🙏`}
\n
\n
\n
\n Animals & Nature:\n
\n
🐶 Dog Face: {`🐶`} or {`🐶`}
\n
🐱 Cat Face: {`🐱`} or {`🐱`}
\n
🌲 Evergreen Tree: {`🌲`} or {`🌲`}
\n
🌞 Sun with Face: {`🌝`} or {`🌞`}
\n
\n
\n
\n Food & Drink:\n
\n
🍎 Red Apple: {`🍎`} or {`🍎`}
\n
🍔 Hamburger: {`🍔`} or {`🍔`}
\n
🍕 Pizza: {`🍕`} or {`🍕`}
\n
🍺 Beer Mug: {`🍺`} or {`🍺`}
\n
\n
\n
\n Activities:\n
\n
⚽ Soccer Ball: {`⚽`} or {`⚽`}
\n
🎾 Tennis: {`🎾`} or {`🎾`}
\n
🎸 Guitar: {`🎸`} or {`🎸`}
\n
\n
\n
\n Travel & Places:\n
\n
✈️ Airplane: {`✈`} or {`✈`}
\n
🚗 Car: {`🚗`} or {`🚗`}
\n
🗽 Statue of Liberty: {`🗽`} or {`🗽`}
\n
\n
\n
\n Objects:\n
\n
📱 Mobile Phone: {`📱`} or {`📱`}
\n
💡 Light Bulb: {`💡`} or {`💡`}
\n
⌚ Watch: {`⌚`} or {`⌚`}
\n
\n
\n
\n Symbols:\n
\n
❤️ Red Heart: {`❤️`} or {`❤️`}
\n
💯 Hundred Points: {`💯`} or {`💯`}
\n
🔥 Fire: {`🔥`} or {`🔥`}
\n
\n
\n
\n
\n By incorporating emojis, you can enhance the user experience by adding visual elements that convey emotions and meanings effectively.\n
\n HTML entities are used to represent special characters in HTML that either cannot be easily typed on a keyboard or might be interpreted as HTML code. They are helpful in ensuring that special characters are displayed correctly in a web page without causing parsing errors. Entity names or entity numbers can be used to display reserved HTML characters.\n
\n
Syntax
\n
\n An HTML entity begins with an ampersand (`&`) and ends with a semicolon (`;`). Between these symbols is a code or name that represents the character.\n
\n
Named and Numeric Entities
\n
\n HTML entities can be named or numeric. Named entities are easier to remember, while numeric entities (both decimal and hexadecimal) provide support for characters without a named entity.\n
\n
Example: Named vs. Numeric Entities
\n
\n
Named entity: `{`€`}` for the Euro sign (`€`).
\n
Numeric entity (decimal): `{`€`}` for the Euro sign (`€`).
\n
Numeric entity (hexadecimal): `{`€`}` for the Euro sign (`€`).
\n HTML Events are actions or occurrences that happen in the browser while a user interacts with a web page. Like clicking a button, loading a page, hovering over an element, and more. Events allow HTML elements to \"react\" to user actions, enabling interactivity on websites by triggering JavaScript functions or other responses.\n
\n
Types of HTML Events
\n
HTML events can be categorized based on the type of interaction, such as mouse events, keyboard events, form events, and document events.
\n
\n
\n
Mouse Events
\n
\n
onclick : Triggered when an element is clicked.
\n
ondblclick : Triggered when an element is double-clicked.
\n
onmousedown : Triggered when a mouse button is pressed down over an element.
\n
onmouseup : Triggered when a mouse button is released over an element.
\n
onmouseover : Triggered when the mouse pointer moves over an element.
\n
onmouseout : Triggered when the mouse pointer moves out of an element.
\n
onmousemove : Triggered when the mouse pointer moves within an element.
\n
\n
\n
\n
Keyboard Events
\n
\n
onkeydown : Triggered when a key is pressed down.
\n
onkeypress : Triggered when a key is pressed (deprecated; onkeydown and onkeyup are recommended).
\n
onkeyup : Triggered when a key is released.
\n
\n
\n
\n
Form Events
\n
\n
onsubmit : Triggered when a form is submitted.
\n
onchange : Triggered when the value of an input, select, or textarea changes.
\n
onfocus : Triggered when an element (like an input) gains focus.
\n
onblur : Triggered when an element loses focus.
\n
oninput : Triggered when a user inputs text in an input or textarea.
\n
\n
\n
\n
Window and Document Events
\n
\n
onload : Triggered when the page or an image has fully loaded.
\n
onunload : Triggered when the page is closed or navigated away from.
\n
onresize : Triggered when the browser window is resized.
\n
onscroll : Triggered when the user scrolls on an element.
\n
\n
\n
\n
Clipboard Events
\n
\n
oncopy : Triggered when content is copied.
\n
oncut : Triggered when content is cut.
\n
onpaste : Triggered when content is pasted.
\n
\n
\n
\n
Media Events
\n
\n
onplay : Triggered when media (audio/video) starts playing.
\n
onpause : Triggered when media is paused.
\n
onvolumechange : Triggered when the volume of the media is changed.
\n
onended : Triggered when media playback reaches the end
\n
\n
\n
\n
Drag Events
\n
\n
ondrag : Triggered when an element is being dragged.
\n
ondrop : Triggered when the dragged element is dropped on a target.
\n
ondragover : Triggered when an element is dragged over a valid drop target.
\n
\n
\n
\n
Touch Events
\n
\n
ontouchstart : Triggered when a touch event starts.
\n
ontouchmove : Triggered when the touch moves across the screen.
\n
ontouchend : Triggered when the touch is lifted from the screen.
\n A favicon (short for \"favorite icon\") is a small icon associated with a particular website or web page. This icon is displayed in the browser's address bar, tabs, bookmarks, and other interface elements that show the site identity. Using a favicon helps with branding and makes your site easily recognizable to users.\n
\n
Adding a Favicon to Your Website
\n
\n To add a favicon to your website, you need to link to the icon file within the `<head>` section of your HTML document using the `<link>` element. The favicon file is usually named `favicon.ico`, but it can be any image file format such as PNG, GIF, or SVG.\n
\n HTML form attributes define the behavior and features of a form. Here are the common attributes you can use with the `<form>` element, along with their explanations:\n
\n
The `action` Attribute
\n
\n The `action` attribute of a form specifies the URL where the form data will be sent when the form is submitted.\n
\n
\n
<form action=\"/submit-form\">\n `\n }}>
\n
\n
The `method` Attribute
\n
\n The `method` attribute of a form specifies the HTTP method to use when sending form data. The most common values are `get` where it is appends the form data to the URL, suitable for non-sensitive data. And `post` where it is sends the form data as part of the request body, suitable for sensitive or large amounts of data.\n
\n
\n
<form method=\"post\">\n `\n }}>
\n
\n
The `enctype` Attribute
\n
\n The `enctype` attribute of a form specifies how the form data should be encoded when submitting to the server. The common values are -\n
\n
\n
`application/x-www-form-urlencoded`: This is default value of `enctype` attribute. Form data is encoded as key-value pairs.
\n
`multipart/form-data`: It is required when uploading files.
\n
`text/plain`: It is required to encodes the form data as plain text.
\n
\n
\n
<form enctype=\"multipart/form-data\">\n `\n }}>
\n
\n
The `target` Attribute
\n
\n The `target` attribute of a form specifies where to display the response after submitting the form. Here are the common values are -\n
\n
\n
`_self`: It is default value. It opens in the same browsing context as the form.
\n
`_blank`: It opens in a new tab or window.
\n
`_parent`: It opens in the parent frame.
\n
`_top`: It opens in the full body of the window.
\n
\n
\n
<form target=\"_blank\">\n `\n }}>
\n
\n
The `name` Attribute
\n
\n The `name` attribute of a form specifies the name of the form. This can be used to identify the form in scripts or when submitting the form data.\n
\n
\n
<form name=\"exampleForm\">\n `\n }}>
\n
\n
The `autocomplete` Attribute
\n
\n The `autocomplete` attribute of a form specifies whether the form should have autocomplete enabled or not. It has two common values - when it is `on` it enables autocomplete (It is a default value) and when it is `off` it disables autocomplete.\n
\n
\n
<form autocomplete=\"off\">\n `\n }}>
\n
\n
The `novalidate` Attribute
\n
\n When the `autocomplete` attribute present, it disables the browser’s built-in form validation.\n
\n
\n
<form novalidate>\n `\n }}>
\n
\n
The `accept-charset` Attribute
\n
\n The `accept-charset` attribute of a form specifies the character encodings that are accepted by the server.\n
\n
\n
<form accept-charset=\"UTF-8\">\n `\n }}>
\n
\n
\n These attributes allow you to control how your form behaves, how the data is encoded and sent, and where the response is displayed.\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nexport const pageUrl = () => \"/html/form-elements\";\n\nexport default function HTMLInputs() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - Form Elements | Aspirant's Home\");\n const urls = {\n 'previous': '/html/form-attributes',\n 'next': '/html/inputs'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n \n
\n HTML formatting refers to the use of HTML tags to apply stylistic and structural features to text within a webpage. These tags help improve the readability and presentation of the content by emphasizing certain parts of the text or organizing it in a specific way. Here are some common HTML formatting elements and their purposes:\n
\n
Common HTML Formatting Elements
\n
\n
\n Bold Text\n
\n
`<b>`: Bold text without implying any extra importance.
\n
`<strong>`: Bold text with semantic importance, indicating that the text is of strong importance.
\n
\n
\n
<p>This is a <b>bold</b> word.\n
<p>This is a <strong>strongly emphasized</strong> word.</p>
\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
This is a bold word.\n
This is a strongly emphasized word.
\n `\n }}>
\n
\n
\n
\n Italic Text\n
\n
`<i>`: Italic text without implying any extra emphasis.
\n
`<em>`: Italic text with semantic emphasis, indicating that the text is emphasized.
\n
\n
\n
<p>This is an <i>italic</i> word.</p>\n
<p>This is an <em>emphasized</em> word.</p>
\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
This is an italic word.\n
This is an emphasized word.
\n `\n }}>
\n
\n
\n
\n Underline Text\n
\n
`<u>`: Underlined text
\n
\n
\n
<p>This is an <u>underlined</u> word.</p>\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
This is an underlined word.\n `\n }}>
\n
\n
\n
\n Strikethrough Text\n
\n
`<s>`: Strikethrough text (use `<del>` for deleted text for better semantics)
\n
\n
\n
<p>This is a <s>strikethrough</s> word.</p>\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
This is a strikethrough word.\n `\n }}>
\n
\n
\n
\n Small Text\n
\n
`<small>`: Smaller text, often used for fine print or disclaimers.
\n
\n
\n
<p>This is a <small>small</small> text.</p>\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
This is a small text.\n `\n }}>
\n
\n
\n
\n Superscript and Subscript\n
\n
`<sup>`: Superscript text, typically used for footnotes or mathematical exponents.
\n
`<sub>`: Subscript text, typically used for chemical formulas or mathematical indices.
\n
\n
\n
<p>This is a<sup>superscript</sup> text.</p>\n
<p>This is a<sub>subscript</sub> text.</p>
\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
This is asuperscript text.\n
This is asubscript text.
\n `\n }}>
\n
\n
\n
\n Marked Text\n
\n
`<mark>`: Highlighted text.
\n
\n
\n
<p>This is a <mark>marked</mark> text.</p>\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
This is a marked text.\n `\n }}>
\n
\n
\n
\n Deleted and Inserted Text\n
\n
`<del>`: Deleted text.
\n
`<ins>`: Inserted text
\n
\n
\n
<p>This is <del>deleted</del> text.</p>\n
<p>This is <ins>inserted</ins> text.</p>
\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
This is deleted text.\n
This is inserted text.
\n `\n }}>
\n
\n
\n
\n Code and Preformatted Text\n
\n
`<code>`: Inline code snippets.
\n
`<pre>`: Preformatted text, preserving whitespace and line breaks.
\n
\n
\n
<p>This is an example of <code>inline code</code>.</p>\n
<pre>
\n
This is a block of preformatted text.
\n
It preserves whitespace and line breaks.
\n
</pre>
\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
This is an example of inline code.\n
\n This is a block of preformatted text.\n It preserves whitespace and line breaks.\n
\n `\n }}>
\n
\n
\n
\n Quotation and Citation\n
\n
`<blockquote>`: Block-level quote.
\n
`<q>`: Inline quote.
\n
`<cite>`: Citation, often used for titles of works.
\n HTML forms are a crucial element of web development, providing a way for users to interact with web applications by submitting data. Here's a detailed explanation:\n
\n\n
How A Form Looks Like
\n
\n
\n \n \n Simple Form Example\n \n \n \n
\n
Contact Form
\n \n
\n \n `\n }}>
\n
\n\n
Basic Structure of an HTML Form
\n
The <form> Element
\n
\n An HTML form is created using the `<form>` element, which acts as a container for various input elements like text fields, checkboxes, radio buttons, submit buttons, etc. The basic structure looks like this:\n
\n
\n
<form action=\"/submit-form\"method=\"POST\">\n
<!-- Form fields go here -->
\n
</form>
\n `\n }}>
\n
\n\n
Common Form Elements
\n
\n
\n
\n Text Input Element :<input type=\"text\">\n Displays a single-line text input field\n
\n
\n
\n
\n Radio Button :<input type=\"radio\">\tDisplays a radio button (for selecting one option from many option)\n
\n
\n
\n
\n Checkbox :<input type=\"checkbox\">\tDisplays a checkbox (for selecting zero or more of many option)\n
\n Textarea :<textarea id=\"message\" name=\"message\"></textarea>\tCreate a multi-line text input field\n
\n
\n
\n\n
The <label> Element
\n
\n The <label> element in HTML is used to define a label for an <input> element. It improves the usability and accessibility of web forms by making it easier for users, including those using screen readers, to understand the purpose of each input field. When a user clicks on a <label>, the corresponding <input> element is automatically focused, which enhances the user experience.\n
\n
Basic Structure
\n
\n Here is the basic syntax for using a `<label>` element:\n
\n The `for` attribute in the `<label>` tag should match the `id` attribute of the associated `<input>` element. This creates a connection between the label and the input field. When the label is clicked, the input field receives focus.\n
\n HTML headings are used to define the titles and subtitles on a webpage. They range from `<h1>` to `<h6>`, with `<h1>` being the highest level (most important) and `<h6>` the lowest level (least important). Headings are essential for structuring content, making it easier to read and navigate, and they also play a significant role in search engine optimization (SEO).\n
\n
Purpose of HTML Headings
\n
\n
Structure and Organization: Headings help to organize content into sections, making it easier for users to understand and navigate the page.
\n
Accessibility: Screen readers and other assistive technologies use headings to help users navigate the content.
\n
SEO: Search engines use headings to understand the content and context of a webpage, which can impact search rankings.
\n
\n
HTML Heading Elements
\n
\n
\n `<h1>`: Main heading or title of the document. There should typically be only one `<h1>` per page.\n
\n
\n `<h2>`: Secondary headings, used for major sections within the content.\n
\n
\n `<h3>`: Tertiary headings, used for subsections within `<h2>` sections.\n
\n
\n `<h4>`: Used for sub-subsections within `<h3>` sections.\n
\n
\n `<h5>`: Used for smaller divisions within `<h4>` sections.\n
\n
\n `<h6>`: Used for the least important headings.\n
\n In HTML, the `id` attribute is used to uniquely identify a single element within the document. Unlike classes, which can be applied to multiple elements, an `id` must be unique within an HTML document. This uniqueness allows the `id` attribute to be used for specific purposes such as applying styles, targeting elements with JavaScript, and creating anchors for navigation.\n
\n
Syntax
\n
\n To assign an `id` to an HTML element, use the `id` attribute followed by the desired unique identifier:\n
\n
\n
<div id=\"myUniqueId\">This is a div with a unique id.</div>\n `\n }}>
\n
\n
Use of IDs in CSS
\n
\n IDs can be used in CSS to apply styles to specific elements. In CSS, ID selectors are prefixed with a hash symbol (`#`).\n
\n
\n
<!DOCTYPEhtml>\n
<html lang=\"en\">
\n
<head>
\n
<meta charset=\"UTF-8\">
\n
<title>ID Example</title>
\n
<style>
\n
#myUniqueId {
\n
color: blue;
\n
font-size: 24px;
\n
}
\n
</style>
\n
</head>
\n
<body>
\n
<div id=\"myUniqueId\">This text is blue and 24px in size.</div>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n \n ID Example\n \n \n \n
This text is blue and 24px in size.
\n \n \n `\n }}>
\n
\n
Use of IDs in JavaScript
\n
\n IDs are often used in JavaScript to select and manipulate specific elements. The `getElementById` method is used to access an element by its `id`.\n
\n
\n
<!DOCTYPEhtml>\n
<html lang=\"en\">
\n
<head>
\n
<meta charset=\"UTF-8\">
\n
<title>ID Manipulation Example</title>
\n
<script>
\n
functionchangeContent() {
\n
document.getElementById('myUniqueId').innerHTML = 'Content has been changed!';
\n
}
\n
</script>
\n
</head>
\n
<body>
\n
<div id=\"myUniqueId\">This is the original content.</div>
\n IDs can also be used to create anchor links within a page. This is useful for creating a table of contents or for navigating to different sections of a long document.\n
\n
\n
<!DOCTYPEhtml>\n
<html lang=\"en\"
\n
<head>
\n
<meta charset=\"UTF-8\">
\n
<title>Anchor Links Example</title>
\n
</head>
\n
<body>
\n
<nav>
\n
<ul>
\n
<li><a href=\"#section1\">Go to Section 1</a></li>
\n
<li><a href=\"#section2\">Go to Section 2</a></li>
\n
</ul>
\n
</nav>
\n \n
<h2 id=\"section1\">Section 1</h2>
\n
<p>This is the content of section 1.</p>
\n \n
<h2 id=\"section2\">Section 2</h2>
\n
<p>This is the content of section 2.</p>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n By using the id attribute appropriately, you can target and manipulate specific elements on your web pages with precision.\n
\n An HTML `<iframe>` (short for inline frame) is an HTML element that allows you to embed another HTML document within the current document. This can be useful for embedding content such as videos, maps, or other web pages within your page.\n
\n
\n An HTML iframe is used to display a web page within a web page. You can see in the below example -\n
\n
\n \n
\n
Basic Syntax
\n
\n The basic syntax of an `<iframe>` element is as follows:\n
\n HTML images are used to add visual content to web pages. Images can make content more engaging and informative. The `<img>` tag is used to embed images in an HTML document. The `<img>` tag is an empty tag, meaning it doesn't have a closing tag.\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
Syntax
\n
\n The basic syntax for the `<img>` tag includes the `src` attribute to specify the image source (URL or path) and the `alt` attribute to provide alternative text for the image.\n
\n
\n
<img src=\"image.jpg\"alt=\"Description of the image\">\n `\n }}>
\n
\n
Attributes of `<img>` Tag
\n
\n
\n `src` (source):\n
\n
Specifies the path to the image file.
\n
This can be a relative path, an absolute path, or a URL.
\n HTML input attributes are used to define the characteristics and behavior of the `<input>` element.\n
\n
\n These attributes apply to various types of input fields such as text, email, password, date, number, and more. The `<input>` element creates interactive controls for web-based forms, allowing them to accept data from the user.\n
\n
Commonly Used Attributes
\n
\n Here are some of the most frequently used attributes for the `<input type=\"text\">` element:\n
\n\n
\n
\n
The `name` attribute
\n
\n This attribute specifies the name of the input field. This is used to reference the form data after it is submitted.\n
\n
\n
<input type=\"text\"name=\"username\">\n `\n }}>
\n
\n
\n
\n
The `id` attribute
\n
\n It specifies a unique identifier for the input field. This is often used in conjunction with the `<label>` element.\n
\n HTML provides a variety of `<input>` types to handle different kinds of user input. Here’s a comprehensive list of the different input types, along with a brief explanation of each:\n
\n
Text Input
\n
\n The HTML `<input type=\"text\">` element is used to create a single-line text input field, where users can enter text data. This element is one of the most common and versatile form elements, providing a way for users to input data that can then be sent to a server or processed on the client side.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write text input element.\n
\n
\n
<input type=\"text\"name=\"username\">\n `\n }}>
\n
\n
Password Input
\n
\n The HTML `<input type=\"password\">` element is used to create a single-line text input field where users can enter a password. The characters entered in this field are obscured (typically replaced with dots or asterisks) to protect the user's privacy.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write password input element.\n
\n The HTML `<input type=\"email\">` element is used to create a field for entering an email address. This input type ensures that the entered data is in the correct email format (e.g., `user@example.com`). It provides built-in validation to check the format of the input, helping to ensure that users enter valid email addresses.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write email input element.\n
\n
\n
<input type=\"email\"name=\"email\">\n `\n }}>
\n
\n
Input Type Submit
\n
\n The HTML `<input type=\"submit\">` element is used to create a button that submits a form. When clicked, it sends the form data to the server specified in the form's action attribute using the method specified in the method attribute (typically \"GET\" or \"POST\").\n
\n
Basic Example
\n
\n Here is a basic example of how to write how a submit button works.\n
\n The HTML `<input type=\"button\">` element is used to create a clickable button that can be programmed to perform a specific task when clicked. Unlike the `<input type=\"submit\">` element, which submits a form, the `<input type=\"button\">` does not have any default behavior and relies on JavaScript to define its functionality.\n
\n
\n \n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write input type button element.\n
\n The HTML `<input type=\"checkbox\">` element is used to create a checkbox, a GUI widget that allows the user to make a binary choice (i.e., a choice between one of two possible mutually exclusive options). A checkbox can be either checked or unchecked. Checkboxes are often used in forms to allow users to select multiple options from a list.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write input type checkbox element.\n
\n Here is a basic example of how to use input type checkbox element.\n
\n
\n
\n \n \n \n \n \n \n \n `\n }}>
\n
\n
Radio Button
\n
\n The HTML `<input type=\"radio\">` element is used to create radio buttons. Radio buttons allow the user to select one option from a set of mutually exclusive choices. Only one radio button in a group can be selected at any given time.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write input type radio button element.\n
\n Here is a basic example of how to use input type radio button element.\n
\n
\n
\n
Choose Your Gender
\n \n \n \n \n
\n \n \n \n `\n }}>
\n
\n
Input Type Color
\n
\n The HTML `<input type=\"color\">` element is used to create a color picker that allows users to select a color. When clicked, it opens a color picker interface, typically provided by the browser, allowing the user to choose a color. The selected color is returned as a hexadecimal color code.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write input type color element.\n
\n
\n
<input type=\"color\"name=\"favcolor\">\n `\n }}>
\n
\n
Basic Example
\n
\n Here is a basic example of how to use input type color element.\n
\n
\n
Choose your favorite color:\n \n `\n }}>
\n
\n
Input Type Date
\n
\n The HTML `<input type=\"date\">` element is used to create a date picker input that allows users to select a date. When clicked, it opens a calendar interface, typically provided by the browser, allowing the user to choose a date. The selected date is returned in the DD/MM/YYYY format.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write input type date element.\n
\n
\n
<input type=\"date\"name=\"birthdate\">\n `\n }}>
\n
\n
Basic Example
\n
\n Here is a basic example of how to use input type date element.\n
\n
\n
Select your birthdate:\n \n `\n }}>
\n
\n
Input Type Image
\n
\n The HTML `<input type=\"image\">` element is used to create an image button within a form. When clicked, it submits the form just like a regular submit button, but it uses an image instead of text. This type of input is useful when you want to use a custom image for form submission, such as for a graphical button.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write input type image element.\n
\n Here is a basic example of how to use input type image element.\n
\n
\n
Username:\n
\n \n
\n \n `\n }}>
\n
\n
Input Type File
\n
\n The HTML `<input type=\"file\">` element is used to create a file-select control, which allows users to browse their local filesystem and select a file to upload. This element is commonly used in forms where file uploads are required, such as profile picture uploads, document submissions, or any other scenario where a file needs to be transferred from the user's computer to the server.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write input type file element.\n
\n Here is a basic example of how to use input type file element.\n
\n
\n
Choose a file:\n \n `\n }}>
\n
\n
Input Type Hidden
\n
\n The HTML `<input type=\"hidden\">` element is used to create an input field that is not displayed to the user. This type of input is useful for storing data that needs to be sent with the form submission but does not need to be seen or interacted with by the user, such as a token, user ID, or other backend-related data.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write input type file element.\n
\n The HTML `<input type=\"month\">` element is used to create a month and year input field, allowing users to select a specific month and year from a drop-down menu. This is particularly useful for forms where you need users to provide a date in the \"month-year\" format, such as for credit card expiration dates, subscription periods, or project timelines.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write input type month element.\n
\n Here is a basic example of how to use input type month element.\n
\n
\n
Select a month:\n \n `\n }}>
\n
\n
Input Type Number
\n
\n The HTML `<input type=\"number\">` element is used to create a numeric input field, allowing users to enter and edit a number. This type of input is useful for forms that require numeric values such as age, quantity, or any other numerical input.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write input type number element.\n
\n `min` : Specifies the minimum allowable value for the input field.\n
\n
\n `max` : Specifies the maximum allowable value for the input field.\n
\n
\n `step` : Specifies the increment by which the value can be adjusted. The default is `1`.\n
\n
\n
Basic Example
\n
\n Here is a basic example of how to use input type number element.\n
\n
\n
Quantity:\n \n `\n }}>
\n
\n
Input Type Range
\n
\n The HTML `<input type=\"range\">` element creates a slider control for selecting a value from a defined range. This type of input is useful for scenarios where you want users to select a value visually from a continuous range, such as setting volume, brightness, or any other numerical value within a specified range.\n
\n
Basic Syntax
\n
\n Here is a basic syntax of how to write input type range element.\n
\n
\n
<input type=\"range\"name=\"slider\">\n `\n }}>
\n
\n
Attributes
\n
\n
\n `min` : Specifies the minimum allowable value for the input field.\n
\n
\n `max` : Specifies the maximum allowable value for the input field.\n
\n
\n `step` : Specifies the increment by which the value can be adjusted. The default is `1`.\n
\n
\n
Basic Example
\n
\n Here is a basic example of how to use input type range element.\n
\n HTML, or HyperText Markup Language, is the standard markup language used to create and design the structure of web pages. It consists of a series of elements that define different parts of a webpage, such as headings, paragraphs, links, images, and other content.\n
\n
What is HTML?
\n
\n
\n HTML stands for HyperText Markup Language:\n HTML is an acronym for HyperText Markup Language. \"HyperText\" refers to the way HTML allows text to be linked to other documents or resources, and \"Markup Language\" refers to the way HTML uses tags to describe the structure and presentation of the content.\n
\n
\n HTML is the standard markup language used to create web pages:\n HTML is the universally accepted language for creating and designing web pages. It is the foundation upon which all websites are built. Every web page you see on the internet is written using HTML in some form.\n
\n
\n HTML defines the structure of a web page:\n HTML provides the basic structure of a webpage, which includes elements like headings, paragraphs, lists, links, images, and other types of content. It organizes this content in a hierarchical manner, allowing for a logical flow and easy navigation.\n
\n
\n HTML is made up of a series of elements:\n HTML documents are composed of various elements. Each element is represented by tags and can have attributes that provide additional information about the element. For example, a paragraph is an element that uses the <p> tag.\n
\n
\n HTML elements instruct the browser on how to display content:\n HTML elements tell the web browser how to display the content enclosed within them. For example, the <h1> tag indicates that the enclosed text is a top-level heading, while the <p> tag indicates a paragraph. Browsers use these instructions to render the content appropriately.\n
\n
\n HTML elements label parts of the content, indicating \"this is a heading,\" \"this is a paragraph,\" \"this is a link,\" and so on:\n HTML elements act as labels that define the role of different parts of the content. For instance:\n <h1> to <h6> tags label headings.\n <p> tags label paragraphs.\n <a> tags label hyperlinks.\n <img> tags label images.\n This labeling helps both browsers and search engines understand and display the content correctly.\n
\n
\n
Basic Structure of an HTML Document
\n
An HTML document has a standard structure with the following essential elements:
\n HTML and JavaScript are often used together to create dynamic, interactive web pages. HTML provides the structure and content of a webpage, while JavaScript allows you to add interactivity, manipulate the DOM (Document Object Model), and handle events.\n
\n You can change the content of an HTML element using the innerHTML or textContent properties. Also you can change the style of an HTML element using the style property.\n
\n
\n
<!DOCTYPEhtml>\n
<html lang=\"en\">
\n
<head>
\n
<meta charset=\"UTF-8\">
\n
<title>Change Content Example</title>
\n
<script>
\n
functionchangeContent() {
\n
document.getElementById('myText').textContent = 'My Initial Content is changed.';
\n HTML layout refers to the structure and organization of content on a web page. It involves arranging elements such as headers, footers, navigation menus, sidebars, and main content areas to create a visually appealing and user-friendly interface. There are various methods and techniques to create layouts in HTML, including the use of HTML5 semantic elements, CSS, and layout frameworks.\n
\n
Semantic Elements
\n
\n HTML5 introduced several new elements that help define the structure of a web page in a more meaningful way. These elements include:\n
\n
\n
\n
\n \n
\n
\n
\n
\n
`<header>`: Represents the header section of a document or a section, typically containing headings, navigation, or other introductory content.
\n
`<nav>`: Represents a section of the page intended for navigation links.
\n
`<section>`: Represents a generic section of a document, typically with a heading.
\n
`<article>`: Represents a self-contained piece of content that could be distributed independently (e.g., a blog post).
\n
`<aside>`: Represents content that is tangentially related to the main content (e.g., a sidebar).
\n
`<footer>`: Represents the footer section of a document or a section, typically containing information about the author, copyright information, or navigation links.
\n
\n
\n
\n
HTML Layout Techniques
\n
There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:
\n
\n
CSS framework
\n
CSS float property
\n
CSS flexbox
\n
CSS grid
\n
\n
CSS framework
\n
\n A CSS framework is a pre-prepared library that is meant to be used by web developers to simplify the development of web pages. It includes a collection of CSS files that provide a foundation for your web development project. CSS frameworks are designed to help you achieve a consistent and structured layout, as well as handle common tasks such as creating grids, buttons, forms, and other UI components.\n
\n
CSS float property
\n
\n The CSS float property is a powerful tool used to create layouts in HTML. While modern techniques like Flexbox and Grid have largely replaced float for layout purposes, understanding float is still valuable for working with older code and for certain specific use cases.\n
\n
\n The `float` property in CSS is used to position an element to the left or right within its container, allowing text and inline elements to wrap around it.\n
\n
CSS Flexbox
\n
\n CSS Flexbox (Flexible Box Layout) is a layout model designed to make it easier to design flexible and responsive layout structures. It provides an efficient way to distribute space among items in a container, even when their size is unknown or dynamic. Flexbox is particularly useful for creating layouts that adapt to different screen sizes and orientations.\n
\n
\n The parent element that holds the flex items. It is defined by setting the `display` property to `flex` or `inline-flex`.\n
\n
CSS Grid
\n
\n CSS Grid Layout is a powerful layout system that allows you to create complex and responsive web designs with a grid-based approach. It provides a way to create two-dimensional layouts using rows and columns, offering greater control over the placement of items within a container.\n
\n
\n The parent element that holds grid items. Defined by setting the `display` property to `grid` or `inline-grid`.\n
\n\n
\n You can check the all CSS based layout in full details here.\n
\n HTML lists are used to group a set of related items in a specific order. There are three main types of lists in HTML:\n
\n
\n
Unordered List (`<ul>`)
\n
Ordered List (`<ol>`)
\n
Description List (`<dl>`)
\n
\n
Example:
\n
\n
\n
Unordered List
\n
\n
Item 1
\n
Item 2
\n
Item 3
\n
\n
\n
\n
Ordered List
\n \n
Item 1
\n
Item 2
\n
Item 3
\n \n
\n
\n
Description List
\n
\n
Term 1
\n
Description 1
\n
Term 2
\n
Description 2
\n
\n
\n
\n
Unordered List (`<ul>`)
\n
\n An unordered list is used to group a set of related items in no particular order. Items in an unordered list are typically displayed with bullet points.\n
\n
\n
<ul>\n
<li>Item 1</li>
\n
<li>Item 2</li>
\n
<li>Item 3</li>
\n
</ul>
\n `\n }}>
\n
\n
Ordered List (`<ol>`)
\n
\n An ordered list is used to group a set of related items in a specific order. Items in an ordered list are typically displayed with numbers or letters.\n
\n
\n
<ol>\n
<li>Item 1</li>
\n
<li>Item 2</li>
\n
<li>Item 3</li>
\n
</ol>
\n `\n }}>
\n
\n
Description List (`<dl>`)
\n
\n A description list is used to group a set of related items in a list of terms and their descriptions. This is useful for defining terms or concepts.\n
\n HTML meta tags are snippets of text placed within the `<head>` section of an HTML document that provide metadata about the web page. Metadata is data about data, and in this context, it includes information like the page description, keywords, author, and other details that help search engines and browsers understand the content and purpose of the page. Meta tags do not display content on the page but play a crucial role in SEO (Search Engine Optimization) and user experience.\n
\n
\n Here are some key points about HTML meta tags:\n
\n
\n
\n Meta Description Tag:\n
\n
Provides a brief summary of the page content.
\n
Often displayed in search engine results under the page title.
\n
\n
\n
<meta name=\"description\"content=\"Learn HTML with comprehensive tutorials and guides.\">\n `\n }}>
\n
\n
\n
\n Meta Keywords Tag:\n
\n
Lists keywords relevant to the page content.
\n
Used to be important for SEO, but now less influential.
\n
\n
\n
<meta name=\"keywords\"content=\"HTML, web development, tutorials, guides\">\n `\n }}>
\n
\n
\n
\n Meta Charset Tag:\n
\n
Specifies the character encoding for the HTML document.
\n In summary, HTML meta tags provide essential information about the web page to browsers, search engines, and other web services, playing a critical role in SEO, accessibility, and overall web development.\n
\n An ordered list (`<ol>`) in HTML is used to display a list of items that are sequentially ordered. Each item in the list is numbered, and the numbering can be customized. The `<ol>` tag is used to define the ordered list, and each item within the list is defined using the `<li>` (list item) tag.\n
\n
Basic Structure
\n
\n Here's the basic structure of an ordered list:\n
\n
\n
<ol>\n
<li>Item 1</li>
\n
<li>Item 2</li>
\n
<li>Item 3</li>
\n
</ol>
\n `\n }}>
\n
\n
Example
\n
\n Here's a simple example of an ordered list:\n
\n
\n
<!DOCTYPE html>\n
<html>
\n
<head>
\n
<title>Ordered List Example</title>
\n
</head>
\n
<body>
\n
<ol>
\n
<li>Step 1</li>
\n
<li>Step 2</li>
\n
<li>Step 3</li>
\n
</ol>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
Attributes for `<ol>`
\n
`type` Attribute
\n
\n The `type` attribute specifies the type of numbering to use for the list items. Possible values include:\n
\n
\n
`1`: Default. Decimal numbers (1, 2, 3, ...)
\n
`A`: Uppercase letters (A, B, C, ...)
\n
`a`: Lowercase letters (a, b, c, ...)
\n
`I`: Uppercase Roman numerals (I, II, III, ...)
\n
`i`: Lowercase Roman numerals (i, ii, iii, ...)
\n
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<title>Ordered List with Type</title>
\n
</head>
\n
<body>
\n
<ol type=\"1\">
\n
<li>Item 1</li>
\n
<li>Item 2</li>
\n
<li>Item 3</li>
\n
</ol>
\n
<ol type=\"A\">
\n
<li>Item 1</li>
\n
<li>Item 2</li>
\n
<li>Item 3</li>
\n
</ol>
\n
<ol type=\"a\">
\n
<li>Item 1</li>
\n
<li>Item 2</li>
\n
<li>Item 3</li>
\n
</ol>
\n
<ol type=\"I\">
\n
<li>Item 1</li>
\n
<li>Item 2</li>
\n
<li>Item 3</li>
\n
</ol>
\n
<ol type=\"i\">
\n
<li>Item 1</li>
\n
<li>Item 2</li>
\n
<li>Item 3</li>
\n
</ol>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n Ordered List with Type\n \n \n \n
Item 1
\n
Item 2
\n
Item 3
\n \n \n
Item 1
\n
Item 2
\n
Item 3
\n \n \n
Item 1
\n
Item 2
\n
Item 3
\n \n \n
Item 1
\n
Item 2
\n
Item 3
\n \n \n
Item 1
\n
Item 2
\n
Item 3
\n \n \n \n \n `\n }}>
\n
\n
`start` Attribute
\n
\n The `start` attribute specifies the starting number of the list.\n
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<title>Ordered List with Start</title>
\n
</head>
\n
<body>
\n
<ol start=\"5\">
\n
<li>Item 5</li>
\n
<li>Item 6</li>
\n
<li>Item 7</li>
\n
</ol>
\n
</body>
\n
</html>
\n \n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n Ordered List with Start\n \n \n \n
Item 5
\n
Item 6
\n
Item 7
\n \n \n \n `\n }}>
\n
\n
`reversed` Attribute
\n
\n The `reversed` attribute displays the list in descending order.\n
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<title>Reversed Ordered List</title>
\n
</head>
\n
<body>
\n
<ol reversed>
\n
<li>Item 3</li>
\n
<li>Item 2</li>
\n
<li>Item 1</li>
\n
</ol>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n Reversed Ordered List\n \n \n \n
Item 3
\n
Item 2
\n
Item 1
\n \n \n \n `\n }}>
\n
\n
Nesting Ordered Lists
\n
You can nest ordered lists inside other lists to create sub-lists.
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<title>Nesting Ordered Lists</title>
\n
</head>
\n
<body>
\n
<ol>
\n
<li>Step 1</li>
\n
<li>Step 2
\n
<ol>
\n
<li>Sub-step 2.1</li>
\n
<li>Sub-step 2.2</li>
\n
</ol>
\n
</li>
\n
<li>Step 3</li>
\n
</ol>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n Nesting Ordered Lists\n \n \n \n
Step 1
\n
Step 2\n \n
Sub-step 2.1
\n
Sub-step 2.2
\n \n
\n
Step 3
\n \n \n \n `\n }}>
\n
\n
Styling Ordered Lists with CSS
\n
\n You can style ordered lists using CSS to change the numbering style, padding, margins, and more.\n
\n The page title in HTML is the text that appears in the browser tab and is used as the title of a web page. It is defined within the `<title>` element, which is placed inside the `<head>` section of an HTML document. The page title is crucial for both usability and search engine optimization (SEO), as it gives users and search engines an idea of the content of the page.\n
\n
Below is the example of page title.
\n
\n \n
\n
Importance of Page Title
\n
\n
User Experience: The page title helps users understand what the page is about and provides context when multiple tabs are open in a browser.
\n
Search Engine Optimization (SEO): Search engines use the page title to understand the content of the page and to display it in search results. A well-crafted title can improve the page's visibility and ranking in search engines.
\n
Bookmarks and Sharing: When users bookmark a page or share it on social media, the page title is often used as the default text.
\n
\n
Syntax
\n
The `<title>` element should be included within the `<head>` section of an HTML document.
\n HTML paragraphs are used to define blocks of text that are separated from other blocks. They are represented by the `<p>` tag. Paragraphs are fundamental elements in HTML documents and are used to structure and organize text content.\n
\n
Basic Syntax
\n
\n A paragraph is defined using the `<p>` tag. The text content is placed between the opening `<p>` tag and the closing `</p>` tag.\n
\n
\n
<p>This is a paragraph of text.</p>\n `\n }}>
\n
\n
Special Characters in Paragraphs
\n
\n When writing paragraphs, you might need to include special characters like ampersands (`&`), less-than (`<`), and greater-than (`>`) symbols. These characters have special meanings in HTML and need to be encoded to display correctly.\n
\n
{`Use < and > to display less-than and greater-than symbols.`}
\n
{`Use & to display an ampersand symbol.`}
\n
Line Breaks
\n
\n If you need to force a line break within a paragraph, you can use the `<br>` tag. The `<br>` tag is an empty element and does not have a closing tag.\n
\n
\n
<p>This is the first line.<br>This is the second line.</p>\n `\n }}>
\n
\n
Output will be -
\n
\n
This is the first line. This is the second line.\n `\n }}>
\n Quotations and citations in HTML are used to mark text that is being quoted from another source or to cite the source of a piece of information. Here are the key elements used for quotations and citations in HTML:\n
\n
\n
\n `<blockquote>`\n
\n The `<blockquote>` tag is used for long quotations that require block-level presentation. It is typically used to quote large sections of text from another source. Browsers usually display blockquote elements with indentation.\n
\n
\n
\n Attributes:\n
\n
\n `<cite>`: A URL that points to the source of the quote.\n
\n
\n
\n
<blockquote cite=\"https://www.example.com\">\n
This is a longer block quote from another source.
\n
</blockquote>
\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
\n This is a longer block quote from another source.\n \n `\n }}>
\n
\n
\n
\n
\n
\n `<q>`\n
\n The `<q>` tag is used for short, inline quotations. Browsers typically render text inside `<q>` tags with quotation marks.\n
\n
\n
<p>John said, <q>This is a quote.</q></p>\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
John said, This is a quote.\n `\n }}>
\n
\n
\n
\n `<abbr>`\n
\n The `<abbr>` tag is used to represent an abbreviation or acronym. The title attribute is often used with `<abbr>` to provide the full form of the abbreviation, which is displayed as a tooltip when the mouse hovers over the abbreviation.\n
\n
\n
\n Attributes:\n
\n
\n `<cite>`: A URL that points to the source of the quote.\n
\n
\n
\n
<p>The <abbr title=\"World Health Organization\">WHO</abbr> was founded in 1948.</p>\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
The WHO was founded in 1948.\n `\n }}>
\n
\n
\n
\n
\n
\n `<address>`\n
\n The `<address>` tag is used to provide contact information for the author or owner of a document or an article. Browsers typically display text inside `<address>` elements in italics.\n
\n
\n
<address>\n
Written by John Doe.<br>
\n
Visit us at:<br>
\n
Example.com<br>
\n
Box 564, Disneyland<br>
\n
USA
\n
</address>
\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
\n Written by John Doe. \n Visit us at: \n Example.com \n Box 564, Disneyland \n USA\n \n `\n }}>
\n
\n
\n
\n `<cite>`\n
\n The `<cite>` tag is used to reference the title of a work, such as a book, article, song, etc. Browsers usually render text inside `<cite>` tags in italics.\n
\n
\n
<p>The book <cite>To Kill a Mockingbird</cite> is a classic.</p>\n `\n }}>
\n
\n
\n Output will be following -\n
\n
\n
The book To Kill a Mockingbird is a classic.\n `\n }}>
\n
\n
\n
\n `<bdo>`\n
\n The `<bdo>` (Bi-Directional Override) tag is used to override the current text direction. It is useful for displaying text that needs to be rendered in a different direction than the surrounding content, such as in languages that are written right-to-left.\n
\n
\n
\n Attributes:\n
\n
\n `<dir>`: Specifies the text direction. Values can be `<ltr>` (left-to-right) or `<rtl>` (right-to-left).\n\n
\n HTML semantic elements are those that clearly describe their meaning in a human- and machine-readable way. These elements help define the structure of web pages, making them more accessible, understandable, and maintainable.\n
\n
Key Semantic Elements
\n
\n
\n `<header>`\n
\n
Represents introductory content or a set of navigational links.
\n
Typically contains headings, logos, navigation links, or introductory information.
\n
Example \n
\n
<header>\n
<h1>Website Title</h1>
\n
<nav>
\n
<ul>
\n
<li><a href=\"#home\">Home</a></li>
\n
<li><a href=\"#about\">About</a></li>
\n
<li><a href=\"#contact\">Contact</a></li>
\n
</ul>
\n
</nav>
\n \n `\n }}>
\n
\n
\n
\n
\n
\n `<nav>`\n
\n
Contains navigation links.
\n
Intended for major navigational blocks like menus or tables of contents.
\n
Example \n
\n
<nav>\n
<ul>
\n
<li><a href=\"#home\">Home</a></li>
\n
<li><a href=\"#about\">About</a></li>
\n
<li><a href=\"#services\">Services</a></li>
\n
<li><a href=\"#contact\">Contact</a></li>
\n
</ul>
\n
</nav>
\n `\n }}>
\n
\n
\n
\n
\n
\n `<main>`\n
\n
Specifies the main content of the document.
\n
Only one `<main>` element should be used per document.
\n
Example: \n
\n
<main>\n
<h1>Main Content</h1>
\n
<p>This is the primary content of the page.</p>
\n
</main>
\n `\n }}>
\n
\n
\n
\n
\n
\n `<section>`\n
\n
Defines sections in a document, such as chapters, headers, footers, or any thematic grouping of content.
\n
Example: \n
\n
<section>\n
<h2>Section Title</h2>
\n
<p>Content for this section.</p>
\n
</section>
\n `\n }}>
\n
\n
\n
\n
\n
\n `<article>`\n
\n
Represents a self-contained composition in a document, such as a blog post, news article, or forum post.
\n
Example: \n
\n
<article>\n
<h2>Article Title</h2>
\n
<p>This is an article.</p>
\n
</article>
\n `\n }}>
\n
\n
\n
\n
\n
\n `<aside>`\n
\n
Defines content aside from the main content, such as sidebars, pull quotes, or advertisements.
\n
Example: \n
\n
<aside>\n
<h2>Related Information</h2>
\n
<p>This is related content.</p>
\n
</aside>
\n `\n }}>
\n
\n
\n
\n
\n
\n `<footer>`\n
\n
Represents a footer for a document or section.
\n
Typically contains author information, copyright information, or navigational elements.
\n HTML styles refer to the ways you can control the appearance and layout of HTML elements on a webpage. This is typically done using CSS (Cascading Style Sheets). Styles can be applied directly within HTML elements using the `style` attribute, within the `<head>` section using the `<style>` tag, or through external CSS files.\n
\n
Methods to Apply Styles in HTML
\n
\n
Inline Styles: Applied directly within an HTML element using the `style` attribute.
\n
Internal Styles: Defined within the `<style>` tag inside the `<head>` section of the HTML document.
\n
External Styles: Linked to an HTML document through an external CSS file using the `<link>` tag.
\n
\n
Inline Styles
\n
\n Inline styles are used to apply unique styles to a single HTML element. They are specified using the `style` attribute within the opening tag.\n
\n
\n
<p style=\"color: blue; font-size: 16px;\">This is a styled paragraph.</p>
\n `\n }}>
\n
\n
Internal Styles
\n
\n Internal styles are defined within the `<style>` tag, which is placed in the `<head>` section of the HTML document. These styles apply to the entire document.\n
<p>This paragraph is styled using internal CSS.</p>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output will be the following -\n
\n
\n
\n \n \n \n \n Internal Styles Example\n \n \n \n
Internal Styles Example
\n
This paragraph is styled using internal CSS.
\n \n \n `\n }}>
\n
\n
External Styles
\n
\n External styles are defined in an external CSS file, which is linked to the HTML document using the `<link>` tag. This method is preferred for maintaining and reusing styles across multiple pages\n
\n HTML symbols are special characters that are not found on a standard keyboard but can be displayed in a web page using HTML entities. These symbols include mathematical signs, currency signs, arrows, and many other symbols used in various contexts. HTML entities are used to represent these symbols, ensuring they are displayed correctly in the browser.\n
\n The `colspan` and `rowspan` attributes in HTML are used to merge cells across columns and rows in a table, respectively. These attributes are applied to the `<td>` (table data) and `<th>` (table header) elements.\n
\n
`colspan` Attribute
\n
\n The `colspan` attribute is used to make a cell span across multiple columns. This can be useful for creating table headers that cover multiple columns or for merging cells horizontally.\n
\n Where, `number` is The number of columns that the cell should span across.\n
\n
\n Here’s an example demonstrating the use of the `colspan` attribute:\n
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<style>
\n
table {
\n
width: 100%;
\n
border-collapse: collapse;
\n
}
\n
th, td {
\n
border: 1px solid black;
\n
padding: 8px;
\n
text-align: left;
\n
}
\n
</style>
\n
</head>
\n
<body>
\n
<table>
\n
<tr>
\n
<th colspan=\"2\">Header 1/th>
\n
<th>Header 2</th>
\n
</tr>
\n
<tr>
\n
<td>Data 1</td>
\n
<td>Data 2</td>
\n
<td>Data 3</td>
\n
</tr>
\n
<tr>
\n
<td>Data 4</td>
\n
<td>Data 5</td>
\n
<td>Data 6</td>
\n
</tr>
\n
</table>
\n
</body>
\n
</html>
\n \n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n \n \n \n
\n
\n
Header 1
\n
Header 2
\n
\n
\n
Data 1
\n
Data 2
\n
Data 3
\n
\n
\n
Data 4
\n
Data 5
\n
Data 6
\n
\n
\n \n \n \n `\n }}>
\n
\n
`rowspan` Attribute
\n
\n The `rowspan` attribute is used to make a cell span across multiple rows. This can be useful for creating table headers that cover multiple rows or for merging cells vertically.\n
\n Where, `number` is The number of rows that the cell should span across.\n
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<style>
\n
table {
\n
width: 100%;
\n
border-collapse: collapse;
\n
}
\n
th, td {
\n
border: 1px solid black;
\n
padding: 8px;
\n
text-align: left;
\n
}
\n
</style>
\n
</head>
\n
<body>
\n
<table>
\n
<tr>
\n
<th>Header 1</th>
\n
<th>Header 2</th>
\n
</tr>
\n
<tr>
\n
<td rowspan=\"2\">Data 1</td>
\n
<td>Data 2</td>
\n
</tr>
\n
<tr>
\n
<td>Data 3</td>
\n
</tr>
\n
<tr>
\n
<td>Data 4</td>
\n
<td>Data 5</td>
\n
</tr>
\n
</table>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n \n \n \n
\n
\n
Header 1
\n
Header 2
\n
\n
\n
Data 1
\n
Data 2
\n
\n
\n
Data 3
\n
\n
\n
Data 4
\n
Data 5
\n
\n
\n \n \n \n `\n }}>
\n
\n
\n Using `colspan` and `rowspan` allows you to create more complex and flexible table layouts, improving the organization and presentation of tabular data.\n
\n The `<colgroup>` tag in HTML is used to group one or more columns in a table for styling purposes. This tag allows you to apply styles or attributes to entire columns rather than individual cells. Within the `<colgroup>` tag, you can use the `<col>` tag to specify the properties of each column.\n
\n
Syntax and Structure
\n
\n Here's the basic structure of using `<colgroup>` and `<col>` tags:\n
\n Where, `<colgroup>`: This tag defines a group of columns in the table and `<col>`: This tag specifies column properties within the `<colgroup>` tag. It can include attributes like `span` and `style`.\n
\n
\n And `span`: Defines the number of columns the `<col>` element should span. The default value is 1. `style`: Inline CSS can be used to style the column.\n
\n
\n Output of the following -\n
\n
\n
\n
\n
\n
\n
\n
\n
Header 1
\n
Header 2
\n
Header 3
\n
\n
\n
Data 1
\n
Data 2
\n
Data 3
\n
\n \n `\n }}>
\n
\n
Applying Styles to Specific Columns
\n
\n Here's an example of how to use the `<colgroup>` and `<col>` tags to style specific columns in a table:\n
\n Using `<colgroup>` and `<col>` tags allows for more efficient and centralized styling of table columns, making it easier to maintain and update the styles.\n
\n Styling HTML tables can enhance their appearance and improve readability. You can use CSS (Cascading Style Sheets) to style tables. Here are some common techniques and examples for styling tables in HTML:\n
\n\n
Horizontal Zebra Stripes
\n
\n You can add a background color on every other table row to get a nice zebra stripes effect.\n
\n HTML tables are used to display tabular data in a structured format. Tables are composed of rows and columns, and they use a combination of several HTML tags to define the table's structure.\n
\n
\n The `<table>` tag in HTML is used to create tables that organize data into rows and columns. Tables are useful for displaying tabular data such as schedules, financial reports, and any information that needs to be presented in a grid format.\n
\n
\n
\n
\n
Header 1
\n
Header 2
\n
Header 3
\n
\n
\n
Row 1, Cell 1
\n
Row 1, Cell 2
\n
Row 1, Cell 3
\n
\n
\n
Row 2, Cell 1
\n
Row 2, Cell 2
\n
Row 2, Cell 3
\n
\n
\n
\n
HTML Table Tags
\n
\n
\n `<table>` :\n
\n Defines the beginning and end of a table. This tag is a container for all other table-related tags.\n
\n
\n
<table>\n
<!-- Table content goes here -->
\n
</table>
\n `\n }}>
\n
\n
\n
\n `<tr>` :\n
\n Defines a table row. It is used within a `<table>`, `<thead>`, `<tbody>`, or `<tfoot>` tag to define a row of cells.\n
\n
\n
<table>\n
<tr>
\n
<td>Cell 1</td>
\n
<td>Cell 2</td>
\n
</tr>
\n
</table>
\n `\n }}>
\n
\n
\n
\n `<th>` :\n
\n Defines a header cell in a table. This tag is used to create a cell in a table header, which is typically displayed as bold and centered by default.\n
\n
\n
<table>\n
<tr>
\n
<th>Header 1</th>
\n
<th>Header 2</th>
\n
</tr>
\n
</table>
\n `\n }}>
\n
\n
\n
\n `<td>` :\n
\n Defines a standard data cell in a table. It is used within a `<tr>` tag to define individual cells containing data.\n
\n
\n
<table>\n
<tr>
\n
<td>Data 1</td>
\n
<td>Data 2</td>
\n
</tr>
\n
</table>
\n `\n }}>
\n
\n
\n
\n `<caption>` :\n
\n The `<caption>` tag provides a title or description for the table. It is placed immediately after the `<table>` tag.\n
\n
\n
<table>\n
<caption>This is a table caption</caption>
\n
<tr>
\n
\n
<th>Header 2</th>
\n
<th>Header 3</th>
\n
</tr>
\n
<tr>
\n
<td>Data 1</td>
\n
<td>Data 2</td>
\n
<td>Data 3</td>
\n
</tr>
\n
</table>
\n `\n }}>
\n
\n
\n
\n `<thead>` :\n
\n The `<thead>` tag is used to group the header content in a table. It contains one or more `<tr>` elements.\n
\n
\n
<table>\n
<thead>
\n
<tr>
\n
<th>Header 1</th>
\n
<th>Header 2</th>
\n
<th>Header 3</th>
\n
</tr>
\n
</thead>
\n
</table>
\n `\n }}>
\n
\n
\n
\n `<tbody>` :\n
\n The `<tbody>` tag is used to group the body content in a table. It contains one or more `<tr>` elements.\n
\n
\n
<table>\n
<tbody>
\n
<tr>
\n
<td>Data 1</td>
\n
<td>Data 2</td>
\n
<td>Data 3</td>
\n
</tr>
\n
<tr>
\n
<td>Data 4</td>
\n
<td>Data 5</td>
\n
<td>Data 6</td>
\n
</tr>
\n
</tbody>
\n
</table>
\n `\n }}>
\n
\n
\n
\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/tag-list\";\n\nexport default function HTMLTags() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - Tags | Aspirant's Home\");\n const urls = {\n 'previous': '/html/events'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - Tags
\n
\n
\n An HTML tag is a fundamental building block in HTML (HyperText Markup Language) used to create and structure elements within a webpage. Tags are used to define various types of content, like headings, paragraphs, links, images, and much more.\n
\n
Types of HTML Tags
\n
\n Here is a comprehensive list of the most commonly used HTML tags, along with brief explanations of their purposes:\n
\n
\n
\n
Basic Structure Tags
\n
\n
<!DOCTYPE html> : Defines the document type and version of HTML.
\n
<html> : The root element of an HTML page, containing all other elements.
\n
<head> : Contains meta-information about the document, such as title, scripts, and styles.
\n
<title> : Sets the title of the webpage, shown on the browser tab.
\n
<body> : Contains the visible content of the web page.
\n
\n
\n
\n
Metadata and SEO Tags
\n
\n
<meta> : Provides metadata such as charset, viewport, and descriptions.
\n
<link> : Links to external resources like CSS files
\n
\n
\n
\n
Text Content Tags
\n
\n
<h1> - <h6>: Heading tags, <h1> is the largest and <h6> is the smallest.
\n
<p> : Defines a paragraph.
\n
<br> : Inserts a line break.
\n
<hr> : Inserts a horizontal line, often used for thematic breaks.
\n
<blockquote> : Used for quoted text.
\n
<pre> : Displays preformatted text (preserves whitespace and line breaks).
\n
\n
\n
\n
Formatting Tags
\n
\n
<b> : Makes text bold.
\n
<i> : Makes text italic.
\n
<u> : Underlines the text.
\n
<strong> : Emphasizes text strongly (bold by default).
\n
<em> : Emphasizes text (italic by default).
\n
<mark> : Highlights text.
\n
<small> : Reduces text size.
\n
<sup> : Makes text superscript.
\n
<sub> : Makes text subscript.
\n
<del> : Shows text as deleted (strikethrough).
\n
<ins> : Shows text as inserted (underline).
\n
\n
\n
\n
Links and Media Tags
\n
\n
<a> : Defines a hyperlink.
\n
<img> : Displays an image.
\n
<video> : Embeds a video.
\n
<audio> : Embeds an audio file.
\n
<iframe> : Embeds another HTML page or content, like a YouTube video.
\n
\n
\n
\n
List Tags
\n
\n
<ul> : Unordered list, uses bullets.
\n
<ol> : Ordered list, uses numbers.
\n
<li> : List item, used within <ul> or <ol> .
\n
\n
\n
\n
Table Tags
\n
\n
<table> : Defines a table.
\n
<tr> : Table row.
\n
<td> : Table cell.
\n
<th> : Table header cell.
\n
\n
\n
\n
Form Tags
\n
\n
<form> : Defines a form for user input.
\n
<input> : Collects user input.
\n
<textarea> : Multi-line text input.
\n
<button> : Creates a clickable button.
\n
<select> : Creates a dropdown list.
\n
<label> : Labels an input for accessibility.
\n
\n
\n
\n
Semantic HTML Tags
\n
\n
<header> : Represents introductory content or navigation links.
\n
<nav> : Represents navigation links.
\n
<section> : Represents a thematic grouping of content.
\n
<article> : Represents a standalone piece of content.
\n
<aside> : Represents content aside from the main content.
\n
<footer> : Represents the footer of a section or page.
\n
<main> : Represents the main content of the document.
\n
\n
\n
\n
Multimedia and Graphics Tags
\n
\n
<canvas> : A container for graphics, generally used with JavaScript.
\n
<svg> : Scalable Vector Graphics, used to define vector-based graphics.
\n
\n
\n
\n
Scripting Tags
\n
\n
<script> : Embeds or links to JavaScript.
\n
<noscript> : Provides alternative content for browsers without JavaScript enabled.
\n
\n
\n
\n
Document and Interactive Tags
\n
\n
<details> : Creates a collapsible section.
\n
<summary> : Summary for the <details> tag.
\n
<dialog> : Represents a dialog box or popup.
\n
<progress> : Displays a progress bar.
\n
<meter> : Displays a scalar measurement within a range.
\n HTML text links, also known as hyperlinks, are used to link one page to another. These links are created using the `<a>` (anchor) tag. Hyperlinks can link to other web pages, files, locations within the same page, email addresses, and more.\n
\n
Basic Structure
\n
\n The basic structure of an HTML link includes the `<a>` tag with the `href` attribute, which specifies the URL of the page the link goes to.\n
\n The `href` attribute specifies the URL of the page the link goes to. If the `href` attribute is not present, the `<a>` tag will not be a hyperlink.\n
\n The `rel` attribute specifies the relationship between the current document and the linked document. It is commonly used in SEO and to improve security.\n
\n An unordered list (`<ul>`) in HTML is used to group a set of items in no particular order. Items in an unordered list are typically displayed with bullet points. The `<ul>` tag is used to define the unordered list, and each item within the list is defined using the `<li>` (list item) tag.\n
\n
Basic Structure
\n
\n Here's the basic structure of an unordered list:\n
\n
\n
<ul>\n
<li>Item 1</li>
\n
<li>Item 2</li>
\n
<li>Item 3</li>
\n
</ul>
\n `\n }}>
\n
\n
Example
\n
\n Here's a simple example of an unordered list:\n
\n
\n
<!DOCTYPE html>\n
<html>
\n
<head>
\n
<title>Unordered List Example</title>
\n
</head>
\n
<body>
\n
<ul>
\n
<li>Apple</li>
\n
<li>Banana</li>
\n
<li>Cherry</li>
\n
</ul>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n Unordered List Example\n \n \n
\n
Apple
\n
Banana
\n
Cherry
\n
\n \n \n `\n }}>
\n
\n
Styling Unordered Lists
\n
\n You can style unordered lists using CSS to change the bullet style, padding, margins, and more.\n
\n
Changing Bullet Style
\n
\n You can change the bullet style using the `list-style-type` property. Common values include `disc`, `circle`, `square`, and `none`.\n
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<style>
\n
ul.disc {
\n
list-style-type: disc;\n
}
\n
ul.circle {
\n
list-style-type: circle;
\n
}
\n
ul.square {
\n
list-style-type: square;
\n
}
\n
ul.none {
\n
list-style-type: none;
\n
}
\n
</style>
\n
</head>
\n
<body>
\n
<ul class=\"disc\">
\n
<li>Disc Bullet</li>
\n
<li>Disc Bullet</li>
\n
</ul>
\n
<ul class=\"circle\">
\n
<li>Circle Bullet</li>
\n
<li>Circle Bullet</li>
\n
</ul>
\n
<ul class=\"square\">
\n
<li>Square Bullet</li>
\n
<li>Square Bullet</li>
\n
</ul>
\n
<ul class=\"none\">
\n
<li>No Bullet</li>
\n
<li>No Bullet</li>
\n
</ul>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n \n \n \n
\n
Disc Bullet
\n
Disc Bullet
\n
\n
\n
Circle Bullet
\n
Circle Bullet
\n
\n
\n
Square Bullet
\n
Square Bullet
\n
\n
\n
No Bullet
\n
No Bullet
\n
\n \n \n `\n }}>
\n
\n
Customizing List Item Appearance
\n
\n You can customize the appearance of list items using various CSS properties, such as `padding`, `margin`, `background`, `color`, etc.\n
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<style>
\n
ul.custom-list {
\n
list-style-type: none;
\n
padding: 0;
\n
}
\n
ul.custom-list li {
\n
background: #e0e0e0;
\n
margin: 5px 0;
\n
padding: 10px;
\n
border-radius: 5px;
\n
}
\n
</style>
\n
</head>
\n
<body>
\n
<ul class=\"custom-list\">
\n
<li>Item 1</li>
\n
<li>Item 2</li>
\n
<li>Item 3</li>
\n
</ul>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n \n \n \n
\n
Item 1
\n
Item 2
\n
Item 3
\n
\n \n \n `\n }}>
\n
\n
Nesting Unordered Lists
\n
\n You can nest unordered lists inside other lists to create sub-lists.\n
\n
\n
<!DOCTYPEhtml>\n
<html>
\n
<head>
\n
<title>Nesting Lists Example</title>
\n
</head>
\n
<body>
\n
<ul>
\n
<li>Fruit
\n
<ul>
\n
<li>Apple</li>
\n
<li>Banana</li>
\n
<li>Cherry</li>
\n
</ul>
\n
</li>
\n
<li>Vegetables
\n
<ul>
\n
<li>Carrot</li>
\n
<li>Broccoli</li>
\n
<li>Spinach</li>
\n
</ul>
\n
</li>
\n
</ul>
\n
</body>
\n
</html>
\n `\n }}>
\n
\n
\n Output of the following -\n
\n
\n
\n \n \n Nesting Lists Example\n \n \n
\n
Fruit\n
\n
Apple
\n
Banana
\n
Cherry
\n
\n
\n
Vegetables\n
\n
Carrot
\n
Broccoli
\n
Spinach
\n
\n
\n
\n \n \n `\n }}>
\n
\n\n
\n By understanding and using unordered lists properly, you can create well-structured and visually appealing lists in your HTML documents.\n
\n SVG (Scalable Vector Graphics) is an XML-based format for vector graphics that allows for the creation of two-dimensional graphics directly in HTML. SVG graphics are scalable, meaning they can be resized without losing quality, making them ideal for web use. Here’s a detailed overview of SVG in HTML:\n
\n
Basic Structure
\n
To embed an SVG graphic in HTML, you can use the <svg> element. Here’s a simple example:
SVG is a powerful tool for creating graphics directly in HTML. Its scalability, interactivity, and support for animation make it an excellent choice for web developers looking to enhance the visual appeal and user experience of their websites.
\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/tag/article\";\n\nexport default function Article() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML - Tag | Aspirant's Home\");\n const urls = {\n 'previous': '/html/tag-list'\n }\n path.setPreviousNext(urls);\n }, [])\n\n return (\n \n
HTML - <article> Tag
\n
\n
\n The <article> tag in HTML is used to define a self-contained, independent piece of content that can stand on its own. This tag is commonly used for content that could be independently distributed or republished, such as blog posts, news articles, comments, or forum entries.\n
\n\n
Structure and Purpose of <article>
\n
\n
The <article> tag is a semantic HTML5 element that helps define a block of content that has independent meaning.
\n
An <article> is typically intended for content that makes sense when viewed in isolation from the rest of the page.
\n
Each <article> can contain its own headings, images, links, and other HTML elements, as it is treated as an independent section.
\n
\n\n
Basic Syntax
\n
\n
<article>\n
<!-- Independent content, like a news story or blog post -->
<p>The HTML5 specification introduces new semantic tags to improve web structure...</p>
\n
</article>
\n \n
<article>
\n
<header>
\n
<h2>How to Use Semantic HTML</h2>
\n
<p>Published on October 20, 2024</p>
\n
</header>
\n
<p>Learn how semantic HTML helps improve accessibility, SEO, and readability...</p>
\n
</article>
\n \n
</body>
\n
</html>
\n `\n }}>
\n
\n\n
Output will be the following -
\n
\n
\n \n \n \n \n Articles Example\n \n \n \n
Latest News
\n \n \n \n
Breaking News: New HTML Tag Introduced
\n
Published on October 25, 2024
\n \n
The HTML5 specification introduces new semantic tags to improve web structure...
\n \n \n \n \n
How to Use Semantic HTML
\n
Published on October 20, 2024
\n \n
Learn how semantic HTML helps improve accessibility, SEO, and readability...
\n \n \n \n \n `\n }}>
\n
\n\n
In this example-
\n
\n
Each <article> represents a separate news story.
\n
Each article has its own heading, date, and content, making each one a standalone piece.
\n
\n\n\n
The <article> tag is an essential HTML5 tool for creating organized, accessible, and SEO-friendly content on websites with standalone sections. Use <article> for content that makes sense independently, like blog posts, news items, or individual comments. <article> elements can be nested to represent hierarchical content, like main posts and comments.
\n\n\n\n
\n \n )\n}","import React, {useEffect, useContext} from 'react'\nimport { TitleContext, PathContext } from \"../../../Context\";\nimport { Link } from 'react-router-dom';\n\nexport const pageUrl = () => \"/html/tag/aside\";\n\nexport default function Aside() {\n\n const title = useContext(TitleContext);\n const path = useContext(PathContext);\n useEffect(() => {\n title.setPageTitle(\"HTML -
\n 
\n 
\n 
\n 
\n\n ![](\"https://aspirantshome.com/logo-white.png\"){kind=logo}
\n ![\"Example](\"../assets/wmpaintff078.webp\")
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n