HTML CSS Full Course 2026 | HTML CSS Tutorial | Web Development Course | HTML CSS | Simplilearn

Key Takeaways

Hey everyone, welcome to HTML and CSS full course by simply. Are you thinking about getting into web development? Then you are right on time. With websites and digital experiences growing faster than ever, knowing HTML and CSS is your gateway into the world of coding. These are the building blocks of every modern responsive website. And if you want to create one clean, professional looking pages that actually work, then this is where it all begins. So in this hands-on course, we will guide you through the very basics all the way to advanced HTML and CSS techniques. You won't just learn the what, you will learn the how through realworld projects, step-by-step walkthroughs, and smart interview preparation to boost your confidence. We'll also explore how these two languages are evolving and why they are still at the heart of web design. And by the end, you'll be able to build fully functional web pages, style them like a pro and take your first step towards the future in web development. So let's build something amazing together. Before we commence, if you are interested in becoming job ready fullstack developer, then the full stack mer developer masters program is a great place to start. This six-month online course offered in collaboration with IBM helps you build strong skills in MongoDB, Express.js, React, and NodeJS, also known as the Mer Stack. You learn essential tools like HTML, CSS, JavaScript, Git, and more to build and deploy modern web applications. Through live classes, hands-on lab, and real world projects, you will gain experience with both front-end and backend development. You'll also complete capstone projects in areas like fintech, healthcare, and food delivery to build your git portfolio. So whether you're a fresher or a working professional, this course is designed to fast track your career and help you land a full stack developer role. So guys, hurry up and enroll now and find the link in the description box below. Today we'll be discussing the road map to become full stack professional or developer. So let's understand this with the help of an example. Imagine having the ability to build an entire web application from the user-friendly interface that people interact with to the powerful serverside logic that processes and stores their data. For instance, think about creating a popular app like Instagram. As a fullstack developer, you would design the front end including the layout, messages, and interactive elements while also developing the back end that manages user accounts, stores photos, and handles data securely. Fullstack development is all about versatility and mastering a range of skills across both the front end and the back end. This comprehensive knowledge allows you to ensure that every part of your application works seamlessly together, providing a smooth and engaging user experience. It's a journey of continuous learning and practice. But the reward is a highly sought-after skill set that opens up numerous opportunities in the tech industry. So let's get started with introduction to fullstack development. So guys, fullstack development involves working on both the front end and the backend web applications. As a fullstack developer, you'll handle everything from user interfaces to server management, making you a versatile asset in the tech industry. And if we talk about front-end development, so it focuses on the part of the application that users interact with directly. This includes the layout, design, and interactive elements of a website or app. You'll use languages like HTML, CSS, and JavaScript to create a seamless and engaging user experience. On the other hand, backend development deals with the server side of the application. And this includes managing databases, server logic and application architecture. And you will work with serverside languages such as NodeJS, Python or Ruby and handle data storage with databases like MySQL or MongoDB. And as a fullstack developer, you combine both these skill sets, allowing you to build complete applications from start to finish. And this versatility makes you a valuable asset because you can understand and manage both the client side and server side of applications ensuring they work together smoothly. Now we'll start with the road map and the first thing to learn to become a fullstep developer is learn the basics of web development. So to start your journey as a fullstep developer, you need to learn the basics of web development. And this includes understanding the core technologies that form the foundation of web applications. So the topics to cover are number one is HTML that is hypertext markup language and this is the standard markup language used to create web pages. It structures the content on the web page that is you can learn HTML with understanding the basic tags and how they structure a web page. And for the HTML project you can create a simple web page with headings, paragraphs, links and images. Now going to the next technology that is CSS that is cascading stylesheets. So this language is used to describe the presentation of a document written in HTML. It controls the layout, colors, fonts and overall style of the web page. And to learning that you can explore how to style your HTML using CSS. Learn about selectors, properties and values. And you can style your HTML page by adding colors, fonts and layout adjustments. And then comes the JavaScript. So, it's a programming language that allows you to create dynamically updating content. And you can control multipia, animate images, and much more. And you can understand the basics of JavaScript such as variables, functions, loops, and events. And you can add interactivity to your HTML pages such as form validation for a simple image gallery. And with a solid foundation in these basics of web development that is HTML, CSS and JavaScript, you can now move on to mastering front-end frameworks and libraries that will enable you to build more dynamic and responsive applications. So now you have got the basics of web development. It's time to dive deeper into front-end frameworks and these tools help you build more complex, interactive and efficient web applications. So you can cover the number one that is React. So it's a JavaScript library for building user interfaces particularly single page applications where you need a fast and interactive user experience. And then comes Angular that is a platform and framework for building single page client applications using HTML and TypeScript. And then we have Vue.js that's a progressive JavaScript framework used for building user interfaces and single page applications. If we talk about how you can learn them so you can learn React. You can start by understanding the core concepts of React such as components, GSX, state, and props. And you can build a simple application like a to-do list or a weather app to get hands-on experience. And if we talk about Angular, you can explore Angular's core features such as modules, components, services, and dependency injection. And you can create a simple project like a task manager or a data dashboard to practice these concepts. Now, talking about Vue.js, you can get familiar with Vue.js JS reactivity system directives and components and you can develop a small application like a note takingaking app to apply what you have learned and you could have another examples and use cases that is for React you can build a dynamic user interface that updates in real time and similarly you can go with Angular and Vue.js. Now with a strong grasp of front-end frameworks and libraries you have now equipped to create engaging and dynamic user interfaces. Next we will explore the backend development to understand how to manage serverside operations and databases. So understanding backend development. So after mastering the front end it's essential to understand back-end development and this involves handling serverside operations, databases and application logic which are crucial to building fully functional web applications and we can cover number one is serverside languages. So you can learn languages such as NodeJS, Python or Ruby. So these languages allow you to write the logic that runs on the server and after that we can learn the frameworks and you can explore frameworks that simplify backend development like ExpressJS or NodeJS, Django for Python and Ruby on Rails for Ruby and then comes the databases. So you can understand both SQL that is MySQL or Postgress SQL and NoSQL that is MongoDB databases which are used to store and manage data. Now we talk about learning serverside languages. Here comes the NodeJS. That's a JavaScript runtime built in Chrome. So you can enable JavaScript to be used for serverside scripting. And you can start by building simple serverside scripts. For example, create a server that responds with hello world when accessed. And if we talk about Python, you could have a versatile language known for its readability and efficiency. You can explore basic scripting and automation task. And talking about SQL databases, you can learn to interact with relational databases using SQL and create and manage tables and write queries to fetch data. So with a solid understanding of backend development, you are now equipped to handle serverside logic, manage databases and build complete web applications. Next, we will look into the how to manage databases more efficiently and integrate them with your applications. So now we'll learn database management. So to become a proficient fullstack developer, understanding database management is essential and databases are critical for storing and retrieving the data that your application use. You can start with SQL databases like MySQL and PostSQL which use structured query language to manage data in a structured format like table, rows and columns and learn how to create and manage databases and write queries to insert, update, delete and retrieve data. Designing relational databases for various applications is crucial for managing structured data efficiently. For instance, you can design a database for an online bookstore with tables for books, authors and orders. This will help you understand how to structure data and perform operations like joins and aggregations to retrieve complex data sets. Now coming to NoSQL databases. So on the other hand, we can explore NoSQL databases like MongoDB, which store data in a flexible JSON-like format, making them suitable for unstructured data. You can gain skills in creating and managing collections and documents and perform CRUD operations to handle data efficiently. For example, building a database for a blogging platform where each blog post is a document in a collection will give you hands-on experience in managing unstructured data. This is particularly useful for applications requiring flexible schemas and high scalability and you can integrate databases with applications that are third option. So integrating databases with your application is also crucial. You can learn how to connect your backend server to the database using OM that is object relational mapping tools like SQL for NodeJS, SQL alchemy for Python or active record for Ruby on Rails. So these tools help simplify database interactions and allow you to work with database records as if they were objects in your programming language. For example, creating a restful API that interacts with your database to manage your user data for a web application will give you practical experience in building full-fledged applications that can handle dynamic content and user interactions. Now that you have a good understanding of database management system with learning all three formats that is SQL, NoSQL and integrating database with applications. The next step is to get comfortable with version control which is essential for managing and tracking changes in your code. So version control is essential for managing and tracking changes in your code. You can start by learning it that is a widely used version control system that helps you keep track of different versions of your code and collaborate with others. You can use platforms like GitHub, GitLab or Bitbucket to host your repositories and manage your code online. You can practice creating repositories, making commits, branching and merging changes. Understanding these concepts will allow you to work effectively in teams. Contribute to open source projects and ensure your code is organized and error-free. For instance, for instance, create a GitHub repository for your projects to track changes and collaborate with others seamlessly. And with a strong understanding of version control, you are now ready to explore DevOps practices and deployment which are crucial for delivering your applications efficiently. So after version control, you should learn this that is understanding DevOps. So DevOps practices and deployment are crucial for delivering applications efficiently. DevOps combines software development that is dev and IT operations to shorten the development life cycle and provide continuous delivery. You can learn about continuous integration and continuous deployment CI/CD pipelines which automate testing and deployment processes. You can familiarize yourself with cloud platforms like AWS, Azure and Google Cloud which offer services to host and manage your applications. and practicing deployment on a projects on these platforms will help you understand how to manage servers, databases, and networking. Ensuring your applications are always available and scalable. And with knowledge of DevOps and deployment practices, you're well equipped to deliver robust applications. Next, let's focus on building projects and creating a portfolio to showcase your skills. So, building real world projects and creating a portfolio are essential to showcase your skills and attract potential employers. So start by developing projects that incorporate both front end and backend technologies. Examples include an e-commerce site, a blog platform, or a social media app. Document your projects well, highlighting the technologies used and the challenges you overcame. Create a personal portfolio project or website to display your projects, share your resume, and provide a way for others to contact you. This portfolio will serve you as a testament to your capabilities and make you stand out in job applications. Now that you have a solid portfolio, you are ready to start applying for jobs and advancing your career as a fullstack developer. So keep learning and building to stay ahead in the dynamic field. And now coming to last point that is stay updated and keep learning. So the tech industry is constantly evolving. So it's crucial to stay updated with the latest trends, tools and best practices. Join developer communities and follow tech blogs and participate in online forums like Stack Overflow and Reddit. And you can attend webinars, conferences and workshops to network with other professionals and learn about emerging technologies. And you can continuously take online courses to keep your skills sharp and learn new programming languages or frameworks. So by staying updated and continuously learning, you ensure that your skills remain relevant and you can adapt to the everchanging landscape of fullstack development. So with that guys we have come to the end of this session. You can utilize free resources like YouTube tutorials, community forums and documentation to guide your learning and you can also join courses as I mentioned in the starting that you can have a merc development certification. We are going to discuss the things you need to know to become a web developer. First we will start with basic skills which every web developer must know before moving into more advanced web frameworks. Then we will understand what React is and why it is so popular. After that we will go through another web framework called Angular. Then we will also get to know about a comparatively new front-end framework called Vue. In the end we will go through the front-end developer salary trends which will give you an insight of the job market. So without further ado let's get started. First the basic skills. Let us understand what basic skills are required to become a web developer. There are a few recommendations in that you must learn for either path. These are the common things every programmer should know. The first one is the GitHub. So, Git is a free open-source version control system that enables collaborations in a particular project. It is designed to handle both small and large scale projects. Git is a tool used to save code and create different versions to better manage the feature updates in the product or an application. So followed by the GitHub, the next important thing we have is the data structures and algorithms. A data structure is the location used to store and organize data. An algorithm is a collection of steps to solve a particular problem. Learning data structures and algorithms allow us to write efficient and fast computer programs. So followed by data structures and algorithms, we have the text editor. Get familiar with a text editor of your choice. Visual Studio Code is the top choice for most of the web developers and my personal choice too because of the large support of languages and of course the speed. The text editor is where you write all your code and the terminal is where you execute it. So followed by the text editor, we have the command line. The command line is an important tool to get familiar with. It is how you run your code after writing it on a text editor. The better you are on the command line, the more efficient you'll be as developer. So followed by the command line, we have the HTTP and HTTPS. The HTTP protocol is the backbone of the internet. It handles requests and responses from a web application. It is mandatory for a web developer to have good knowledge of both HTTP and HTTPS in order to build fast and responsive web applications. Now that we know what basic skills are required to become a front-end developer, let's discuss about the most popular front-end library that is the React. Now what exactly React is? So React is a front-end JavaScript library used for building beautiful user interface components. It is an open source meaning it can be used in your commercial projects without any restrictions. It is also component- based and these components can be used again and again promoting code reusability. It is an MVC or model view controller architecture. React is the V responsible for how the application looks and feels for the end user. Now why should you learn React? React has always been in high performance as it uses virtual DOM rather in real DOM. So basically DOM stands for document object model and is used by every internet browser for rendering a web page or an application. React can also be easily integrated with other JavaScript frameworks like NodeJS resulting in the development of a completely new web application including front end and the back end. It is comparatively easy to maintain large scale applications written in React because it highly promotes code reusability and code readability. So followed by react the next important thing we have is the angular we have an idea of what react is but it is not the only framework used for building user interfaces. So now let us know about angular. So now what exactly angular is? Angular unlike React is a fullyfledged framework for web application development which usually does not require additional libraries for implementing additional functionalities like routing. It is also open sourced and backed by Google and is regularly updated resulting in constantly improved performance and addition of new features. In terms of performance, it was pegged to be much slower than React, but with the recent versions, performance seems to be on par with React. Now, why should you learn Angular? Angular is one of the most stable frameworks out there. It is also the most complete, meaning you don't have the need to integrate with other frameworks since it's pretty much includes everything for the web development of a complete web application. Angular backed by Google is safe choice for using in long-term projects since it is not going anywhere anytime soon. Angular is obviously used by Google for its web applications and also used by other large scale companies creating a lot of job opportunities. Now followed by Angular, the next one we have is the view. Now that we know quite a bit about the two popular front-end frameworks, namely React and Angular, let's now go ahead into Vue and learn a bit more about Vue.js library. Now, what exactly is Vue? Vue is a lightweight and open-source progressive JavaScript framework used for developing interactive web user interfaces. It is meant to be integrated with other libraries to develop a complete web application. Like React, Vue.js is mainly focused on the view part of the web application and hence it's bit faster when compared to Angular which is a complete web application solution. Vue.js is commonly referred to as Vue and pronounced as Vue.js or Vue is rightly so. Now why should you learn Vue? Any beginner web developer can easily understand Vue and start building their own web user interfaces like React, Vue also uses virtual DOM resulting in better performance and it also uses the component-based code design promoting code reusability and code readability. Vue.js JJS has become popular in recent times and many companies are starting to use it owing to its lightweight performance and easy integration with other web libraries and frameworks. Now with this let's move into the next section where we will discuss about the front-end developer salary trends. Now that we know what skills we need to become a front-end developer, let's now have a look into the salary trends of a front-end developer. Front-end developers are always in high demand since new web applications are launched and managed continuously. There are generally offered generous salaries across the globe. The salaries also depend on the factors like frameworks, skills and the work experience. The average salary of a front-end developer in India is 5 lak 6,000 rupees perom. The average salary of a front-end developer in United States is $76,929 perom. Website architecture. Website architecture basically defines the design and structure of a website. A website contains two important parts. The front end and the back end. The front end of any website is something the user came across. We can also state it as the client side of any website. Whatever the user of the website sees while going through any particular website is considered as front end. HTML, CSS and JavaScript are the three most popular and mainly used technologies which are responsible for the development of the graphical user interface. The combination of these three technologies is responsible for giving a smooth and appealing user experience. On the other hand, anything the user doesn't witness while going through the website but actually exist somewhere in the website and the server is known as the back end of a website. Whenever we visit a page and send a request for the content, the server goes through the database and then creates a response that is sent back to the browser. The browser then interprets the response and displays the content on the screen. Several technologies are used for back-end development. Few of them are JavaScript frameworks like NodeJS and Nex.js, Python frameworks like Django, Ruby frameworks like Ruby on Rails, C++ frameworks like Apache and many more other technology. Let's move ahead and we'll now go through what HTML is. HTML stands for hypertext markup language introduced in the year 1993 by Tim Bernersley the same person who invented the worldwide web in the year 1989. The first version of HTML was written in 1991 but released later in 1993 as HTML 1.0. HTML got many updates with time and the current ongoing version of HTML is HTML 5.0. HTML is also known as the most basic building block of the web which is used to create the structure of any website with the help of numerous predefined tags. It helps the browser to understand the structure and style of a document or file for viewing over the internet. It allows our web pages to host videos, images and other applications. It also facilitates navigation within web pages or between websites through hypertext. Hypertext refers to the links present in any website to connect different web pages and create a whole website. HTML has a lot of use cases. Web development. HTML code is used to design how a browser displays webpage elements such as text, hyperlinks, and media files. Internet navigation. Users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks. Web documentations. HTML makes it possible to organize and format documents similarly to Microsoft Word. Moving on to the installation part, HTML does not require any special software to work. If you have Notepad installed in your system, that's enough to start using HTML. The best part about HTML is its ease of use. Let's move on to the editors part now and we'll then download a particular editor for a complete HTML playlist. An editor or IDE which stands for integrated development environment is a software application that comprehends facilities to a programmer for software development. Just like Photoshop makes it easier to edit photos in the same way IDE makes it easier for a programmer to write code. The number of idees present in the market today is huge. Some of these editors are Notepad++, Atom and VS Code. These editors are free to use. On the other hand, editors like Sublime are free but with some limitations. To access all the features of Sublime, we have to go for the premium version for the license and then we can use it for software development. My personal choice for an editor is the Visual Studio Code. There's a reason behind using VS Code as an editor. Let me tell you a few advantages of VS Code over other editors. First of all, it is free to use as it is open-source software. So, we can get it at no cost. It supports multiple programming languages. There's nothing like we need any web support or work on different editors for different programming languages. We can use VS code for different languages as well. Extensions are also one of the main reason behind using VS Code. Suppose we want to use a programming language. It does not support. All we have to do is to add an extension and we are good to it. Also does not affect the editor's speed as it runs as a different process. Besides all these properties, one main key factor behind using VS Code is its availability in different platforms like it is available for Mac, Linux and Windows. So I think there are enough features we have discussed till now. There are many more features that we'll discuss while installing and working with VS Code. Let's start with the installation part. Now the installation process for VS Code is pretty simple. Just go to Google and write here VS Code. Press enter and the next page which will open will show us the results. Click on the first link over here. And we are here at the website of VS Code. Right now you can see the download button in front of your screen. You can click on it and you can download the stable version for your operating system from here only or you can go to the other download button present at the top right corner of your screen. Click on the button over here. So you can see here we have all the extensions as well. These are the top extensions. We have to download them inside VS code once the downloading part overs. So here you can see the download starts. Now sit back and relax until the download finishes. Once the download completes, open the setup file from your downloads and it will take us to the license agreement page. Now agree over here, click on next and it will take us to the browser part. So here what we have to do is we have to choose a location for the VS code file to locate. So you can choose any location. So for now I'm clicking on next over here. Now you can see we have a different folder. So we can click on browse and then select it and then click on next. So here we can see we have some additional features. So what we'll do is we'll create a desktop icon. Now you can see other options as well. So click on them as well. Click on next. And now click on install. The installation will start. Once we are done with the installation part, click on finish and the VS code will start automatically. Fine. So here you can see we have the welcome page over here. What we can do is we can open a folder from here. So if you have any folder. So what we can do is we can open it from here. Now what we'll do is we'll create a new file. So here you can see we are in a file. What we have to do is we have to save this file. Now so click on file. Click on save. And now we can save this file at any place or any location we can see. So what we are going to do is we are going to go on desktop. We are going to create a new folder over here. We are going to name it as HTML. Now inside HTML, what we are going to do is we are going to write here the name of our file. So we'll write here first. Then we'll write here the extension. So what we have to do is we have to write here first dot HTML. And here you can see we have an HTML file over here. Right? So you can see we have four options over here. The first one is for opening a folder or any particular location. So click on open folder. Now what we are going to do is we are going to open HTML over here. And you can see we have the HTML folder open. Now we have the file over here as first HTML which we created recently. Then we have the search button over here to search anything or to replace anything. The next button we have over here is for the source control. Then after this we have the debug button as well. And then we have the extensions. So these are the features VS code provides us. And below here we have the accounts option and the settings option. What we can do from here is we can change the font size and different settings. Right now the next button we are going to discuss is the extensions button. Here we can find many extensions given by the VS code studio community. They are free to use. So for now we'll use these two or three extensions. So what we can do is we'll click on HTML CSS support. So you can see I have already installed these extensions over here. So then we have JavaScript and TypeScript nightly and the live server extension. So this extension is pretty important the live server one and the HTML CSS support. You can leave the JavaScript and TypeScriptly for now. So we have to install these two extensions for now. So I have already installed it. You can install them in your computer. Now the next thing we have to do is so we can start writing our code here on I already told you that while saving any file make sure that we are saving that file with a HTML extension. So what we have to do here is we have to put an exclamation mark over here and press enter. And you can see we have the basic HTML code which we'll need in almost every we can simply start with it if we have basic computer knowledge. We got you covered if you are a newbie to HTML. Please stay connected with us and you guys will understand HTML in a very fun and exciting way. Before we go through the different tags present in HTML, let's discuss what a tag is. A tag refers to a special word wrapped in angular brackets which are used to define a particular type of content on a web page. After using a tag in an HTML file, the browser decides how to render or display the content on the screen. The list of tags present in HTML is pretty huge. We'll go through some basic tags in today's video and we'll go through the remaining tags while working with them. So let's start with the most basic tag we have in HTML. You can see here we have a basic program written over here. All the tags mentioned over here are mandatory for all HTML programs. The first thing we have here is the doc type as HTML. You can see it over here. We have written dock type HTML. So this is not an HTML tag but an instruction for the system about the type of document. Basically we are telling the system that this is going to be an HTML document so that all the browsers can know that this particular document is an HTML document and work accordingly. The next tag we have here is the HTML tag. You can see the HTML tag starts from here and goes till end. Right? We have ended this HTML tag at the end of our HTML document. Now this tag is necessary for all HTML documents. If you are working on an HTML document, then this tag is what we are going to need. The HTML tag represents the root and the end of the whole document. This is a container tag that contains all the other tags within it. So this tag is pretty mandatory in all HTML document. Now the next tag we have here is the head tag. You can see the head tag over here and the ending of this head tag is present over here. We have certain tags present inside this particular tag. Now you can see that this head tag contains meta tags and the title tag. Right? You can see the meta tag over here. We have three meta tags and then we have a title tag as well. Now the meta tags doesn't appear on the page itself but only in the pages source code. Meta tags are essentially little content descriptors that help search engines what a web page is all about. Now the next tag we have here is the title tag. The title tag is used to define the title of a web page. Basically, we write the name of a web page inside this tag. For example, if we see here, the title of a web page is document form. If we change the title of this HTML document and write here something like first document. Fine. Now save the program. Open it with live server. Now you can see it over here that the window name is changed to first document. There's no change in the web page itself. So what we are going to do is we are going to reduce the size of a VS code and the browser. We are going to keep them side by side here so that any changes we made in this HTML document are reflected in the web browser. Other tags we can use inside the head tag are the style tag, the script tag and the link tag. Now the link tag is used to link any external CSS file to a HTML page. we have to provide the source of that file and then any styling changes we make in that particular file will get reflected in the web page for that. So let's create a CSS file first. What we are going to do is we are going to create another file over here. Let's name it as style dot CSS. Now this particular file has dot CSS as extension. This will tell the browser that this particular file is a CSS file and we are going to use it for styling purpose. Fine. So we have this style dot CSS over here. Now we are going to link this with our HTML document. For that what we have to do is we have to write here link. So this is the tag. Now we have to write here real and we have to write here stylesheet. Fine. Now the next thing we have to do is to provide the source code of this particular file. So for that we are going to use href. Href is going to be style dot css. Now close this link tag. Now this rail tag over here specifies the relationship between the current document and the link document. Now you can see it over here we have this real as stylesheet. This means that this particular file is a stylesheet and we are going to use this for styling purposes. Another important tag we have inside the head section is the script tag. This tag is used to declare or use any script within the HTML document. Basically used for JavaScript. So it's not necessary to use this tag within the head section only. We can use it anywhere but for now we are going to use it inside the head tag. The syntax is also easy. We have to write it like script src. Now src is going to be the file name. So let's add another file over here. We'll write first dot js. So this will tell the browser that this particular file is a javascript file. So we are going to write here inside this. Now we are going to write first js. Now we have to define the type as well. So type is going to be text and the file is a JavaScript file. So we'll write here JavaScript. Fine. Now close this tag and the script tag will closes automatically. You can see it over here. Fine. The script tag is closed. Keep one thing in mind that we have to close the script tag every time. But the link tag is not necessary to close. The next tag we are going to discuss is the body tag. The body tag defines the document's body. Now you can see it over here. If we go back to HTML page, you can see the body tag over here. Now the body element contains all the content of an HTML document such as headings, paragraphs, images, hyperlinks, tables, lists, etc. There can only be one body element in an HTML document. Any tag we are going to use within the body tag is going to define the structure of a web page. Now the next tag we are going to use is the heading tag. There are six different types of heading tags starting from H1 and goes to H6. H1 refers to the most important heading and H6 refers to the least important. The font size of H1 is the largest and the font size of H6 is the smallest among all. So let's use them all here. What we'll do is we'll write here H1. Now inside this H1 we'll write this is heading one. Save the program and you can see it over here we have a heading in a web page which says this is heading one. Similarly we have the H2 tag as well. So if we write here H2 and inside this if we write this is heading two. Save the program. You can see the change in the font size. You can see the difference over here. The font for H1 is greater and the font for H2 is a bit smaller than H1. Similarly we have H3 and for H3 we are going to write here this is heading say three. Fine. Then we have H4 as well. So we are going to write here H4 and inside this we are going to write this is heading four. Fine. Similarly we have H5 and H6 as well. So we are going to mention them first here. So we'll write here this is heading five and finally we have H6 which is used for heading six. So we are going to write here this is heading six. Fine. Save the program. And you can see the difference in all the headings over here. The size for H1 is the largest and the size for heading six is the smallest. We can use any of these headings according to our needs. Similarly, we have the paragraph tag as well in HTML. It is used to write a paragraph or any content within the web page. The syntax is simple. We have to use the P tag for that. So, if we write here P and now inside this paragraph tag whatever thing we'll write. So, let's say we are writing here this is a first HTML document. Fine. Now save this program and you can see it over here. We have some text present in the web browser. Right? So these are the most basic HTML tags we discussed in today's video. As we said the list of tags is large and we'll discuss them while working with them. So please go through these tags on your own and let us know if you face any issue. We have already discussed about tags in the last video. We came across several important tags in the previous video like the HTML head and the body tags. A simple definition of tags states that a tag refers to a special word wrapped in angular brackets which are used to define a particular type of content on a web page. After using a tag in an HTML file, the browser decides how to render or display the content on the screen. Right? Now, keeping this definition in mind, the definition of an element in HTML states that an HTML element is the collection of a start tag, its attributes, an end tag, and everything in between the tags. Right? So, an HTML element is basically a collection. Let's understand this with the help of an example. What we'll do is we'll write over here inside the body of this HTML document we'll write P. Fine. Now this paragraph tag over here is an example of a tag. It has opening tag and a closing tag. So this whole thing is a tag. This paragraph is a tag over here. Now if we add an attribute to this tag like an ID or a class. So what we'll do for that? We'll write here let's say ID is equals to par one. Fine. This tag now has an attribute within it. ID makes this whole tag unique. We can access the content of this tag with the help of ID attribute. We'll discuss attributes in detail in the upcoming video. For now, let's add some content inside this tag. So, what we'll do is we'll write inside this tag. We'll write over here. Let's say this is a paragraph. Fine. So we'll write here paragraph. So this is the content of a paragraph tag. Now we have four different parts present over here. We have the starting tag over here. So this is the starting tag. This whole thing over here is the starting tag. Then we have attribute. So ID here is the attribute. Then we have the content of this tag. So this is the content present inside whole tag. And then we have the end part of a paragraph tag. So this represents the end part. Right? So the combination of these four things is known as the HTML element. Now let's talk about the case sensitivity of HTML tags. So HTML tags are not case sensitive. So you can see we have paragraph tag over here with small P present inside angular brackets. What we can do is we can write here capital P as well. So these two things are pretty same. So let's write something inside this as well. So let's say we are writing here this is paragraph 2. Fine. So this is the content present inside this paragraph tag with capital P inside angular brackets. Now save the program and you can see we have two paragraphs over here. The first one says this is a paragraph and the second one says this is a paragraph 2. So what we have to do is we have to remove a from here. Save it now. And now it says this is paragraph 2. Fine. So I hope you guys got that HTML tags are not case sensitive. Fine. Now let's move ahead and we'll now discuss empty elements in HTML. Most HTML elements have a start tag and an end tag that indicate where the element begins and where it ends. For example, we have this paragraph tag over here. This is the start of this paragraph tag and this is the end part, right? So, this indicates that this paragraph tag ends over here. Now, there is a group of elements that are exceptions to this rule. So these elements are called empty or void and only have a start tag since they have no content present inside the tag. So they must not have an end tag in HTML. Example of empty elements are like the break tag. We have we have image link and many more such tags. The list is quite long. So what we'll do is we'll add an image using the image tag. So image tag is basically an empty element. So we'll use that particular element and you guys will understand what empty elements are. So as mentioned earlier that empty elements do not require any closing tag. So what we'll do is we'll write here inside angular brackets.g is the tag name. Then we'll write here src. So src over here is attribute. We'll discuss attributes in upcoming videos. So inside this we'll provide the path of our image. So let's say we have this image present inside images folder which is a folder present in a system. So where we are saving all our HTML programs. So the next thing we'll write here is alt. Alt stand for alternate. So if the image is not shown over the browser then the alternate text will be shown. So let's say we are writing here image one. Now we'll close this image tag. So that's all. We don't have to close this particular image tag. We don't have to write here like this. So you can see we don't have to write here like this anything. So if we not write it over here that's fine because image element is an empty element. So let's save the program and you can see we have an image over here in the browser. So the image size is quite large. What we'll do is we'll reduce the site. So we'll write here this for now. We'll discuss all these things in the upcoming videos. So don't worry about it for now. You can see that we have an image over here. So this is our image. This particular image is what we have added using the image tag. So this is done. Now the last thing we'll discuss in this video is the nesting of elements. Nesting means we can use the tag or element within another element. For example, you can see we have a paragraph over here. So this is a paragraph which says this is paragraph 2. Let's add some more things over here. So let's say we are writing over here HTML stands for hypertext language fine and save the program so this is the paragraph over here you can see let me increase the size of our browser a bit so now I think you guys can see it much better now what we'll do is we'll use a particular element or tag within this paragraph tag. So let's say we want this HTML to be cursive and bold in nature. So what we'll do over here is we'll use the B tag over here. So B stands for bold. So what we'll do next is we'll cut HTML from here and we'll paste it inside this B tag. Now save the program and you can see HTML is bold in nature. Right? Similarly, what we can do is we can nest one more tag inside this bold tag. So what we can do is we'll write here I now we have to put this HTML inside both these texts save this program and you can see the HTML is cursive in nature now. So you can see we have three different tags or we can say we have two different tags inside a particular tag. This is known as nesting of elements. So we can do it with HTML as well. I hope you guys must have got an idea about what HTML elements are and how elements are different from tags in HTML. In the last part, we came across HTML elements. We saw the difference between HTML tags and elements. Now that we already have an idea about elements, let's discuss what attributes. Let me write the basic syntax of an HTML element over here first. So what we'll do is we'll write over here. Let's use the paragraph tag. So we are writing over here this is a basic example of elements in HTML. Fine. I hope you guys must have got an idea about what this is. This is actually a basic HTML element. We have nothing else over here. Just a simple example of HTML element. An element consist of a start tag and ending tag and the content within the tag. Right? So this particular thing is an element. Now attributes in HTML refer to the additional properties or characteristics of an element. For example, if we write here, let's suppose we are writing over here. Let's say we are writing over here ID as para one. Fine. Now save this program and you can see over here that we have a paragraph which says this is a basic example of elements in HTML. Now we have this whole element with id as par one or we can give any id of our choice. Now this id is unique for this particular element. For now you don't have to worry much about this ID or any other attribute. Just focus on what attributes are. We are going through the working of attributes basically. So we can use the id of this attribute to style this particular element. So basically this ID attribute defines what this HTML element is. We have to use the style tag element or we can say we have to use the style element for styling this particular paragraph. You will understand it once we go through the tag. So let's do it over here. What we'll do is we'll use the style tag over here. So we'll write here style. You can see this is a style element. Basically it has start tag, it has ending tag. Now we'll write some content inside this particular tag. So let's say we are writing over here hash parallel. Now inside this what we'll do is we'll define some styling properties. So let's say we are writing over here background color is red and we'll write here color. So this color here refers to the font color basically. So we'll write here blue. Now save this program and you can see the paragraph in a browser is changed. So what we did here is inside this style element we access this particular ID. So ID is unique for each element. We'll discuss it later on. So basically this particular paragraph tag has an ID named par. So we are using that particular ID. Then we have some CSS properties. So these properties are used to style a particular element. So we have used it over here. You can see it over here. If I zoom out a bit in the browser, you can see the background color of this whole paragraph is red and the font color is blue. Fine. What we want to say here is this ID over here is basically an attribute. It is used to identify or change a particular element. We have many attributes present in HTML. So we'll go through some of them. Let's say we are adding an image over here. So let's add an image. And you guys will understand about HTML attributes here as well. So we'll write here img. So this is basically an empty element. We have discussed it in the previous part wherein we went through HTML elements. Now what we'll do is we'll write here src. Now src is also an attribute. This attribute is used to provide the system with the source of a image. So if we go back to this particular HTML folder. So here we have a HTML folder. You can see we have a folder here named as images and we have an image present inside this particular folder. Right? So what we have to do is we have to provide this path inside a HTML file. So what we are going to do here is we are going to get back to VS code and inside here we'll write images. So this is our folder name and we have a file name HTML.png present inside that particular folder. So src is the attri