HTML Tutorial for Beginners – Full Course to Learn HTML from Scratch

1. Introduction: Hello, and welcome, friends. My name is Sant Kumar, and I'm excited to welcome you to this brand new HTML tutorial series. Whether you're just starting your journey into web development or looking to brush up on the fundamentals, you're in the right place. HTML is the backbone of every website you visit. It's the foundation that structures content on the web from text and images to forms and videos. In this tutorial, we'll break down HTML step by step, making it easy and engaging. You'll learn how to create your first webpage with basic tags. Structure content using headings, paragraphs and lists. Add links, images and tables to enhance your pages. Use semantic HTML to make your sites accessible and SEO friendly. By the end, you'll have the skills to build a simple web page from scratch and understand how browsers interpret your code. No prior experience, no problem. We'll start from the very beginning. So let's dive in. Your first line of HTML code is just moments away. Ready to bring your ideas to life on the web. Let's get started. 2. What is HTML?: This video, I'll be explaining what is HTML in a very simple and easy way. HTML stands for hypertext markup language. It is the standard language used to create and design the structure of web pages. HTML is separated into two parts. The first is hypertext and the second is markup language. What is hypertext? Hypertext means clickable text or images that link to another webpage, an email address or a file. For example, on a website like example.com, when I click on a text that says more information, it opens a new webpage or URL. This clickable text is called an anchor text, and it's made using a special HTML tag called the anchor tag. Don't worry. We'll learn more about this in the upcoming lecture. What is a markup language? A markup language uses tags and elements to wrap around text. These tags give extra information to the browser about how to display that text. With markup, we can do things like make text bold or italic, create headings and paragraphs, display lists, add links, and much more. In fact, everything you see on a webpage, like headings, paragraphs and lists is created using markup. But HTML is not alone. To build a complete website, we also need two more files, CSS, cascading style sheets, and JavaScript. CSS handles how the website looks like colors, fonts, layout and design. JavaScript adds interactivity like button clicks, sliders, animations or live content updates. Together, HTML, CSS, and JavaScript form the foundation of all modern websites and web applications. So how does it all work? When you open a web page in your browser, the browser reads the HTML code, understands the tags, and renders the content you see on your screen. 3. History of HTML: Previous video, we learned what HTML is. Now, let's talk about the history of HTML, when and how this language started and who created it. Let's travel back to the beginning of HTML. HTML began in the year 1991. It was created by a scientist named Tim Berners Lee, who worked at Cern, a European research center. He thought of creating a system where scientists from around the world could share information with each other and this idea gave birth to the worldwide web, the language that was created for this web was called HTML. The very first HTML document was extremely basic. It only had headings, paragraphs and links. HTML wasn't created once and left unchanged. Over time, it evolved through many improvements and updates. Let's take a look at its version wise history HTML 1.0 launched in 1993. This was the very first version of HTML. It had very basic features like text formatting, headings, images, and links. It was simple, but it started the web revolution. HTML 2.0 released in 1995. This version added more structure to web pages. It introduced forms and tables, allowing user input and better layout. HTML 2.0 became the first official standard. HTML 3.2 released in 1997. This version was a big update. It supported JavaScript, applets, and advanced table layouts. It made websites more interactive. HTML 4.01 released in 1999. This was a very popular version. It introduced CSS support, better forms, and accessibility features. Websites started looking more modern XHTML 1.0 in the year 2000. This was a stricter version of HTML written in XML format. It required clean and well structured code. HTML five officially launched in 2014. This is the most important update in HTML history. HTML five brought us video and audio tags, Canvas for graphics, responsive design, geolocation, and many semantic tags like header footer and section, and it changed the way we build modern websites and web apps. HTML living standard. Today now, HTML is continuously evolving. We don't wait for versions anymore. The latest features are added gradually and supported by modern browsers. Now you might be wondering who maintains HTML? The answer is HTML is maintained by the w3c, worldwide web Consortium. It is a global organization that defines web standards, ensuring websites work properly across all browsers. 4. VS Code Installation: Know the history of HTML. Now we need to install an HTML file editor. For this, I'll be using Visual Studio code or VS code. It's completely free and very easy to use. But if you don't want to use VS Code, no worries. You can also use Notepad plus plus. It's another good editor for HTML files. First, search viscode on google.com. Now, click on the official Visual Studio code website. On the download page, you'll see options for different operating systems. If you're a Windows user, download the Windows setup file. For Mac users, choose the MAC version. And for Linux, select the version that fits your OS. Once the download is complete, install the software. After installation, open VS code and you'll see its interface. To create a new file, just go to the file menu and click New Text File. If you want to open an existing file, click on Open File and choose your HTML file from your computer. Now, let's install one useful extension that allows you to preview your HTML page directly inside VS code. Click on the extensions icon on the sidebar. It looks like a square with four boxes. In the search bar type HTML preview, and here you will see the list of plugins. Now, click on this HTML preview extension and then click the Install button. Once it changes to uninstall, it means the extension has been installed successfully. Now, let's customize some settings for a better coding experience. Click on the gear icon in the bottom left corner and go to settings. Under the file section, you can choose when your file saves. I personally prefer on focus change. You can also scroll down to change the font size, and you can set any font size. And here you can choose your favorite font family also. Now, click on the gear icon again, then go to theme and Color Theme. Here you can explore and choose whatever theme you like best. But I prefer using the dark modern theme, but you can select other theme also. And that's it. You're now all set up to write, edit, and preview your HTML code in VS code. In the next video, we'll understand the basic structure of HTML page. 5. Html Document Structure: Discuss basic HTML document structure. This is a basic HTML page. You can find this page on exercise folder now, I explain its document structure. This Doc IP declaration tells the browser about the HTML version being used. In this case, it specifies that this is an HTML five document. This HTML element is the root element of the document. The Lang attribute specifies that the documents language, N means the English language. You can set any language you want by changing the language code period, such as FR for French, S for Spanish, the head section contains meta information about the webpage. Metadata meta Charset UTF eight defines the character set, ensuring support for special characters and multiple languages. Title sets the title displayed in the browser tab. Head section also contain the links to style sheets or scripts, and the body section contains the visible web page content like headings, paragraphs, images, and links. To save this HTML page, click on file and select Save. And you can choose any name. Let's choose Basic. And for HTML pages, extension should be dot HTML. Now save now go to the folder and double click on the T HTML file to open it in the browser. You can see the web page. 6. How to Write Html Tag: This lesson we'll learn about HTML elements, which are the building blocks of every HTML document. To create an element in HTML, we need two parts an opening tag and a closing tag. Let's take an example using the paragraph tag. First, write the less than symbol, then the tag name like P, and then the greater than symbol. This is the opening tag. To close the element, again, start with the less than symbol, then add a forward slash, followed by the tag name, and finally, the greater than symbol. This is the closing tag. Now, we place the content between the opening and closing tags. This entire structure is called an HTML element. Most HTML elements follow this structure. They have both an opening and a closing tag, and they contain some content inside, but some HTML elements do not contain any content. These are called self closing elements. For example, the BR tag, which is used to insert a line break, the HR tag, which is used to insert a horizontal line. These tags don't need a closing tag. They close themselves. So that's how HTML elements work with opening and closing tags or sometimes self closing ones. In the next lesson, we'll learn how to write HTML comments. 7. Comment In Html: This tutorial, we learn how to write a comment in HTML. A comment in HTML is a special line of text that is not displayed in the web browser. It is used to leave notes or explanations for yourself or for other developers. To write a comment, we need less than symbol then exclamation mark and dash dash and for closing. We need dash dash and greater than symbol. Here, you can see the comments are not shown on the web page, but they help us understand the code better. In the next tutorial, we learn about heading elements. 8. Headings In Html: This video, we'll learn about HTML headings. There are six types of headings in HTML, H one, three, H four, H five, and H six. Let's write the H one tag. First, write the H one opening tag, then the closing tag, then place the content and save the HTML file. In the browser, you can see the H one heading text. Now, let's write the H two tag, H two opening tag and the closing tag, then place the content. Here's something cool since we've already installed the HTML preview extension in VS code, so we can preview our code directly inside the editor by clicking the preview icon. There is no need to switch to a browser every time. Now write H three, H four, H five, H six. Here you can see that the H one tag has the largest text size and is used as the main heading of the page. All other headings like H two to H six are considered subheadings and their sizes gradually decrease based on their level. We usually use only one H one tag per page to highlight the page's primary focus. And one more question, why do we use headlines in HTML structure and organization. It helps divide content into sections. SEO search engine optimization. Search engines give more importance to H one for improving ranking. Accessibility and readability. It makes text clear and easy to scan. 9. Paragraph, br & hr tags: Now you can see that I've placed some text inside the body tag. Basically, there are four separate pieces of content like four paragraphs. But when we preview the file, only one big paragraph appears. Why does this happen? Because the browser only renders proper HTML tags, not plain text. So to display the content correctly, we need to use the paragraph mean P tag. Let's fix this now. First, write the opening tag, then write the closing tag. Now you can see two paragraphs. Let's add another P tag here. And here and here again. Great. Now you can see four paragraphs, each spaced nicely below the other. There's one more thing I want to show you. If you want to move just part of the text to the next line without creating a new paragraph, we use the BR tag. Write the BRTag right here. Please note BRTag is a self closing tag, so it doesn't need a closing tag. Now you can see the text has moved to the next line. If you add another BR tag, the text moves down by two lines similar to a new paragraph. But remember, this is not a good practice for creating space between blocks of content for proper spacing and structure. Always use the P tag for paragraphs, not multiple BR tags. One last tag for this lesson, if you want to divide sections of text with a horizontal line, you can use the HRTag. Let's write the HR tag right here. You'll see a horizontal line appear across the page, which is great for visually separating content. So that's it. Now we learned how to use paragraphs, line breaks, horizontal lines. I hope this helped you understand how to structure text properly in HTML. See you in the next lesson. 10. Strong & Bold Tags: HTML, we use the strong tag and bold mean B tag to make text bold. The display of both tags looks the same. In the first paragraph, I will use the strong tag. Suppose I want to make this text bold. Let's write the opening tag and then the closing tag. You can see that the text is bold. In the second paragraph, let's use the bold tag, write the opening tag. And the closing tag. Now, in preview, and you can see that both look the same. Now, the big question is, when should we use the strong tag and when the bold tag? To use the strong tag. If you want to highlight a piece of text with strong importance or urgency, use the strong tag. It is ideal for warnings, critical instructions or key terms that require extra attention for bold tag. When you might use it to highlight keywords or names in a context where only the visual style matters without adding any semantic meaning. See you in the next lesson. 11. Italic (i & em) Tags: This lesson, we'll learn how to make text Italic using two different tags, I and tag for ITAg. Now, write the opening tag. And the closing tag. You can see that the text has become italic for IM tag. Now, write the opening tag and the closing tag. In preview, you can see that both look the same. But here's the important question. When should you use ETag and when should you use tag for Itag I want to indicate a change in voice or mood or when displaying text that is in a different language, technical terms, thoughts or titles of works where no semantic emphasis is needed, foreign words or phrases, technical terms or name. Now tag. The tag is a semantic element used to denote emphasis on a word or phrase. This tag not only renders text in Italics by default, but also conveys that the text should be stressed or highlighted, which can be important for screen readers and SEO. That's all for tutorial on Italic tags in HTML, and I'll see you in the next lesson. 12. Block Vs Inline Elements: HTML, every element has a default display behavior. Some elements take up the full width of the screen like bricks in a wall, while others flow like words in a sentence. These are referred to as block level and inline elements. Let's break them down. Block level elements. Start on a new line like a paragraph break. Take up the full width available left to right. Can have height, width, margins, and padding adjusted. TV, paragraph, heading, list item, table section tags, et cetera. Now in line elements. Flow within text, no line breaks before, after. Only take up as much width as needed. Ignore top bottom margins and fixed dimensions. Span strong, anchor, M, IMG, button tags, et cetera. In this text, I'm using the paragraph tag. You'll notice that the P tag starts on a new line and takes up the full width available. Now, let's use the strong tag. You can see this in line element only takes up as much width as needed with no line break. I hope you've understood the difference between these two tags. 13. lists In Html: Are mainly three types of lists in HTML. First unordered list, second ordered list, third description list. First, let's talk about the unordered list. An unordered list displays items using bullet points. It doesn't show any specific order or ranking. Let's write the code for it. First, write the UL opening tag. Then the closing tag, UL stands for unordered list. Now, inside the UL tags, we'll use the LI tag. Li stands for list item, write the I opening tag, then the closing tag, and place your content in between. Let's add a few more list items the same way. You can see that all the items are displayed with bullet points. Now let's move to ordered lists. An ordered list shows items in a specific order using numbers or letters. It's just like an unordered list, but instead of UL, we use OL, which stands for ordered list. Now use OL here and OL here. By default, it shows one, two, three, but we can customize it using the type attribute. Now write type here and give value small A. Now you can see that its order has changed to alphabetical for Roman number. Use small I and check the preview. You'll see Roman numerals. You can also use A and I. Let's use A, see the preview, and I see the preview. Finally, let's learn about description lists. A description list, also known as a definition list is used for listing terms and their corresponding definitions. It uses a combination of DT for the definition term and DD for the definition description. Please note that I is not used in description lists. Now write DL opening tag and closing tag. DL mean definition list. Then write DT opening tag and closing tag. DT mean definition term. Then place the content. Now write DD opening tag and closing tag, then place the content. Now repeat the process again and you can see the preview. I hope this tutorial helped you understand the different types of lists in HTML, see you in the next lesson. 14. Blockquotes Tags: HTML, we use the Q and blockquote tags to quote text. If you want to quote a short line or in line text, use the Q tag. Let me show you an example. Now, if we want to quote this text, then use the opening Q tag and the closing tag. This tells the browser to display it with quotation marks. So remember, for short quotes, use Q with an opening and closing tag. Now, if you want to quote an entire paragraph, use the blockquote tag. This tag is used for long quotes often from a book, article 0R person. Now wrap the paragraph with block quote tag. In the browser preview, it looks plain at first, but if we style it with CSS, we can make it look beautiful. 15. Sup & Sub Tags: HTML, we use the SUP and SUB tags to create superscripts and subscripts. These tags help us show texts slightly above or slightly below the normal text line. They're especially useful in math equations, chemical formulas or footnotes. Let's start with the SUP tag, which is used for superscript text. It moves the text a little above the normal. For example, let's write Einstein's famous equation. E equals MC squared. Now we need to show two slightly above for this, now write the opening SUP tag and the closing tag. See the preview. Next, we have the SUB tag, which is used for subscript text. This moves the text a little below the normal line. Let's try a chemical formula to write the chemical formula of water, which is h2o. Now write the opening SUB tag and closing tag and see the preview. Let's move to the next lesson. 16. Date & Time in Html: HTML five, the time element is used to represent dates, times, or durations in a machine readable format. This element allows you to embed both human friendly datetime information into your document, which can be useful for browsers, search engines, or scripts that need to process the date time information. Let's start with a simple date. First, write the opening time tag and the closing tag. Then we define the date using the datetime attribute, and we use this format, year month date. Now let's write a time. First, we write the time tag, and then we define the time using the date time attribute. And we use this format HH colon M to represent hours and minutes. Now let's combine date and time. First, we write the time tag, and then we define the date and time using the datetime attribute. For datetime, we use this format, date T and time period, where the T separates the date and time components. I hope you understood how the time element works in HTML five. It makes your content more meaningful and structured, not just for users, but also for machines. Let's move to the next chapter. 17. Url In Html: You ever wondered how your browser knows exactly where to take you when you type a web address? That's all thanks to something called a URL and URL stands for Uniform Resource Locator. It is the address of a resource like a webpage, image or file on the Internet. Just like we need a home address to visit someone's house, the browser needs a URL to visit a specific webpage. This is a simple URL. Et's break it down step by step. The first part is the scheme or protocols which tells the browser how to access the resource. The most common schemes are HTTP and HTTPS. HTTP stands for hypertext transfer protocol. It is the system used by web browsers and servers to send and receive information like web pages, images or text over the Internet. When you type a URL starting with HTTP, your browser knows to use this protocol to communicate with the server, HTTPS, like HTTP, but with extra security. The S at the end means secure. It uses SSL or TLS encryption to keep your data safe when it travels between your browser and the website's server. Why is HTTPS important? It protects sensitive data like passwords, credit card information or personal details. It builds trust, especially for e commerce or login websites, and some other common schemes are FTP for file transfer, mail to for sending emails. Then comes the domain name. Now let's discuss the complex URL. The first part is the protocols, then domain name, then port optional. Sometimes you'll see a port number like 8080. This is a specific door to a server. If not given browsers use default ports like 80 for HTTP or 443 for HTTPS. The path specifies the exact page or file like it tells the server, I want this specific resource. After a question mark, we have query parameters. These pass extra info to the server often used in searches or filters. Finally, a fragment points to a specific section on a page. Now you might be wondering how exactly does a URL work behind the scenes? When you enter a URL in your browser and hit Enter, here's what happens. The browser checks if the URL is valid. Then it contacts a DNS server to find the IP address of the domain. Then it opens a connection to that server using the specified protocol like HTTPS. After that, it sends a request to load the page or file. Finally, the server responds with the content and the browser displays it to you. So that's it. You now know what a URL is and what each part means. In the next lesson, we'll learn how to make clickable links using URL. 18. Anchor Tag: HTML, we create hyperlinks using the A tag, which is called the anchor tag. It allows users to click and navigate to another web page, a file, an email address, or even a different section of the same page. Now write the opening anchor tag and the closing tag. Then place the link text. And instead of text, you can also use an image as a link. Then use the HRF attribute. The HRF attribute stands for hypertext reference, and this holds the URL or the path to where you want the link to go. Think of it as the destination of the link. Then you place the URL inside quotation marks. In the browser, I click on the Link text, and the example.com site opens and one more thing. You can also create a link that opens the user's email app. Write the opening anchor tag and the closing tag. Write link text between the tags. Then use the HRF attribute here, write mail to Colon someone at example.com. When the user clicks this link, it will open their email app with the address already filled in. In the next lesson, we'll dive deeper and using the title and target attributes. 19. Title & Target Attributes: This lesson, we'll learn about two useful anchor tag attributes, the title attribute and the target attribute, the title attribute. When you want to give users more information about a link before they click it, use the title attribute. Write the title attribute, and give any meaningful description. When someone hovers over this link, most browsers will show a small tool tip with your description. This is especially helpful for accessibility. Let's discuss the target attribute. The target attribute in HTML determines where a link should open when clicked. It's like giving your browser directions. Should it load the new page right here in a fresh tab or even in a hidden frame? There are mainly two types of target attribute first self, second blank. Let's break it down. Target self. This value is the default setting for the target attribute. Write the target attribute and give value self. When I click on this link, the current webpage disappears, and example.com takes its place. Mean sites opens in the same window when to use. Simple navigation like moving between pages on your own website. When you don't want to clutter the browser with extra tabs, now let's discuss the blank target. It opens the link in a new window or tab. Let's define the target blank. When I click on the Link text, the site opens in a new window. Why use it When linking to external websites. And for references, resources or tools that users might want to check without losing their place. Important security note. Always add ARL nupener when using blank to prevent security risk. For advanced users, the target attribute can also control frames. Parent opens in the parent frame if you're using nested frames. Top breaks out of all frames and loads the link in the full window. Custom name, example, opens in a specific e frame. Now you're ready to make smarter user friendly links. 20. Html Attributes: HTML attributes are special keywords used inside an elements opening tag to modify its behavior, appearance, or provide additional information. They act like settings or properties for HTML elements, helping you control how they function or display. Here are some key points written as an attribute name and value. Some are global while others are element specific can change functionality, accessibility, or styling. For example, in this URL, HRF, target, and title are all attributes. In HTML, some global attributes can be used with almost any element. ID to uniquely identify an element. Class to group elements for styling or Javascript. Style to apply inline CSS, ref to give a link inside the Atag SRC to specify the source of an image inside the IMG tag, Alt to provide alternate text for an image, title to show a tool tip on Mouse Hover, target to open a link in a new tab. 21. Block Vs Inline Elements: HTML, every element has a default display behavior. Some elements take up the full width of the screen like bricks in a wall, while others flow like words in a sentence. These are referred to as block level and inline elements. Let's break them down. Block level elements. Start on a new line like a paragraph break. Take up the full width available left to right. Can have height, width, margins, and padding adjusted. TV, paragraph, heading, list item, table section tags, et cetera. Now in line elements. Flow within text, no line breaks before, after. Only take up as much width as needed. Ignore top bottom margins and fixed dimensions. Span strong, anchor, M, IMG, button tags, et cetera. In this text, I'm using the paragraph tag. You'll notice that the P tag starts on a new line and takes up the full width available. Now, let's use the strong tag. You can see this in line element only takes up as much width as needed with no line break. I hope you've understood the difference between these two tags. 22. Images In Html: Images are a fundamental part of web design, and HTML provides various ways to include and manage them on web pages. They visually convey information, enhance user experience, and make content more engaging. The basics of the IMG tag, the IMG tag is used to embed images in an HTML document. It's a self closing tag. It doesn't require a closing tag. Now write the IMG tag and use the source attribute. This SRC attribute specifies the source mean path or URL of the image. It's the only required attribute for the IMG tag to function. Without it, the browser won't know what image to display. Then we use the path, which could be local or external for local, either we use the image name or the path of the folder where the image is saved. Now write the image path and remember to save your HTML file in the correct location relative to your images. And you can see in the preview. Now, let me explain about the folder path. Suppose we want to display this image. You can see that I have placed this image inside a folder named blog. Here, the image path will be blogs Image Name. Let's write the path. One important thing to note is that your HTML page should be saved outside the blog folder. Otherwise, the path will not work. In HTML, the location of the HTML file must also be correct along with the image path. Only then will the image display properly. For external images, use the full URL, you can see in the preview. Now you can easily add and manage images in your web projects. 23. Alt, Width ,Height & Title Attributes: IMG tag supports several attributes to control how the image is displayed and behaves. Let's explore them in depth. Alt, alternative text. The Alt attribute provides alternative text for images, which improves accessibility by describing the image for screen readers, aids SEO by helping search engines understand the content and displays placeholder text if the image fails to load. Write the Alt attribute, and here you can give meaningful description. Please note, if the image is purely decorative, you can use an empty Alt attribute but never omit it entirely. Width and height. It specifies the images width and height in pixels or sometimes as a percentage, though pixels are more common and helps the browser reserve space for the image before it loads, preventing layout. Right now, you are viewing the image in full browser size. You can set the images width and height to keep it at a fixed size. Set the width by any a value like 400 with a unit like Px or percent depending on your needs. For the height, you can either assign a value or set it to auto. Let's set it auto. Now you can see in the preview that the image width has been set to 400 pixels. Title tool tip text. It displays a tool tip when the user hovers over the image. Usage optional, but useful for additional context. Write title and give meaning full description. When I hover it, you can see the description. 24. Images Support Format: HTML supports various image formats via the IMG tag, depending on browser compatibility. JPEG slash JPG, best for photographs, realistic images with gradients, PNG ideal for images with transparency or sharp edges. GIF supports simple animations and transparency, but limited to 256 colors. WebP modern format with superior compression and quality widely supported now. SVG, vector images use math based paths and are ideal for logos, icons and illustrations. AVF AV one image file format, next gen high efficiency images, superior compression and supports HDR, transparency and animation. But these images have limited browser support, mean newer browsers only. 25. Responsive Images: HTML, the size of an image is very important. If you are opening a website on a large screen like a monitor or laptop, the image resolution and size should be high so that the image looks clear and sharp as high resolution images contain more detail and color. However, if you open the website on a mobile device, especially in a low network area, high resolution images can take longer to load. To solve this problem, we can reduce the image size and resolution for smaller devices using HTML. Nowadays, there are many different screens with varying pixel densities, some with one X, others with two X, three X, or even four X pixel density. To handle this, we can use responsive images in HTML, so that allows the browser to choose the best image source based on screen size, resolution, or other factors. Let me explain in two way. For pixel density, lets the browser choose the best image based on the pixel density. Now we have multiple versions of an image, and the browser picks the most suitable one. In here, hit Enter, then write SRC set. The SRC set attribute allows the browser to choose the most suitable image based on the device's screen size and resolution. Then call the default image and define the one by one resolution. Then call a double higher resolution image and set the two by two resolution. And for the third set three times resolution. Now open the page in MosleFurFox and right click and go to inspect and click on this icon. Here you can change DPR to display high h image like DPR two and DPR three. Here, you can see the images are being rendered differently depending on the device's pixel ratio DPR. Now for sizes, lets the browser choose the best image based on the screen size. First, we define the SRC set attribute by specifying the default image followed by an image with 400 W, which means 400 pixels wide. Then the second image with 800 W size, and then the third with 1,200 W. After that, we use the sizes attribute, which specifies the intended display size for each sauce. In sizes, we first use max width to define the browser width like 600 pixels, then followed by the image size. Then we repeat with another max width and size. And finally, we define the image size. Now, save the image and open it in Mozilla Firefox. Right click on the image and select Inspect. Then click on the device toolbar icon. Here, you can see the browser width in pixels. When you drag the width bar, the image changes according to the browser size as defined in the max width conditions in the sizes attribute. 26. Picture Tag : Want to call different images for different screen sizes, then we use the picture tag. Right now, you are looking at this image, and we want to call it for large screens. This is for tablets and this size for mobiles. Let me explain how to call them. First, wrap the picture tag. And the picture tag is ideal because it allows you to specify multiple image sources and define conditions like screen width for when each image should be used. And then the source and SRC set attributes and define the image and write media and set conditions like min width, then define value. Now repeat the process. And again, now go to Mozilla Firefox. And when I drag the width sidebar, you can see images are changing with according browser width or screen size. 27. Table In Html: Going to learn everything you need to know about HTML tables. Mean how to create them, style them, and organize them, and even make them more accessible and powerful by using attributes like colspan, rowspan, and structural tags like Thad, T body, and TFoot. A HTML table allows you to organize data into rows and columns, just like a spreadsheet. It's a powerful way to present information clearly on a web page. For example, if you're displaying a calendar, a product chart or a student mark sheheet using a table makes your data much easier to understand. HDML table structure and elements, table tag the container for the entire table. TR tag defines a table row. TD tag defines a table data cell. T tag defines a table header cell, bold and centered by default. T head groups header content. T body, groups the main body of the table. T foot groups footer content. Now we will create a table like this one. You can see that this table has five rows and each row has four columns. In the Hader, the TH tag is used, which makes the font bold. Now let's start building a table from scratch with five rows and four columns. To begin, write the opening and closing table tags. Since we want five rows, so we will write five TR mean table row tags, write the opening and closing tags. Now, copy the TR tag and paste it four times. And we need four columns. So in this TR, we'll add four TD table data tags. Now, write the TD tags and copy the TD tags and paste it three times. One for each column, insert the text. In preview, you can see the table with one row. Quickly build the table, you can copy the structure of four TD tags, paste them inside this TR tag. Change the content for each cell. Repeat the process. You can see the table here. Right now, the table you see has content that is very close together because no width has been defined. To see it properly, let's define the width attribute. In unit, you can use either percentages or pixels. Let's use 70% and you can see the preview. Now use 500 with a unit Px and you can see the preview. Please note that if we set the table width in percentage, the table width will adjust based on the browser width. For example, when I drag the sidebar to resize the browser, you can see the table width automatically adjusting according to the browser width. Table border, we can add a border to the table by setting border and give one or any other value. See the preview. In an HTML table, there is no space inside cells by default, making content appear cramped. Then to fix this, use the cell padding attribute, which adds space between the cell's content and its border and set a value like five and observe the spacing in the preview. Cell spacing. In addition, we can add space between the cells using the cell spacing attribute. This creates a small gap between each cell, which can be increased or decreased by changing the value of cell spacing. Now define the cell spacing and give any value like five or for a cleaner look. Let's set cell spacing to zero. Now we have a perfect table with controlled spacing. I'm telling you about cell padding and cell spacing just for knowledge. In modern web development, it's better to avoid them and use CSS for spacing and layout instead. Table alignment. Let's learn how to position tables on a webpage using alignment attributes. By default, tables appear on the left side of the page, but we can move them. To change their position, use the align attribute in the table tag with one of three values, left, right, or center. For example, write align, give value right. This will align the table to the right. Now you can see that the table has been we aligned. 28. Th Tag In Table: Let's talk about TH tag, which stands for table header. It is used to define header cells in a table, typically placed in the first row to label each column in the table rows instead of using TD write TH. By default, text inside TH is center aligned and bold. If you want to change the alignment, you can use the align attribute and give value left or right. You'll notice in the preview that the text alignment changes accordingly. 29. Header, Body & Footer Tags In Table: Tables in HTML can be more than just rows and columns. We can organize them into three logical sections for better structure and accessibility. First T head, table header, second te body, table body, third te foot table footer. With the help of these tags, we can split a table into three sections. This is a standard table with rows and columns. First, wrap the first row with the T head tag. Then excluding the last row, wrap the remaining middle rows with the T body tag. Finally, wrap the last row with the T foot tag. In the preview, you may not see any visual changes, but these tags help structure the table semantically by grouping rows into T head, T body, and TFoot and making it more organized and meaningful for browsers and screen readers, we can style each section of the table using CSS to improve both its appearance and structure. For example, let's use CSS. You can see I have applied specific styles to the table header, body and footer using the T head, T body, and T foot tags. This makes it easy to see the difference between the tables header, body and footer. It gives your table a clean and professional look. Styling isn't just for looks. It also helps with accessibility. Screen readers can understand structure tables better, making them easier for people with disabilities to use. And when dealing with large tables, modern browsers can optimize performance. For instance, they may keep the header and footer visible while loading or scrolling through a large T body section. So by using proper structure and styling, you're not only improving the appearance of your table, you're also making it more readable, accessible, and efficient. Without these, tables lack organization, accessibility suffers and rendering styling becomes harder. For example, a screen reader might misinterpret data or a long table might be unusable without fixed headers. 30. Merge Cells In Table: Learn how to merge cells in an HTML table using two important attributes, colspan and rowspan. Cool span is used to merge cells horizontally across columns. Row span is used to merge cells vertically across rows. These attributes can be applied to both T eight and TD elements inside a table row. Now, let's start by merging two columns. To do this, we use the colspan attribute. Inside the TD tag, right, colspan, and give value two. Then remove the TD tags from that row because it's now merged into one cell. You can see that the two columns are now combined into a single cell. Next, let's merge two rows. For that, use the rowspan attribute in the TD tag and set its value to two. Now go to the next row and remove the TD that would have matched this one. And just like that, the two rows are merged into one tall cell. Now add one row to this table. Write grand total in the first column and place the total value in the last column. Now, let's merge three columns in the last row. In the first TD tag of that row, we write colspan three and remove the other two TD tags from that row. In the preview, you can see that three columns have been merged into one. To center this text, we use the align attribute and set the value to center. Now you can see the text is aligned to the center. If we want to align the text vertically, top or bottom, we use the V align attribute. It supports three values top, middle, and bottom. Let's use V align top, and you will see the text is now aligned to the top. 31. Form In Html: Forms are essential in HTML because they enable interaction between users and websites. Here are the key reasons why we need HTML forms. First, user input collection. Forms allow websites to gather information from users such as contact details, login credentials, and search queries. Second, data submission. Forms provide a structured way to send data to servers for processing and submit information to databases. Third, interactive web applications, fourth standardized user interface, fifth client side processing. Let's make a simple form in HTML, which will have two fields username and email. To create a form, first, we write the form tag. In HTML form element is used to collect user input, which can be sent to a server for processing, for example, registration login surveys. Next, we write the label tag. The label tag defines a text label for an input field. It describes what the user should enter select in the input field. Let's write user name here. After that, we write the input tag. Then we define the type attribute. The type attribute defines what kind of input field the user will see and what kind of data they can enter. Here, we will use type text. Text defines a single line text input. Examples include name, city, et cetera. Now we will define the name attribute. The name attribute is used to identify the data when the form is submitted. We can give the value user name here. We also define an ID attribute and give value user name. The ID attribute gives an input field or any HTML element, a unique identifier on the page. Unique means no two elements on the same page should have the same ID. It is mainly used to connect labels to inputs. Target elements with CSS or JavaScript. If we want to connect the label to an input using the ID, we use the four attribute inside the label. The value of four should match the value of ID, now write for value. Now for email, first write the label and Add the text user email and create the input tag with. In type attributes, give value email, and then name and ID. Then use the for attribute for connecting label and input. To submit the form, we need a button. We use the button tag. And inside the type attribute, we give the value submit. The submit button is used to send form data. Currently, you are seeing an unstilted form because this is a HTML class. So I will not use any CSS here. I will create a separate lecture for styling forms with CSS later. First, fill the data and click on the submit button. Nothing much happens, but if you look at the URL, you will see your form data details. To properly submit the form, we must use the action and method attributes in the form tag, write action and give value. Normally, we use a dynamic file like PHP JS to handle form submission. But here, for the example, I will use a simple HTML file. Let's write thanks dot HTML. Then method. Usually, we use the POST method to secure form data, and it is recommended. But for learning purposes, I will use the G method so you can see how form data appears in the URL. Now, fill the form and click the submit button. You will be redirected to the thanks dot html page. This shows the basic working process of a form. Now, I will explain a few more important things. If you want to show a hint or example text inside the input box before the user types anything, we use the placeholder attribute. Write the placeholder here and give any meaningful relative value like enter your username. For email, enter your email. Now, you will see the hint text inside the input fields. When you click the submit button with empty fields, the form still gets submitted. This means currently there is no validation. To add validation, we use the required attribute in the input fields. Now write required here and here. If you click Submit without filling the fields, you will see an error message. If you want your form fields to autofill, like when the browser remembers your information, you can use the autocomplete attribute and provide a value according to the field type, write autocomplete and give value name. For email use, value email. Now you can see the hint text, and I hope you have understood the form tag and how it works. 32. More Input form In Html: Phone. In the input box, name and ID attributes can be any text. But for the type attribute, the text should be relative like tell. Otherwise, it will not work. Use tell in the type attribute. Tell to indicate a telephone number input. Also, tell in autocomplete suggests auto filling with a phone number. For date, use date in the type attribute. It enables a date picker. When I click, the calendar pops up and you can pick a date from it. For color, use color in the type attribute to enable a color picker. When I click here, a color picker pops up, allowing you to choose any color. For checkboxes, I have created two checkboxes, both have the same name and type attributes, checkbox, but their ID attributes are different because IDs must be unique. For the second checkbox, I have added the checked attribute, making it selected by default. In the preview, you can see the first checkbox is unchecked. The second checkbox is already checked. You can change them by ticking or unticking as per your choice. You can select none, one or both checkboxes. For radio buttons, I have created two radio buttons for male and female. Both have the same name to group them together, but different ID values. In the preview, you can select only one option at a time, either male or female. For dropdown select menu, use the select tag, write the select opening and closing tags. Inside it, use option tags. Write the option opening and closing tags. Here, write text as please select. Again, write the option opening and closing tags and give any value. Now repeat process again and again and again. In the preview, you will see a drop down menu where you can choose an option. For file upload, use file in type attribute. It enables file uploads. To allow selecting multiple files, use the multiple attribute. Clicking Choose File opens a file explorer where users can select one or multiple files to upload. For textarea, multiple line input. If you want users to type multiple lines, use the text Area tag instead of input. Remember, Textaia has an opening and a closing tags. Write the Textaia opening and closing tags. Then define rows for height, give value like five. Calls for width and give value 30. However, in real practice, we control height and width using CSS, not rows and cools. In the preview, you can see a text box where you can type multiple lines. For read only text, on some websites or apps, you might see a text box showing terms and conditions that you can read but not edit. To create that, we use the deny attribute in a text area. Here, I have placed some text inside a text rea. In the preview, you can see that you can read the text but can't edit it. The value attribute in HTML forms, the value attribute is a fundamental attribute used in various form elements to specify the initial or default value of the element. The value attribute defines the initial value displayed in a form control when the page loads. If you don't fill the input box, the default data will be submitted with the form for that particular element. The disabled attribute is a Boolean attribute used to deactivate form controls, making them non interactive and excluding their values from form submission. Let me show you an example. In this select form, you can currently select the please select option, but now I'll use the disabled attribute here. As you can see, I can't select it. It's grade out to indicate the control is inactive. You can also use it in an input box. Now, let's apply it here. In the preview, you can see the gray area indicating that the input box is inactive. Currently, there is no CSS applied to this form. If I add CSS, I want to show you how the form will look. Now that the CSS has been added, you can see the beautiful and well structured form. I hope you've understood the form clearly. Oh 33. Audio In Html: Audio element in HTML five provides a standardized way to embed audio files in webpages, allowing playback without requiring external plugins, such as flash. The audio tag is used to embed audio content such as music, podcasts or sound effects. Write the opening audio tag and the closing audio tag. Then source, it specifies the audio files and their mime types. Source elements can be used for different formats. Then SRC attributes and write the path for the audio. In my case, I have kept all my audio files in the audio folder. So the path will be audiolash one dot mp three. Then type the attribute and then define the mime type like audiolaPEG. Then we can write a fallback text if the browser does not support the audio element. In preview, you can see nothing because the browser needs default playback controls. Now write the controls here, and you can see the default playback controls. Now click on the Play button and you can hear the music. There are few more attributes. Autoplay starts playing the audio automatically when the page loads. Autoplay, it may not work in modern browsers unless muted is also set due to user experience policies. Loop makes the audio replay automatically when it ends. Muted mutes the audio by default. Pre load. It specifies if audio should be loaded when page loads and value are auto metadata, none. Let's set it auto. One more thing, browsers support various audio formats. But compatibility varies. We can use multiple source elements to ensure cross browser compatibility. For example, let's use OGG format. And the browser will select the first supported format. And you learned how to add audio to your web pages using the audio element, how to use the controls attribute, and how to include multiple audio sources for better browser support. With this tag, you can easily embed background music, voiceovers or sound effects in your projects. Just remember to always use the correct file formats like MP three or OGG and test across browsers. A 34. Video In Html: This tutorial, I'll teach you how to embed videos in your webpage using HTML. We'll learn the video tag, important attributes like controls, autoplay, loop, and subtitles, and how to support multiple video formats. So let's get started. Write the video opening tag and closing tag. Define the source attribute. It specifies the path to the video file. Then controls, it adds native browser controls, play, pause, volume, et cetera. In preview, when I click the Play button, the video starts playing There are some more key attributes. Autoplay starts playing the video automatically. Loop repeats the video once it ends, muted, starts the video with no sound, width Height, sets the size of the video player. Presently, you can see the video size, but we can control it. Let's define the width as 350 and the height as auto. In the preview, you can see that the video width has been adjusted and one more thing. Not all browsers support the same video format. So we use multiple source tags inside the video tag, now write video opening and closing tags. Now for MP four. Write source, and then SRC and define path in type, defined video type. Now for Og, right source, and then SRC and define path in type defined video type and add fallback text it displayed if the browser cannot render the video. If one format isn't supported, the browser will try the next one. Adding subtitles and captions to videos in HTML serves several important purposes, enhancing accessibility, usability and overall user experience. Here's why they are essential. First, accessibility for hearing impaired users, captions deaf or hard of hearing viewers to understand the audio content. Second language support and inclusivity. Subtitles make videos accessible to non native speakers. Example, a Spanish speaker watching an English video with Spanish subtitles. Third, better comprehension in noisy silent environments. Users in loud places, public transport or quiet settings, libraries can watch videos without sound. Many viewers on Facebook watch videos without sound by default. Fourth, SEO benefits. Search engines crawl text based content like caption subtitles to index videos better. Improves discoverability in search results, YouTube, Google. Fifth, improved user engagement. Studies show captions increase watch time and retention rates. Helpful for complex terms, EG technical tutorials, medical videos. We can add captions using a dot VTT file. Web VTT or web video text tracks is the standard format used for subtitles and captions. It defines time text that appears in sync with the video. Let's take a look at the VTT file. Now write track. Then SRC, it defined the file path. Then kind attributes, it defined the type of track. It could be captions, subtitles, descriptions, chapters, metadata, SRC Lang, language of the track. It required for captions and subtitles and then label, use a readable name for the track shown in the browser's track menu, and you can add default attributes to indicates the track should be enabled by default. We can add more track. For this time, it will captions instead of subtitles. Let's play in browser. Here you can see caption and subtitles. You've now learned how to add videos in your web pages using HTML. We explored the video tag, how to include multiple formats, add controls, use Autoplay Mute and captions. Keep practicing and try embedding your own video files. 35. Semantic Tags In Html: Semantic HTML refers to the use of HTML markup to reinforce the meaning of the content on web pages rather than just defining its appearance. Semantic elements clearly describe their meaning to both the browser and the developer. Why use semantic HTML accessibility. Screen readers and other assistive technologies can better interpret your content. SEO, search engines give more weight to semantic content, maintainability, code is easier to read and understand, future compatibility, better prepared for future web technologies. And here are some common semantic HTML elements. Header tag represents introductory content, typically a group of introductory or navigational aids can contain headings, logos, search forms, et cetera, can be used multiple times in a document example at the top of sections. NAV tag, defines a section with navigation links. Not all links need to be in a NAV, only major navigation blocks, often placed inside the header. Main tag represents the dominant content of the body tag. Should be unique to the document, only one per page, excludes content that is repeated, headers, footers, Navbars, Article tag represents a self contained composition, should make sense on its own when distributed independently. Examples blog post, news article, forum post, product card section represents a thematic grouping of content. Typically has a heading used to divide content into logical sections. Aside, represents content that is tangentially related to the content around it. Often used for sidebars, pull quotes or advertising. Footer represents a footer for its nearest sectioning content or root element, typically contains authorship, info, copyright data, related documents, et cetera. 36. Semantic Structure In Html: See in this dummy web layout that this is the header, and inside the header, we have the logo and navigation bar. This is the banner section. This is the article section. This is the sidebar, and this is the footer. I hope now you've understood the layout and the roles of header, footer, sidebar, section, and article. Now, let me show you the HTML five code for this type of simple layout. As you can see, I've used the header tag for the header and the NAV tag for the navigation. Then for the main content of the page, I've used the main tag. Inside the main tag, I've used the section and article tags. After that, I use the Aside tag, which will align to the left or right side. And finally, I use the footer tag. Now you should have a clear understanding of semantic structure in HTML five. Next, I'll show you the same layout in HTML four, as you can see in HTML 4.0. We only use the DIV tag everywhere for the header, menu, body, and all other sections. So in this tutorial, you learned the difference between HTML five and HTML four layout structures. HTML five uses semantic tags like header, NAV, section, article, aside, and footer, which help make the code more meaningful and organized. On the other hand, HTML four relies mostly on the DIV tag, which doesn't describe the purpose of the content clearly. Using semantic tags in HTML five improves readability, accessibility, and SEO. I hope this tutorial helped you understand the basic structure of a web page and the importance of semantic HTML. 37. Conclusions: Congratulations. You've successfully completed the full HTML tutorial series. We started from the basics, understanding tags, elements and attributes and went all the way to creating forms, embedding audio and video and building complete webpage structures have a strong foundation in HTML, which is the first and most important step in web development. But remember, this is just the beginning. With HTML in your toolkit, you're ready to explore CSS, Javascript, and modern frameworks to take your skills even further. Thank you so much for learning with me. If you found this tutorial helpful, don't forget to like, share and subscribe to stay updated with more tutorials on web development and design. Keep practicing, stay curious, and keep building amazing websites. See you in the next course.