HTML Full Course Tutorial for Beginners - Learn EVERYTHING You Need to Know in Detail 🔍

Hi, I'm Dan, and I'm excited to welcome you to the ultimate HTML full course. This course is being designed for complete beginners with no coding experience, and by the end, you'll be able to write HTML at a professional level. It's by far the most comprehensive and high-quality course you'll find online and goes well beyond the standard tutorials you'll see elsewhere on YouTube.

My teaching style is not to just talk over code, but instead, I've carefully crafted this course to be a visual masterpiece with interactive animations, beautiful graphics, and professional editing, making it fun to watch. To ensure you remain engaged in order to maximize your learning, I also use the most effective teaching techniques for visual learners where the course is jam-packed with diagrams, analogies, code annotations, tables, and much more. By far the most useful feature is that every topic ends with a summary card so that by the end of the course, you have a full set of cards consolidating everything you need to know for HTML.

So, let's look at the HTML course program. We'll be covering the following topics: an introduction to HTML, HTML text, hyperlinks and attributes, self-closing tags and images, HTML forms, containers and semantic HTML, and scientific HTML. Each of these topics contains many subtopics which comprehensively covers everything you need to know to get a solid foundation that will enable you to code HTML at a professional level.

Throughout the course, we will be working on a major project called Quill. It is a journal-taking web application. I came up with this idea because I often wrote notes on my phone about business ideas, important tasks, memories, and many other things, and would all get lost without an easy way to categorize them. And I also wanted everything to appear neatly on a central dashboard. Quill is a full-stack web application that is built from scratch. It is known as a MERN web application with React on the front end, Express.js on the back end, and MongoDB as the database.

So, you've already had a look at the homepage. Let's take a brief walkthrough of the application. Users can create a new account or log in as a registered user. You have a dashboard with all your journals, and you can view an individual journal, edit that journal, delete the journal, and of course, create a new journal.

Now, in this HTML course, we won't be building all of this. We will just be making a start by coding up the HTML for the homepage and the page used to create a new journal. The reason I wanted to show you the complete project is so you can see how HTML is one piece of the puzzle and how it fits into a full-stack web application inside a real-life working web application. I also hope it will get you excited and motivated about starting this journey and knowing you too can eventually build something like this by following along with me in my boot camp.

Now, all the complete coding files, presentation slides, and summary cards from this video can be downloaded from the description below. So, let's finally jump in. We're going to start off the course with an introduction to HTML where we'll get an understanding of what HTML actually is and meet the all-important HTML tag. We'll also learn how to properly save HTML files as well as set up the correct document structure.

Let's get started by covering the basics and laying the foundation with an introduction to HTML. We'll be discussing what is HTML and HTML tags and elements. So, first up, what is HTML? HTML stands for HyperText Markup Language. That's a bit of a mouthful, but it is simple and not as intimidating as it sounds. Firstly, there is the hypertext part. This refers to the linking between different web pages, which is the driving force behind the World Wide Web. Now, these links can either be internal or external.

To understand this, let's take a look at Sky News. We're currently on the homepage, but like most browsing experiences, we click around to different pages. These are what we call internal links. We're clicking on links that take us to different pages all within the same website, in this case, different articles. Now, if we scroll to the footer, we can also navigate to pages that are not within our website or domain, and these are called external links. For example, if we click on this Facebook link, we're taken to the Sky News Facebook page.

So, what about the markup language part? This refers to the special syntax we use to define and structure the content on our web page. The best way to understand what markup is is to look at PowerPoint presentations. An analogy we'll be using throughout the next few topics. I've made this simple PowerPoint of my top five funny things I've come across on the internet, a list I highly recommend you check out. I've posted links to each in the description below. Anyways, as you can see, I have a range of different types of content on this slide, like a heading, paragraph text, an image, and a numbered list. Behind the scenes, PowerPoint is taking each of these pieces of content or elements and applying some magic to make them display how we intend. For example, if you think about the numbered list, the actual content I entered is just text, no different to the heading, but by clicking on the numbered list icon in PowerPoint when I made this, the text is being converted into a numbered list. In a nutshell, we're taking content and applying some special rules in order to define it properly.

Now that we have a basic understanding of what HTML is, I'd like to highlight that HTML is the foundation of a web page. It's because HTML is needed on every web page to display content. Every web page you visit has various elements such as headings, paragraphs, lists, and images, and to effectively display these components in your browser, the use of HTML is essential. To see this in action, let's take a look at one of the most OG websites around. Berkshire Hathaway is a web page that is built just in HTML. Berkshire Hathaway is Warren Buffett's conglomerate holding company. The dude is worth like a hundred billion dollars, so he could definitely spare a few dollars for a better website. The first thing that will jump out at you is just how basic the website is. It's just because there's no CSS to make it pretty or JavaScript for interactivity. It's just HTML to display the content and links to other pages.

Now, besides Warren Buffett, most modern web pages use CSS to add visual identity and JavaScript for interactivity. A great example of a more modern web page is one of my favorite companies, Duolingo. I love how minimalist it is and how they let their incredible graphics deliver the messaging. One of the coolest aspects of this homepage is this section down here where, as I scroll, you can see the graphics move with my scroll up and down. Now, despite all this fancy stuff going on, at the end of the day, there is still HTML needed to display all the content you see.

HTML is written using what we call HTML tags. HTML tags will wrap around content, which provides instructions to the browser for how to organize and display the content. There are a lot of different HTML tag types that are used to display different types of content, but let's start with a fairly easy-to-understand tag: the paragraph tag, which defines a paragraph. An HTML tag, like the paragraph tag, has an opening tag that looks like this. There's also a closing tag that will look like this. These tags wrap the content, in this case, some paragraph text that says "I am a paragraph."

Now, let's go through every part in detail. On the left, we have our opening tag, which starts off with a left angle bracket, then there is the tag name, which obviously will change depending on the type of content we want to display. In this case, it is a 'p' standing for paragraph, then there is the right angle bracket, which closes the tag. Then there is the content itself, in this case, some paragraph text. The paragraph closing tag also starts off with a left angle bracket. The major difference between the opening and closing tag is the presence of the forward slash over here. Then we have the tag name again, and the right angle bracket again. This unit of opening tag, closing tag, and content make up what is called an HTML element.

Now, there is a long list of HTML tags, 142 of them at the time of recording. So there are tags. I've chosen 40 of them at random here. The good news is that there are only really a handful of them that are commonly used over and over again in building our web pages. Reaching for these becomes second nature fairly quickly, so don't feel overwhelmed. We will go through the important ones in detail throughout this section.

In this section of the course, we'll be building a summary card called "Introduction to HTML." We looked at HTML tags. We looked at the paragraph tags, which consisted of an opening tag, the paragraph content (in this case, paragraph text), and the closing tag. This unit of opening tag, closing tag, and content makes up an HTML element.

So, in order to write HTML, we're going to need to install a few applications on your computer and be setting up the web development toolkit. We'll be talking about text editors and browsers. So, just like a builder has a toolkit of hammers, drills, and other tools, there is also the web development toolkit. The first tool we need is a text editor. This is where code is written and edited. The tool we're going to be using in this course is VS Code. It's what is called an Integrated Development Environment, or IDE, which has a lot of features to make writing code easier and more efficient. It's 100% free, and you can download it from code.visualstudio.com. I've posted a link in the description below.

Once you've installed VS Code, you should eventually see a welcome page that looks like this. In the next topic, we'll be coding our first page, and usually, to get started, under the "Start" heading over here, we'd either start a new file or open up an existing file or folder. Now, you're probably not going to have anything under "Recent" because it's likely you've never created any coding files before. In my VS Code, I'm shown recent files and folders that I've been working with.

Let's now have a look at this left navigation bar. The first tab, "Explorer," is where you open folders, and it is where our folders and files will be located. The "Search" tab allows you to search through all your files to look for specific keywords. You can also search and replace them. "Source Control" and "Debugging" don't worry about for now, and the last tab here, "Extensions," is where we can install useful tools into VS Code. It's kind of like the App Store or Google Play Store for VS Code, where the community has created useful tools that make our coding more efficient, and we'll be installing some of these as we move through the course.

The last thing I want to show you is in the settings. Here, you can choose your own visual theme. If I go to "Themes" and click "Color Theme," you'll see I have a list of themes. I can choose. The theme I'm using is "Dark Modern," and for the version of Visual Studio Code I have, this is the default theme. Now, you can choose whatever theme you like, but I would suggest using the theme I'm using just so that everything you see in my videos will perfectly match what you have on your end. Just to show you what this does, if we pick another theme, I'm going to choose something quite different, like "Red," you'll see straight away that we get a totally different color theme in VS Code. All right, I'm just going to change it back to the default theme.

There are also a bunch of other settings you can tinker with. If I click on the cog icon and click "Settings," there is a lot you can change. For example, you can change the font size or even the font family. I'm not going to change any of these; I just wanted to show you that there are settings you can change. We're going to be creating our first coding file in the next chapter, so for now, as long as you can successfully install VS Code, you're doing well.

Now, you can also use a regular text editor, which comes pre-installed on your device, to write code. I have a Mac, which is TextEdit for me, but this is not recommended as it lacks essential features and functionality, so we'll be using VS Code.

The next tool we need is a browser. The browser is where code is rendered, run, and tested. The browser I'll be using in this course is Google Chrome. Chrome is the browser of choice as it has very powerful development tools, which we'll see later on in the course. It is also free, and you can download it from google.com/chrome. I've posted a link in the description below. Once you've downloaded it and opened it for the first time, it will look something like this. Now, of course, there are other browsers like Firefox, but Chrome is the most popular choice among developers.

Just to round out this video, it's important to understand that a text editor is used for all programming languages like JavaScript, Ruby, Python, etc. We'll be using this throughout the course to write all our code. On the other hand, the browser is only used to run and view HTML, CSS, and JavaScript. It is primarily a front-end tool.

Next up, we'll learn how to create HTML files. We'll be looking at different types of files and how to save HTML files. Before discussing HTML files specifically, I want us to get a better understanding of file types in general. All digital assets have a file type that indicates how the data is structured, encoded, and stored. We'll start by taking a look at very common file types you've likely come across. Firstly, images. Common file types include JPG or PNG. For audio, common file types include MP3 or WAV. For video, common file types include MP4 or MOV. And for documents, common file types are PDF and TXT. An HTML file is a type of document, so it belongs in this category. It has the .html file extension.

Now, I want to look at creating, editing, and viewing files. Files are often created and edited in one program and viewed in another. For example, images. A program like Photoshop is commonly used to create and edit image files. The image file could then be exported as a JPEG. This file is then viewed in an application that can render the image, like Mac Preview or Microsoft Photos. This is no different to HTML. An application like VS Code is commonly used to create and edit HTML files. The HTML file is then exported with an .html file type extension, and this file is then rendered in your browser, like Chrome, where we are viewing it. This may be blindingly obvious to you, but it wasn't to me. I thought HTML was some kind of superpower file. I guess it was because it was the first time I was creating a coding type of file. The important thing to realize here is that HTML, as a file type, is no different to any others. It is created in one program and rendered in another, just like images.

Let's now take a look at saving HTML files. HTML files are commonly saved in lowercase, and files containing multiple words are hyphen-separated. We'll soon be creating an HTML file called "first-page." You'll notice that the file extension is .html, which means that this is an HTML file. It's all lowercase, and as there are more than two words, we separate the words by a hyphen.

All right, let's jump into VS Code and make our first HTML file. First, we go here and click "New File," then select "Text File," and then click "Select Language" and type "HTML" in the search box and click it. I want to be clear here: just because I selected HTML, it does not mean that this is now an HTML file. I need to specifically save it as an HTML file. To achieve that, selecting HTML as the file type previously just gives me some helpful tools specific for writing HTML in VS Code that will make writing it a lot easier, and we'll see soon.

So, let's write the simple paragraph we saw earlier. We had our 'p' opening tag, the content "I am a paragraph," and the 'p' closing tag. Now, the good news about VS Code is that it has a built-in tool called Emmet, which helps autocomplete our HTML. So, instead of manually writing the HTML tags like I did before, if I just write the letter 'p' and hit Enter, the paragraph tags appear, and this is what I was talking about before in terms of selecting this as an HTML file in VS Code. We get helpful tools like Emmet.

I'm now going to go ahead and save this page. On my Mac, I'm going to hit Command+S. For now, I'm just going to save this on my desktop, and I'm going to call this "first-page." Again, following the rules we spoke about earlier, we have our HTML file ending in an .html file extension. We have the name of the file all lowercase, and because there are two words, we separate them with a hyphen.

So, there you have it. You've created your first HTML file in VS Code, and like we saw before, if I double-click to try to view this file, it's automatically going to open up in my browser because that's where you view HTML files, and you can see your first remarkable web page of "I am a paragraph."

All right, to finish up, let's add to our summary for this topic, "Introduction to HTML." So, in this chapter, we learned about HTML files. We created our first HTML file, "first-page.html." We saw that we needed the .html file extension. The name of the file had to be all lowercase. If there were more than two words, we hyphen-separated them.

Continuing on, we'll explore the essential layout and components that define a web page by looking at HTML boilerplate. We'll be discussing document structure, DOCTYPE, the HTML tag, the HEAD tag, and the BODY tag.

So, what is HTML document structure about? Every HTML document requires boilerplate code. Boilerplate just means code that has to be included. You often hear the word "boilerplate" being used in the context of contracts. For example, my rental agreement has boilerplate text. There will be a specific clause about governing law, something along the lines of, "This contract shall be enforced by the laws of England." This is a boilerplate clause. It would be in every rental contract in England.

Looking back at the "first-page.html" file we made in the previous chapter, it contained a single paragraph element. Now, technically, this HTML file is incomplete and could cause rendering issues. To have a valid HTML file, we need other elements. What you can see here is the boilerplate HTML. An HTML template or boilerplate provides the basic structure and essential elements needed for a web page. Now, this can look like a lot of extra stuff just for a single paragraph, but it is all necessary, and we'll go through each line step by step.

Starting with the first line, DOCTYPE. This line flags to the browser that this is an HTML5 file, and this line of code is not actually an HTML element, but it is important. So, what is HTML5, I hear you ask? HTML5 is just the latest version of HTML. An older version of this declaration would look something like this. I've just put this here for reference; it's not something you would ever use today, and it's why I've made it a bit washed out. Continuing on with our PowerPoint analogy we've been using so far, this is equivalent to the different versions of PowerPoint files. As you probably know, when you save a PowerPoint, you can select a file format. You have options like .PPT and .PPTX, where .PPTX is the more recent version with additional features, just like HTML5.

Moving on to the HTML tag. This is the root HTML element, which wraps all other elements. It's like the binding and cover of a book, a wrapper containing everything inside. In our PowerPoint analogy, this is equivalent to the PowerPoint itself, where we make the slides and save information about it. It's the actual PowerPoint desktop application.

Next up is the HEAD tag. The HEAD tag contains key information about the document that does not appear on the web page. In this example, inside the HEAD tags, we have another element called the TITLE element, which gives our HTML document a title. Now, this may be a bit confusing, but the title is not the same as the file name. Let's have a look at this inside VS Code.

[Music]

I've made a new HTML file here in VS Code, which contains the boilerplate elements. I'm going to title this page "Document," and I'm going to save this file as "second-page." Now, if I open up this page in my browser, you'll see the title name, which I called "Document," appears up in the tab here, which is different to the file name, which is "second-page.html." Don't worry too much about this now; I just wanted to show that the title is not the same as the file name. Now, there is other stuff that goes in the HEAD, which we will look at later in this video. Back to our PowerPoint analogy, this is equivalent to the properties of the PowerPoint that is not visible on the slides. I actually didn't even know about this before I made this video, but you can save information about a PowerPoint presentation like title, subject, author, company, etc.

The final section of the HTML boilerplate is the BODY tag. The BODY tag contains all the visible content on a web page. In this example, you can see a single paragraph, but in real-world HTML documents, this is where the meat of the HTML is. There is usually a lot more here. In our PowerPoint analogy, this is equivalent to the content in a PowerPoint, things like headings, images, and lists.

[Music]

I'm going to go make a new HTML file and show you a neat trick. Just to remind you, we go "New File," we select "Text File," we click "Select the Language," and search for "HTML." We saw in the previous chapter a built-in tool to VS Code called Emmet. Emmet also provides us a really easy shortcut to generate the HTML boilerplate. All we do is type "!" and Enter. I personally don't ever write my own HTML boilerplate; I just use this shortcut.

Now, this boilerplate code does a few extra things we haven't seen yet, so let's go through what they are. So, we'll be looking at the boilerplate shortcut and what it generates. First, inside the HTML tag, there is something called an attribute, shown in red here, which is extra information for the tag. Don't worry about exactly how this works right now; we will be spending a lot more time on this later. This attribute flags that the primary language of this document is English. If the web page was for another audience, like Spanish, French, or Japanese, this is what would be there instead.

Now, these are called meta tags. Their job is to provide important information to browsers. We do not use them when writing HTML. They are more commonly grabbed from other places. For example, if I wanted to install some analytics tracking software, I'd commonly copy and paste tags from the analytics tracking software into the HEAD here. Basically, don't worry about them beyond this video; I won't be using them at all in the course. I just want you to get a basic understanding of their existence in the context of boilerplate HTML.

The first meta tag contains this `charset="UTF-8"`. This is a system for computers to store numbers, letters, symbols, and special characters. In simple terms, it's a system for how characters like those in the alphabet are converted into units of memory inside a computer. Seriously, don't worry about the details of this; just know we need it.

This next bit ensures content is displayed correctly across different devices, especially mobile. If you can remember back to the early smartphone days, you'll recall websites appearing in desktop versions on mobiles with tiny, hard-to-read text and clunky navigation requiring constant zooming in and out. This piece of code, along with modern design techniques, prevents this from happening.

Now, in all honesty, if I was on "Who Wants To Be A Millionaire" and I had to select the correct HTML boilerplate, and there were similar options, I probably wouldn't be able to. So don't stress about all the details; just use the shortcut.

So, let's finish off by adding to our summary card. We looked at the HTML boilerplate. The major parts of the boilerplate were the HEAD section, where information is not displayed on the page, and the BODY section, which is the content that is displayed on the page.

Finally, we'll look at best practices for organizing and visually structuring your code using nesting and indenting. We'll first take a look at nesting and then indenting.

So, let's first take a look at nesting. I'm going to pull up the HTML boilerplate we looked at in the previous chapter to highlight the concept of nesting. I'm going to move all the HTML elements inline like this. Nesting is about how HTML elements are placed inside one another, creating a hierarchical structure. Now, although these elements look like they're on the same level, there is still a hierarchical structure. I kind of think of it like those Russian dolls, where each doll lives inside another. And for us, in the context of HTML, elements live inside other elements. We use the term "parent" to describe the element that wraps other elements. Here, we can see a set of HEAD tags behaving as a parent. They are wrapping the TITLE element, which we refer to as a child. Here is another example of the parent-child relationship, where the BODY tag is the parent wrapping the paragraph element, which is the child.

Now, it is incredibly common in HTML documents to have nested elements inside other nested elements. Again, like the Russian dolls, we can see this over here with the HTML tags, which is the parent wrapping everything in the document, where the HEAD tags and BODY tags are now the children of the HTML tag. So, this document has two levels of nesting. The HTML tags are the first level of parents, and their HEAD and BODY tags are the second level of parents. It is very common for there to be many levels of nesting in a typical HTML document.

Moving on to the idea of indenting, which can often be confused with nesting. As you can see, it is very difficult to read and see which HTML elements are nested inside another, as they are all inline. So, to make our life easier, we indent our HTML, which visually organizes code to quickly identify the hierarchy of elements. VS Code also has guides that make it easier to see how the code is nested. VS Code also helps by automatically indenting our code. It knows whether we're inside a nested element or not. For example, if I hit Enter, I'm not taking inline with the BODY tag, but instead, I'm automatically indented. This is because I'm currently wrapped by BODY tags, which means that whatever I write now is going to be a child of the BODY parent. I'm going to just write a simple paragraph. If I go to the end of the paragraph and hit Enter, I'll be taken inline with the paragraph. I'm not indented because the paragraph tags are not wrapping me where I am; it's still the BODY tags that are wrapping me. Now, not that you would ever do this, but because we haven't learned enough tags at this point, if I do another set of BODY tags and hit Enter, you'll see that I'm again indented, and this is because I'm now again wrapped by BODY tags.

Now, compared to the code we saw before that was all inline, I'm sure you can agree that indenting code like this shows the nested structure very well. So, let's finish off by adding to our summary card. We looked at nesting and indenting. Nesting is the idea that HTML tags will wrap other elements, creating a hierarchical structure. Again, think of the Russian dolls. We introduced the terminology of "parent," which in this case are the BODY tags, as well as "child," which in this case is the paragraph. Indenting is how we visually organize code to quickly identify the hierarchy of elements. In this case, the paragraph element is indented, clearly showing it is a child of the BODY tags. Nice one! We've now completed the "Introduction to HTML" section of the course. Next up, it's time to look at HTML text, where we'll learn about important text elements like headings, paragraphs, and lists, as well as see how comments work. We'll also start learning about how to use Chrome DevTools to inspect HTML elements on web pages.

Let's begin by exploring how to structure content by using headings. We'll be discussing how headings are used, the heading tag, and heading hierarchy.

So, what are HTML headings? Headings help break up different sections of a web page. This is the monday.com homepage. It's a project management tool. I don't personally use it, but I've always admired their UX and UI, and we'll be looking at it throughout this section when learning about different HTML tags. As you can see, the homepage has a large main heading which says, "A platform built for a new way of working." Scrolling down, the homepage also has other kinds of headings, like this section heading, "Everything you need for any workflow," where the content below is dedicated to talking about monday.com features. There is also a smaller subheading here, which details one of the specific features, in this case, "Dashboards."

Now, let's take a look at how you write headings in HTML with the heading tag. We have the heading opening tag, the heading closing tag, and the heading content wrapped by these tags. Let's get started with these tags.

Looking more closely at the heading tag, the letter 'H' stands for heading, and the number is the number of levels or hierarchy. So, what exactly do we mean by levels or hierarchy in HTML? There are six different heading tags: they are H1, H2, H3, H4, H5, and H6. Let's have a look at these inside VS Code.

I'm going to start a new HTML file. I'll first get the HTML boilerplate by hitting "!" and Enter, and then I'm going to simply write out each of these headings: H1, Enter, and I'm just going to write the text "Heading One." H2, Enter, and writing the text "Heading Two." H3, H4, H5, and H6. Now, of course, you could put whatever heading text you like; I'm just keeping it simple and writing the name of the heading. Let's go ahead and save this HTML file. I'm just going to call it "headings.html" and save it on my desktop.

Once I open up this file in the browser, this is what we see. I'm going to zoom in slightly on the browser. So, what you can see here is that the different heading types have different visual sizes, where H1 has the largest text and H6 has the smallest text. The heading sizes are actually not important; we'll be changing these in the CSS section. What is important when it comes to the numbers in the heading tag is the concept of heading hierarchy.

So, what is heading hierarchy? Headings are used to achieve a clear and logical structure. Starting at H1, this is the highest-level main title heading. It usually appears at the top of a page and should only be used once per page. For example, on monday.com's homepage, we had our main heading here. This would be an H1 and would look like this as a complete HTML H1 heading element.

Next up, we have the H2 heading, which is a heading that groups content. We typically see this kind of heading being used at the top of a discrete section of a web page, like a "How it Works," "Testimonials," or "Call to Action." For example, on monday.com, the H2 is being used as a heading for the features section and would look like this as a complete HTML H2 heading element.

Then we have H3, H4, H5, and H6, which are subheadings with decreasing importance. It also becomes less common to use the lower-value headings like in H5 and H6, as it is rare to have a need for headings at such a low level, but they are there just in case you do need them. For example, on monday.com, an H3 is being used here as a subheading, which is detailing a particular feature, and would look like this as a complete HTML H3 heading element.

Hopefully, it is now clear that while headings from H1 to H6 vary in size visually, the primary significance of the numbers is to establish hierarchy, where going from H1 to H6, there is decreasing importance. We saw that high-level headings, such as H1, are reserved for the most important content, like the main heading of a web page, while H3 is a lower heading, typically used for less critical sections, like the title of a specific feature in a section of a page.

So, let's summarize this chapter and start to build out the summary card for this topic, "HTML Text." We've learned about HTML headings. We saw there were six heading types ranging from H1 to H6, where the significance of the numbers is there to establish hierarchy.

So, it's time to kick off the Quill project. So, let's start coding up the HTML for the Quill homepage by adding in all the headings. The main heading of our page will be an H1. The heading of the features section will be an H2, and the subheadings in the features section will be H3s. The heading in the call to action will be an H2, as it is kind of like a title for this section.

The first thing I'm going to do is delete these files; we don't need them anymore. I'm then going to make a new folder on my desktop called "Quill," and this is where all our files for our project will be saved. I'm going to make a new HTML document inside VS Code, like always. I go "New File," click "Text File," select the language, and search "HTML." I'm going to get our boilerplate code by typing "!" and Enter. And then I'm going straight away to save this file. On my Mac, I hit Command+S, and I'm going to save it inside the Quill folder. Now, it's very typical for a homepage to be called "index.html." This is fairly standard notation you're going to see elsewhere as well. I'm now going to go ahead and save this file. Let's also update the title of the document to "Quill," so that when we open it in the browser, we'll see the name "Quill" in the tab.

We'll come down to the body and start adding our headings. Now, I highly recommend you code along with me, and to make your life a bit easier, I've made a file with just all the homepage text for this project. You can download it from the description below and then easily copy and paste the text for all the different text elements we will be adding, so you don't need to type it all out yourself, as some of the text we're going to be adding is a bit chunkier.

The first heading was an H1 and had the text "Mindful living for the digital world." The next heading was an H2 and had the text "Finally, a simple and easy-to-use journal app." We then have our subheadings, which are H3s, and we had three of them. I want to show you a quick trick that I sometimes use. If we have multiples of an element we want, in this case, three, we can type the element name "H3" multiplied by three and hit Enter, and this will give us three H3 tags. Our first subheading was "Write all your journals in a few clicks." Next, we had "Beautifully displayed and neatly organized," and the final H3 was "Create and reflect from anywhere in the world." The final heading we had was the H2 at the bottom, which was the call to action at the bottom: "Get started now."

Now, when I'm writing my HTML, I personally like putting line breaks between the different sections, so it's clearer for me to see. I'm just going to pop a line break here and a line break here. Doing this won't have any impact on the HTML, but makes it cleaner and easier for me to read, as it divides the different sections of the page. One small thing I want you to notice is the heading hierarchy here. You don't have to move from H1 to H6 sequentially. In fact, most of the time, you'll have code that looks like this, where the decreasing importance is contained within a specific section, like the features section starts with an H2 and then moves to H3s. As we move to the call to action section at the bottom, we move back to an H2. So, just be mindful that when you're writing your HTML code, it's very normal not to have your code move from H1 to H6 in the entire document, but rather have a decreasing heading hierarchy within a section, like this, where we start at H2 and move to H3s.

Let's see what this looks like in our browser. I'm going to open the Quill folder and open up "index.html." You've written your first bit of HTML for our Quill project. It's nothing spectacular, but we've made a start.

Next, we'll discuss how to organize text blocks by using paragraphs. We'll be discussing where paragraphs are used and the paragraph tag.

So, what are paragraphs? They are structural text units that group together related ideas and typically provide more detail of what is being discussed after a heading. On the monday.com homepage, we can see this description text below the main heading, which is a single-sentence paragraph. Lower down on the homepage, we have a larger chunk of text, which is a multi-sentence paragraph. Here are monday.com's terms and conditions, and you can see here we have multiple paragraphs. I can tell it is multiple paragraphs instead of just one massive paragraph due to the line break between them, something we'll look at soon.

Let's take a look at the paragraph tag. We have the paragraph opening tag, the paragraph closing tag, and the paragraph content wrapped by these tags. Let's go and write some HTML paragraphs inside VS Code. I'm going to start a new file, like we always do, by clicking "New File," clicking "Text File," selecting language, typing HTML, and hitting Enter. I'll straight away get my HTML boilerplate by hitting "!" and Enter, and we'll save this file on the desktop and call it "paragraphs.html," and let's update the title of this document to "Paragraphs."

To write a paragraph, we just hit 'p' and Enter to get our paragraph tags, and to get some placeholder text, VS Code has Lorem Ipsum built in. If I just type "lorem," we'll see "lorem" come up, and I'll hit Enter and get this placeholder text. Just for some background, Lorem Ipsum is common placeholder text used in visual and graphic design. I think it's originally from some ancient Roman text. I'm going to get another set of paragraph tags. I'm going to type "lorem" and, like the trick we saw earlier, I'm going to multiply this by four to get a larger chunk of text.

Let's take a look at this in our browser. I'm going to open up the "paragraphs.html" file, and we can see here our two paragraphs. You'll notice that there's automatically a line break inserted between the paragraphs. So, if this was just one paragraph in HTML, we wouldn't see a line break here.

Now, if you want to spice things up with your placeholder text, this is a fantastic tool I sometimes use. It's called Hipster Ipsum, where instead of placeholder Latin, we get placeholder hipster words. You've got some different criteria you can fill out, but let's just go "Big" and, as you can see, we get some fantastic hipster words like "tacos," "quinoa," and "gluten-free." You can simply copy and paste this placeholder text and put it inside your paragraphs. So, let's put another paragraph here and paste in our hipster text, and as you can see, it just adds that extra bit of edge to our placeholder text.

So, let's finish off by adding to our summary card. We had a look at the paragraph element. It's made up of a 'p' opening and closing tag wrapping the paragraph text.

Let's now go ahead and add paragraphs to our Quill homepage. We have a single-sentence paragraph below the main heading. We also have paragraph text below each of the subheadings in the features section, and right at the bottom, we have this small piece of paragraph text: "Made with love in London." Let's go ahead and code this up.

Typically, in VS Code, we actually work inside a folder instead of opening individual files. So, I'm going to now open up our "index.html" file inside the Quill folder. So, I head over to the desktop, I click on the Quill folder, and click "Open." You can see the Quill folder appears as a drop-down here, and as we add more files, they'll all nicely be stored inside this Quill folder. I'm going to double-click on the "index.html" file, which is where we're working.

I'm now going to add in the paragraphs, and to avoid making this viewing experience painful, I'm just going to copy and paste them in. I'll hit Enter, type 'p' to add a set of paragraph tags, I'll copy in the text. Next, I need to add in the three different paragraph texts under each subheading. To improve the readability of this, I'm going to add in some spacing like this. This nicely groups together our H3 and paragraphs. Just a quick note on this heart symbol: it's a typographic symbol I just got off Google. I typed in "heart symbol" and copied and pasted it. The browser is smart enough to know how to render it correctly, and we can also copy and paste emojis, which we'll be adding later on in the course.

So, let's now take a look at this in our browser. We can now see our headings and paragraphs, and the page is beginning to take some form. Again, just a reminder, the line breaks inside the HTML document have no impact inside the browser. For example, if I clump these all back together, save, and refresh, you'll see there will be no impact.

Moving on, we'll see how to present information clearly by using lists. We'll be talking about ordered lists, unordered lists, and nested lists. First up, we'll be looking at the different list types. There are two list types in HTML that are used for different purposes. The first is the ordered list, more commonly known to us as a numbered list, which are used when order matters, like cooking instructions. The second is the unordered list, which we often call bulleted lists. These are used when order does not matter, like a shopping list.

We'll take a look at the ordered list first. An ordered list is a list with numbers that presents items in a clear and organized way. For example, here is the bottom of a Wikipedia page on Alig, my favorite satirical character. You can see here that the list links to references used in the page. Numbers are used, and the order of the list is important, as it reflects the order in which the references appear in the Wikipedia page. One of my favorite Alig interviews is with Buzz Aldrin, the second guy on the moon after Neil Armstrong. Throughout the interview, he shows so much patience with Alig, and to tip it all off, he ends the interview like this. So, listen up. You was heard about the moon and about space. You better learn about these things from my man Buzz Lightyear here. So, you better realize that these things. Buzz Aldrin's facial expression is priceless after being called Buzz Lightyear. It's important. Big up yourself. All right, back to HTML.

Let's now take a look at the ordered list tags. There are two components to lists in HTML for ordered lists. The first component are the 'ol' tags, standing for ordered list. Just like the other HTML tags we've seen so far, we have an ordered list opening tag and an ordered list closing tag. These tags then wrap the actual items we are listing. In this example, I'm listing the top positions in the English Premier League. In first position is Liverpool, second place Arsenal, and third place Man City. You can now see here the second component of an HTML list: the list item, or 'li' tags, where we have a list opening tag and a list closing tag, which wraps the list content. The list items are indented and nested inside the ordered list tags.

Let's jump into VS Code and make an ordered list. I'm first going to make a new HTML file, as always. I'm going to get our boilerplate HTML, and let's call the title of this document "Lists," and we'll save this on our desktop, calling it "lists.html." We'll be making a few lists in this document, so I'm first going to add an H2 heading and call it "Ordered List." When I was creating this video, I was trying to think of good examples of ordered lists, and I thought IKEA instructions was a good idea. I found it pretty funny that when you search "IKEA instructions" in Google Images, you end up finding some fairly funny ripoffs, like a fortress. This is something I always build with my kids. So, let's go and make an ordered list for building a mattress fortress. We type 'ol' and hit Enter to get our ordered list tags.

then hit enter so we can start writing our list items like we discussed in the document structure video. Because VS Code knows that the `ol` tags are going to be parents of list items, it automatically indents it for me.

Our mattress fortress has four steps. So I'm going to type `li` for list item.

1. Find a couch.

2. Gather mattresses and blankets.

3. Lay mattress on its side next to the couch.

4. Drape blankets over the top for a roof.

Let's now see what this looks like in our browser. So you can see for the ordered list, we automatically get numbers assigned to each list item.

The second list type is the unordered list. The unordered list is a list with bullet points to present items in an easy-to-read way. On the same `ol` Wikipedia page, we have a list of people interviewed by `ol`. The order of this list is not important. It is just a general list of people he has interviewed in no particular order. So bullets are used as an effective way of listing these items.

Moving on to the unordered list tags. Similar to the ordered list, there are two components. Instead of `ol` tags, we use `ul` tags, which, as you guessed it, stand for unordered lists. There is an unordered list opening tag and an unordered list closing tag. In this example, I'm listing pizza toppings where the order of the toppings does not matter. The actual HTML for the list item in the unordered list and ordered list is identical. We have the same list opening tag and the same list closing tag, which wraps the list content. The list items are again indented and nested.

Let's jump back into VS Code and write an unordered list. We'll be working in the same document. So I'm going to add another `h2` heading and call this "Unordered List". I'm going to be listing out my three favorite relationship quotes, ones that I'm saying to myself on a daily basis.

For the unordered list, we're going to go get our `ul` tags. So type `ul` and hit enter. We're going to hit enter again so we can start typing our list items. As I said, there were three list items. So I'm going to type `li` to get my list tag and multiply this by three to get three sets of list tags.

* It's better to be happy than right.

* People don't care how much you know until they know how much you care.

* It's free to smile.

Let's see what the unordered list looks like in the browser. So you can see that the unordered list automatically has bullet points, whereas the ordered list has numbers. So `ul` tags give us bullets where `ol` tags give us numbers. And again, the actual list tags are identical between the two different types of lists.

The last concept we need to tackle is nested lists, which is a list within a list. We'll be starting with an ordered list, which details a series of steps for planning an event.

1. Initial research.

2. Send out invitations.

3. Arrange catering.

Now, it is common to want to list further details of some of these list items. For example, in "Initial research," there are several things you need to do. So we can introduce another list, in this case, an unordered list, like this. It's nested inside the list tags. Now, inside the unordered list tags, just like the regular list, we list items with `li` tags. So, as part of "Initial research," things we might need to do include deciding a date and time and setting a budget.

So let's now have a look at what we have going from top to bottom. We first have the main parent list with the `ol` ordered list tags. We can describe this as a parent. The unordered list has three list items: "Initial research," "Sending out invitations," and "Arrange catering." These are the children of the ordered list. Then, inside the first list item, we have a nested list.

So let's play around with this inside VS Code. So back inside the HTML file we were working with earlier, I'm first going to go add another `h2` and give it the text "Nested List". I'll be making a nested list of things you take on holiday. I'm going to first list out different categories of things using an unordered list. I'll create three list items, and the categories will be:

* Clothing

* Toiletries

* Electronics

Now I'm going to go create a nested list inside each of these list items. To do that, I hit enter at the start of the closing list tag and I'm going to add another unordered list here. I'm just going to add two different clothing types:

* T-shirt

* Jeans

For toiletries, I'm going to go and do the same thing. I'm going to come to the start of the closing tag, I'm going to hit enter, I'm going to grab our unordered list tags, and I'm going to add three different toiletries:

* Toothbrush

* Shampoo

* Soap

And for the category "Electronics," again, I hit enter at the start of the closing list tag. I grab the unordered list and I'm just going to add two different items here:

* Laptop

* Phone

So let's check this out in the browser. So here you can see our nested list. The first level of the list has the different categories of clothing, toiletries, and electronics. And note the style of the bullet is a solid black fill. And in each category, you can see the nested list items, and note that it's automatically indented and it has a different style bullet with no fill and a light black border.

I want to finish off the concept of nested lists by highlighting you can mix and match ordered and unordered lists. I'll be building this table where the first level represents the parent list and the second level represents the nested list or child list. So let's fill it out.

If we had an ordered list as the parent and an ordered list as the child, it would look like this:

`ol`

`ol`

`li`

`li`

`li`

`li`

If we had an ordered list as the parent and an unordered list as the child, it would look like this:

`ol`

`ul`

`li`

`li`

`li`

`li`

If we had an unordered list as the parent and an ordered list as the child, it would look like this:

`ul`

`ol`

`li`

`li`

`li`

`li`

And finally, if we had an unordered list as the parent and an unordered list as the child, that would look like this:

`ul`

`ul`

`li`

`li`

`li`

`li`

Of course, we can continue to go another level deep, but I just wanted to get the idea across. You have complete freedom to mix and match lists when creating nested lists.

So let's finish off by adding to our summary card. We looked at lists. We started by looking at the ordered list, commonly known as numbered lists, which have a set of `ol` tags wrapping list items in `li` tags. We then looked at unordered lists, commonly known as bulleted lists, which have a set of `ul` tags wrapping list item `li` tags. Finally, we looked at nested lists, where we have a first-level parent list, and where a child list item can contain a list itself on a second level, called a nested list, that is a list within a list.

So let's now go ahead and use HTML lists on our Quill homepage. Now, like many of you, this wouldn't be your first rodeo making lists. I'm sure you make them all the time when working inside Google Docs or even when writing emails. When it comes to building web pages in HTML, it's actually pretty rare to use ordered and unordered lists as you would in everyday life. They're more commonly used to create a structural unit. A very common use of the list tags are navigation items, like this login and just a button over here, where we would use an unordered list to create the structure. Don't worry for now that there will be bullet points; we will take care of that later in CSS. Another location would use a list to create a structural unit are these buttons over here, where again, we'll be using an unordered list. At the bottom of the page, we have the social media icons over here, which are going to live inside an unordered list, and we also have this small navigation menu with home, login, and register, which are also going to be inside an unordered list. So hopefully you're understanding from this that it's common to use lists to create a structural unit that groups together related items, like links in a navigation menu.

So let's now jump into VS Code. So let's first add the list for the login and register. I'm going to make some space here. I'm going to grab the unordered list tags. There'll be two list items: one for login and one for register. I'm going to come under the paragraph here and again add another unordered list with two list items. The first is "Get Started" and the second is "Learn More". I'm then going to scroll to the bottom and underneath "Get Started" I'm going to add another unordered list, and this list is for the social media icons. Now, for now, we don't have icons, so I'm just going to put some placeholder text for them. We had five social media icons: the first was Instagram, the second was Facebook, third was TikTok, the fourth was LinkedIn, and the fifth was YouTube. Below this, we then had that mini navigation menu, which had three links. So again, I'll add an unordered list and add three list items. The first was home, the second was login, and the last was register.

All right, so let's check this out in the browser. So here you can see our list items. We've logged and registered at the top, "Get Started" and "Learn More" over here, and at the bottom, we have what will be our social media icons and then that mini navigation menu. Now, just a few notes. The first is, we will be removing these bullets when we get to the CSS section. And the second note, I just want to reinforce the idea that lists are commonly used to create structural units that group together related items, commonly things like links, buttons, and social media icons.

Now let's learn how to include helpful notes in your code by using comments. We're going to be talking about the purpose of comments and comment syntax. So what are comments? Comments are notes inside an HTML document that are not displayed in the browser. There are two main use cases of commenting in our code. The first is to write notes to self. These comments are to-do placeholders, useful for reminders on future actions. For example, a comment may be: "Add in buttons here later." The second way to use comments is for documentation. These comments are explanatory notes, useful for when revisiting your own code or when others are looking at it. An example of this comment would be: "These icons link to social media." It gives a description of what the icons are doing.

Let's now take a look at comment syntax. Here is an example of a comment in HTML. It has an opening delimiter, which is made up of a left angle bracket, an exclamation mark, and two dashes. A delimiter just means a sequence of characters. The closing delimiter is two dashes with a right angle bracket. The comment text is between the delimiters, usually with a space on either side to improve readability. A comment is not an HTML element and, as mentioned earlier, it is not rendered in the browser.

Now, the good news is that you do not need to remember this syntax. For the Mac shortcut, it's the Command key and forward slash. And the Windows shortcut is the Control key and forward slash. Comment syntax does vary across different languages like CSS and JavaScript, but the good news is it's the same shortcut for all of them.

So let's finish up the summary card for the HTML text chapter. We looked at comments. A comment has this syntax with an opening and closing delimiter and the comment content between them. And just remember that shortcut: Command slash on Mac and Control slash on Windows. The comment is not an HTML element and is not rendered to the browser.

So let's now apply what we've learned to our Quill project. Let's first do a documentation type of comment. Comments can be really useful in helping divide up different sections of our page. At the moment, it isn't so clear which section is which by just looking at the HTML. Let's go and add a comment here to make this clear that this section is the navigation. Again, I'm going to be typing Command slash on my Mac and I'm going to type this comment all in uppercase and write "NAVIGATION". This section over here is called a hero section, so I'm going to write it another comment here: Command slash, "HERO SECTION". All of this content is to do with the features of the Quill app, so let's go and write a comment here: "FEATURES SECTION". This "Get Started" now is part of the call to action section at the bottom, so let's go and call this "CTA SECTION". And all this content made up of the footer, so let's add a comment here: "FOOTER".

Now, as you can see, adding these comments makes it a lot easier to immediately see which content belongs to each section. Later on in the HTML section of the course, we're going to be covering something called semantic HTML. This is HTML that will actually help distinguish these different sections, so commenting becomes less necessary. But for now, it is very helpful.

Let's go and add the other type of comment, which was a note to self. I'm just going to write one simple one down here to remind me to add in the social media icons. So I'll write: "add in social media icons later". As you can see, I write my different section comments all in uppercase, whereas notes to self tend to all be lowercase. This way, I can clearly see the difference between the two, and my different section headings really pop out a lot more. And as we mentioned earlier, these comments do not appear in the browser. So let's have a look at that by looking at the page. So as you can see, there has been no changes to the HTML in the browser. The comments are not being shown; they're only shown inside VS Code for our own reference.

Lastly, we'll get hands-on experience with inspecting HTML elements using Chrome DevTools. We'll discuss what are Chrome DevTools and how to use Chrome DevTools. So first up, what are Chrome DevTools? They're just a set of web development tools built into the Chrome browser that allows developers to inspect, debug, and profile web apps. You can think of DevTools like a builder's toolbox, which has tools like hammers, spanners, and screwdrivers for different purposes in building a house. Chrome DevTools has many sophisticated features. The common tools we'll be using in the full-stack boot camp include allowing us to see a web page's underlying HTML and CSS, to view and interact with JavaScript, and information about network requests.

So let's now take a look at Chrome DevTools. All right, I'm on the homepage of a web application called Asana. It's another project management tool, and we're going to be looking at example pages throughout the HTML section. To get into DevTools, I right-click on the page and click "Inspect". This opens up this window on the right here, inside the browser. Now, I personally don't like it here, so I'm going to change its orientation to the bottom of my screen. I do that by clicking these three dots and click this icon to move the dock to the bottom. I'm then going to scroll down a bit so we can see more of our page.

Now, the way DevTools is structured is it has all these tabs along here. I'm currently in the "Elements" tab, and we'll be using the "Elements" tab a lot in the HTML and CSS section of the course. The "Elements" tab shows the underlying HTML markup. For example, I can click in this `h1`, and this is the `h1` markup of what we see here: "A smarter way to work." And I can click on any piece of HTML. Now, if there is a specific piece of HTML I would like to look at, instead of trying to find it in here, what I can do is click on this inspect icon over here, and this allows me to go on the page and click on any element I'm interested in. For example, this heading, we can see that it's an `h2`. Let's go and look at some other elements we've looked at already. I'm going to scroll to the top and click on this navigation bar, and you'll see that this is a list item as part of an unordered list, the same structure we're using in our Quill project. This section on the right are CSS rules that are being applied. It's the styling; we'll be looking at this extensively in my CSS full course.

If I move over to "Console," this is where JavaScript code is being executed. We'll be working a lot with the console in my JavaScript full course. Just for now, to give you a taste, I'm going to declare a variable of age: `const age = 50;` and then going to multiply age by three to get 150. We've just executed some JavaScript code. Don't worry at all about any of the syntax I've used; I just want to show you that the console is where JavaScript code is run and executed.

The "Network" tab is where we can see HTTP requests and responses. We'll actually be looking at this later in the HTML forms topic of this course, especially when sending requests from our frontend to our backend server. Later in the full-stack boot camp, we will be looking at the "Application" tab when we start implementing user authentication and authorization. Anyway, don't let any of this overwhelm you. For now, I just wanted to give a very high-level overview of web DevTools and that we're going to be using them a lot throughout this course. We'll be starting nice and slow in the "Elements" tab to look at the underlying HTML of different web pages.

Great work! We've now finished the HTML Tech section of the course. It's now time to learn about hyperlinks and attributes. We'll first take a deep dive into the concept of file paths, which is used throughout web development, and then we'll learn about HTML attributes so we can construct the all-important hyperlink and HTML element that powers the World Wide Web.

Let's begin by understanding how to reference and navigate files within your projects using file paths. We will be discussing text and graphical-based computers, directory structure, and absolute and relative file paths. We're going to take a step back from coding to look at the important concept of file paths, which is used throughout web development. And to understand file paths, the first thing we need to understand is how computers have developed. The way we interact with computers has changed a lot. Early computers were text-based computers and came onto the scene in the 1970s and 80s. You can see that this computer here only has a keyboard. Modern computers that you and I use are called graphical computers, where we interact with them with a keyboard and, more importantly, a mouse.

We'll first talk about text-based computers, where users interacted with computers using text-based interfaces. The computer screen would look like this, where at the bottom there is something called a command line. This is where users type various instructions to communicate with the computer. These commands would range from simple tasks like opening files or folders to more complex operations like running software or programming scripts. In my full-stack boot camp, we will work with the terminal on your computer, which is a text-based interface, which is a key tool for backend development. Text-based computers work very differently to graphical computers. Personal computers have a graphical user interface, which allows users to visually interact with graphical elements. For example, there are visual elements like icons and windows, which users can click on and interact with in order to open up different files and folders.

Next up, we need to discuss the concept of directory structure. A directory structure is a hierarchy structure that organizes and stores files and directories. Directories is just a fancy word for folders. I'm going to step through the file path of where the Quill `index.html` file is stored on my computer. I'm on a Mac, so the starting point for where all files are saved is the hard drive called Macintosh HD. This is commonly called the root directory because it is where all other files and directories are stored. The next level is the Users directory, which stores files and folders of different users of the MacBook. Next is the actual user, which in my case is my full name, Daniel Brand. Next are the directories you'd be used to seeing, like the Desktop folder. On my desktop, I have a folder called Quill, and inside Quill is the `index.html` file we've been working on. On a text-based computer, in order to navigate to the `index.html` file and open it, we'd have to type in the command line, which we saw earlier, and would look something like this: We'd start at Macintosh HD, and then to move to the next directory, we type a forward slash and the next directory name, so `/Users/Daniel Brand/Desktop/Quill/index.html`.

But let's go through the same journey we went through before, just doing it graphically now. On my Mac, I'm going to go to the top navigation bar for the Finder window, click on "Go," and click on "Computer," which will take me to the root Macintosh HD directory. So let's go through this file path visually. I'm going to click on Users, then Daniel Brand, then Desktop, then Quill, and here's my `index.html` file. So that is how we do the same thing visually. Now we can actually see a representation of the text-based file path on the Finder navigation bar. If I click "View" and "Show Path Bar," now down here you can see this file path, very similar to how it would appear on a text-based interface, where instead of forward slashes, we have this angled bracket.

Okay, finally, moving on to material relevant for web development, we'll now be discussing absolute file paths and relative file paths. Starting off with absolute file paths. An absolute file path provides the location of a file or directory, starting at the root directory. We've seen this already, where the root is Macintosh HD, and the file path to get to `index.html` from the root would look like this: `/Users/Daniel Brand/Desktop/Quill/index.html`. Absolute file paths always start from the root directory, so you can imagine for very nested directory structures, this can get very long. Now, absolute file paths are most useful when navigating on a computer. You can actually see the file path for our Quill HTML document inside the address bar up here.

More commonly used in web development are relative file paths. A relative file path provides the location of a file or directory in relation to your current working directory. Okay, new word here: current working directory. What is that? In our case, the main Quill folder is our current working directory. It is the top-level folder where all our other files and folders are going to be located. The `index.html` file that we've been working on lives inside the Quill folder, and in the next chapter, I'll also add a new user account registration page that will also live inside this Quill directory called `register.html`. Inside the Quill directory, I'm going to add another directory called "images." This is where a few images are going to live, like a logo image and an icon image.

Working with a relative file path to our current directory is most useful in web development, as we often want to get the location of a file relative to where we are working. This idea will become very clear in the hyperlinks chapter, where we will make a register button on the homepage, and we will need to be able to reference the `register.html` file.

So let's compare relative and absolute file paths to make this concept crystal clear. Now, when referencing any files or folders directly inside the Quill working directory, we can just reference it like this: `index.html`. The equivalent absolute file path would look like this: `/Users/Daniel Brand/Desktop/Quill/index.html`. Now, for the register page, because it is directly inside the Quill folder, the relative file path can be referenced like this: `register.html`, and the equivalent absolute file path would look like this: `/Users/Daniel Brand/Desktop/Quill/register.html`.

Now, the "images" directory is a folder that is directly inside the Quill folder, so we can also refer it as just `images`, no different to how we reference `index` or `register`, except there's no file extension like HTML because `images` is just a folder. The absolute file path would look like this: `/Users/Daniel Brand/Desktop/Quill/images`. Now, for the `logo.png` file that is inside an "images" folder, which is inside the Quill folder, so the relative file path would be `images/logo.png`, and the absolute file path would look like this: `/Users/Daniel Brand/Desktop/Quill/images/logo.png`. Similarly, the `icon.png` is also inside the "images" folder, which is inside the Quill folder, so the relative file path would be `images/icon.png`, and the absolute file path would look like this: `/Users/Daniel Brand/Desktop/Quill/images/icon.png`.

In addition to being a lot more concise and easy to work with, relative file paths have another advantage, which is relative file paths remain intact even if you move the location of your current working directory. Let's say, for example, I move the Quill folder from my desktop to my documents folder. The relative file paths still work, as all references are based on the current working directory. This is not true for the absolute file paths; they still reference "Desktop," so these files will not be accessible as the Quill folder has moved into Documents.

So let's summarize this chapter and start to build out the summary card for this topic: File Paths, Hyperlinks, and Attributes. In this chapter, we looked at file paths. We had a directory structure that looked like this, where the start was Macintosh HD, which was also called the root, and the Quill folder was the current working directory, where all our files and folders for the Quill project are located. We compared relative and absolute file paths. On two different levels, directly inside the Quill directory, the relative file path of the `index.html` file is just referenced as `index.html`, whereas the absolute file path looks like this: `/Users/Daniel Brand/Desktop/Quill/index.html`. Now, the `logo.png` file is inside the "images" folder, which is inside the Quill folder, so the relative file path is `images/logo.png`, and the absolute file path would look like this: `/Users/Daniel Brand/Desktop/Quill/images/logo.png`.

So let's set up the overall structure of the Quill project. We've already got our `index.html` file, and we'll now add a `register.html` file, which will be used for the registration page, and an empty "images" directory where later we'll store images used in the project. First up, I'm just going to delete these files we don't need them anymore. Inside the Quill folder, I'm going to go and add a new folder called "images." Let's now open up the Quill working directory inside Visual Studio Code. An easy way to do this is just to simply drag the folder in like this. If I click on this documents icon over here, you'll see that here's my working directory with the empty "images" folder and `index.html`.

I'm now going to create the `register.html` file by right-clicking inside the Quill working directory. I click "New File" and call it `register.html`. By adding the HTML file extension, VS Code knows that I'm working with an HTML file. Let's get our boilerplate by clicking exclamation mark, enter. I'm just going to update the title to "Register" and let's just give this an `h1` of "Register". So you can see now inside the Quill folder, we have an `index.html` file, `register.html` file, and an "images" folder that we'll later be putting images into. And as I said before, as we move through this HTML section of the course, you'll see why the concept of relative file paths is so important.

Next up, we'll learn how to connect different web pages and resources using hyperlinks and attributes. We'll be talking about hyperlinks and anchor tags, HTML attributes, absolute and relative URLs, and hyperlinks in lists. So what are hyperlinks? A hyperlink is a piece of clickable text, image, or element that navigates users to another web page. Looking back at the monday.com homepage, there is a "Get Started" button over here, which is a hyperlink that would take users to the registration page to create a new account. Another common location of hyperlinks is in the navigation bar, where text like "Pricing," "Contact Sales," "Login," and "Get Started" are all hyperlinks that would navigate users to other pages on the web application.

Now, an important distinction we need to make is between internal and external hyperlinks. These links in the footer of monday.com are examples of internal hyperlinks, just like the ones we saw before. Each of these links would navigate users to other web pages on the monday.com domain. In contrast, external links navigate users to other domains, like these social links, which are external hyperlinks. Clicking on one of them, like the Facebook icon, would navigate you to the monday.com Facebook page, which is an external site, as the web pages on facebook.com and not monday.com.

We'll now be taking a look at the anchor tag, which is how we create hyperlinks in HTML. They're called anchor tags as it is a metaphor to indicate that these tags create a stable, fixed link or reference point, much like how an anchor holds a ship in place. The anchor element is made up of an anchor opening tag, an anchor closing tag, and anchor text. This is the text that is clickable and would navigate me to the Facebook page if I were to click on it. But how exactly does the anchor tag know where to send me? To understand that, we need to introduce a very important concept called HTML attributes. We briefly touched on this in the HTML document structure video, where the boilerplate HTML code uses attributes. Here is an example of an HTML attribute: `href="facebook.com/quill"`. The HTML attribute lives inside the opening tag, and HTML attributes provide additional information about an HTML element. The attribute is made up of an attribute name as well as an attribute value, which for the case of a URL is wrapped in quotation marks, and you can either use single or double quotes. For creating hyperlinks, the HTML attribute we use is `href`, which stands for hypertext reference, and specifies the URL that the anchor text will navigate users to when they click it. In this case, clicking on "Facebook page" will navigate users to the Facebook page of our Quill application. The `href` is just one of many important attributes we will come across in this course. For now, just have a good understanding of what an attribute is and that the `href` attribute is always used in anchor tags to specify the destination URL.

Now, in the previous chapter, we spent a good chunk of time discussing absolute and relative file paths, and this will now finally come in handy to understand absolute and relative URLs. Typically, external hyperlinks have an `href` attribute specifying the full destination domain, complete with elements like `https://`. This is known as an absolute URL. An absolute URL is kind of similar to an absolute file path, where the URL provides a direct and complete path to a specific resource or web page on the internet, similar to how an absolute file path specifies the location of a folder or file in relation to the root folder. Absolute URLs are used for external links, like social media pages. In contrast, internal hyperlinks have an `href` attribute specifying a file relative to the current working directory. This is known as a relative URL. A relative URL is very similar to a relative file path, as they are both a way to reference a resource based on the current location. Relative URLs are used to link different pages within the same web application, like a link from the register button on the homepage to the user registration page.

Let's go and code up some internal and external hyperlinks in VS Code to demonstrate this. I'm going to be making a very basic clone of Wikipedia. I'm first going to make a new folder on my desktop called "Wikipedia." I'll then open up this empty folder in VS Code. I'll click "Open," go to my desktop, and open "Wikipedia." The first Wikipedia page is going to be about myself. I'll click "New File" and call this `Daniel Brand.html`. As always, I'll type `!` enter to get the boilerplate code and I'll hit save. The title of this HTML document will just be "Daniel Brand." Inside the body, I'm going to first add an `h1` and put my name, as this is what the article is about. Wikipedia articles always have some introductory text, so I'm going to put a paragraph here and put some introductory text about myself, which I just got ChatGPT to create, and it does a fantastic job of making me seem a lot more impressive than I actually am.

Next up, I'm going to add a section about my early life. I'll create the heading using an `h2` and use a paragraph element for the text, which again I got ChatGPT to write. Now, ordinarily, you would have more sections, so I would see more `h2`s and paragraphs, but to avoid making this video boring, I'm going to jump straight to the references, which is usually found at the bottom of the page. And again, I'll use an `h2` and type "References." Now, the references in a Wikipedia article are usually external hyperlinks. They're there to validate things that come up in the article, so that as readers of the article, we know that what it is talking about is authentic. I'm going to put two references to things that I discuss in my article. The first is over here, where it says, "He has been featured in several mainstream publications such as the Sydney Morning Herald." I'm just going to put a `1` in square brackets after this. The second reference I'm going to put is to this sentence here: "His local team came second in the State of New South Wales Champions of Champions competition in 2002." I'm going to put in square brackets and number `2` after this.

So now let's go and add the hyperlinks. To do this, we need to get our anchor tags, and in VS Code, all we do is type the letter `a` and hit enter, and we get our set of anchor tags, and very nicely, we also have the `href` attribute automatically there for us. This first reference was for the Sydney Morning Herald article I appeared in, so I'm just going to type "Sydney Morning Herald," and I'm going to copy and paste in the external hyperlink I have in my clipboard. I'm going to add a second set of anchor tags by typing `a` again and hitting enter. This time, I'm going to be referencing the Champions of Champions football competition, and again, I'm going to paste in the external hyperlink I have sitting in my clipboard. Let's give this a save and check it out in the browser.

So here you can see this Wikipedia page I've made about myself. If I scroll down to the references, you'll see that if I click these, I'll be navigated to those pages. This is the article about my first venture, Spoon Feed Me, where I appear along other students creating startups at a young age. Now, full disclosure, this title is "Uni students making a fortune." I'm not making a fortune; I still rent an apartment. And we can do the same thing with the second hyperlink. We'll click that to be taken to the external page, which in this case is a PDF sitting online.

So let's now go and add some internal hyperlinks. We're going to be doing the same thing that Wikipedia does, where different keywords inside paragraphs will link you to other sections of Wikipedia to explain what they are. I'm going to make a page about St. Ives, which is the suburb I grew up in, and a page about the sport wakeboarding. So inside our Wikipedia folder, inside VS Code, I'm going to click right-click, "New File." I'll call the first `St Ives.html` and I'll call the second file `wakeboarding.html`. In each of these, I'm just going to put a simple `h1`. I'll first get our boilerplate code, I'll update the title to "St Ives," and I'm just going to put a heading of "St Ives." For wakeboarding, I'm going to do the same. Grab our boilerplate code, give a title of "Wakeboarding," and give an `h1` in the body of "Wakeboarding."

So let's now go and link both of these pages to the `Daniel Brand` page. Inside the paragraph, I'm going to go grab a set of anchor tags by hitting `a` enter. The clickable text I want is "St Ives," so I'm going to copy that, remove it, and paste it in here. And this now becomes the hyperlink text, so it's clickable. Now, because the `St Ives.html` file is inside our current working directory, the Wikipedia folder, we just reference it like this: `St Ives`, and you can see that VS Code automatically finds the file for us, so I can just hit enter. And just as a reminder, this is the relative file path. Let's go do the same for wakeboarding. I'm going to go grab a set of anchor tags by hitting `a` enter. I'll cut the "wakeboarding" text and place it inside the anchor tags, and then for the reference, again, it's the relative file path from our current working directory, which is just `wakeboarding.html`, which VS Code automatically finds for us.

Now, just to drive home this point of relative URLs, I'm going to go make another HTML file inside a folder inside the Wikipedia folder. I'm going to right-click and create "New Folder" here, and let's call this one "University." The "University" folder could have a bunch of HTML files about different university courses. On the folder, I'm going to click right-click, "New File," and make a new HTML file called `engineering.html`. Inside here, I'm just going to get some new boilerplate. I'm going to give it a title "Engineering" and an `h1` tag of "Engineering."

Now, back on the `Daniel Brand` page, let's go and link to this new engineering page. Like before, I'm going to get a set of anchor tags by hitting `a` enter. I'm going to cut this text and place it inside the anchor tag so it's clickable. And now for the relative URL, this is inside the "University" folder, so I first type `University`, and you can see VS Code automatically finds that "University" folder, so I'm just going to click it. And VS Code can also see that I have an `engineering.html` file there, so I can either click this or start typing and click it. I just wanted to add this so I can show you an example of referencing another HTML page inside another folder.

So let's go and check this out now in the browser. So here you can see these internal hyperlinks appearing in blue. And if I click it, I'm navigated to that HTML page we made, "Engineering." If I click "St Ives," we're taken to the "St Ives" page. And if I click "Wakeboarding," we're taken to the "Wakeboarding" page. You'll also notice that the file path is up here, where for the `engineering.html` file, we placed that inside another "University" folder, whereas `St Ives` was just directly inside the Wikipedia current working directory. Now, if you want to have a bit of a laugh, you can have a read of these two stories that happened to me in my teenage years.

The last concept we need to cover before moving on and continuing adding to our Quill app is hyperlinks in lists. A common pattern you will see is having hyperlinks inside list items. It's because often a list will be used to structure navigations, like a main navigation bar at the top of a web page or a footer of a page. I found this nesting a bit confusing when I first started out, so I wanted to go through it step by step. It works like this: we have our standard unordered list, say a navigation bar, that will have "Login" and "Register" list items. The "Login" text now becomes hyperlink text inside the list item by wrapping it in an anchor tag. As you can see, we also have inside our opening anchor tag the `href` attribute, which is referencing the login page and is a relative URL. And it's the same for the "Register" text; it now becomes hyperlink text inside anchor tags, which is inside the list item, and there's also the `href` attribute pointing to the register page. So we can see we now have an anchor element wrapped inside list tags. Again, this pattern is very common, as we often want to provide clear structure for a set of hyperlinks, so nesting them inside an ordered or unordered list is a good way to achieve this, instead of having hyperlinks just one below another.

Let's use this technique and go tidy up our Wikipedia page. At the moment, I just have these two references at the bottom kind of floating. I'm going to add some structure by adding them inside an ordered list. The reason I'm using an ordered list is so that I can get the numbers 1, 2, 3, etc., which will then match the numbers I'm using as reference points inside the paragraph text, for example, like this number one here. So let's go and add our ordered list. I type `ol` and hit enter to get our ordered list tags, and then we're going to have two list items, so I'm going to type `li * 2`. Now all we have to do is copy and paste each hyperlink into the list item. Let me zoom out a bit. So now you can see we have an anchor element or hyperlink, which is nested inside the list items. Let's go view this in the browser.

So now you can see these hyperlinks under "References" are put inside an ordered list, and because I put one and two over here, they nicely match those references.

To finish off, let's add to our summary card: Anchor Tags and Attributes. We saw that an attribute is an additional piece of information inside an HTML opening tag. An attribute is made up of an attribute name and an attribute value, and we saw we always needed to use the `href` attribute inside anchor tags to specify the destination of the hyperlink text. We also looked at absolute and relative URLs. Typically, external hyperlinks like social media pages will contain absolute URLs, and internal hyperlinks to other pages in the same domain, like the register page from the homepage, will contain relative URLs, as it's all inside the current working directory.

So let's now apply what we've learned to our Quill project. The login and register in the navigation bar are going to be hyperlinks. The "Get Started" and "Learn More" in this hero section are also going to be hyperlinks. The Quill image in the top left corner of the navigation bar is also going to be a hyperlink, but we'll do that later when we add the image. I'm sure you're used to other web pages where clicking the icon in the top left always takes you back to the homepage; we'll do the same here. In the call to action section, the "Get Started" button is a hyperlink. These social media icons down here will also be hyperlinks, but we'll be handling those later when we look at SVGs. And this mini navigation panel at the bottom with home, login, and register will also be hyperlinks. And again, the small Quill logo over here will also be a hyperlink back to the homepage.

So let's now jump into VS Code and add in the hyperlinks. We can do... I'm first going to go add a new HTML page called `login.html`. I'll grab our boilerplate, give it the title "Login," and give it an `h1` "Login." Back to `index.html`. You'll see straight away we're going to be doing what we spoke about earlier: adding in hyperlinks inside list items. I'm going to cut this "Login" text and I'm going to type `a` to get a set of anchor tags. I'm going to paste in the "Login" text over here. This will now make it clickable. For the `href`, I'm going to be referencing the login page, as it is directly inside our working directory. I can just type `login` and you'll see it appear, and I'll just hit enter to grab it. I'm going to do the same for "Register," cut the text, add in anchor tags, paste in the "Register" text inside the anchor tags, and reference the `register` page. Again, this is also directly inside the Quill working directory, so all I type is `register`. Eventually, we're going to be adding in the Quill image, which we said was also going to be a hyperlink. So for now, I'm just going to pop a comment, which on my Mac is Command slash, on a Windows Control slash, and I'm just going to write "Add in Quill logo with hyperlink later." In the hero section, for now, I can only add in a hyperlink to "Get Started," which is going to link to the register page. The functionality of "Learn More" is that it will scroll down to this feature section, but we need to cover the material in the next chapter to be able to do that. So let's cut the "Get Started" text, grab our anchor tags, paste in the text here, and link to the register page. Now, scrolling down to the call to action section, we need to add some hyperlink text saying "Get Started." This is not inside a list because there's just one of them, so I'm just going to have a free-floating anchor tag. I'm going to have the text "Get Started" and I'm going to link to the register page. Okay.

So, moving down to our footer, the first thing I'm going to do is pop a comment here to remind me to add in the Quill logo and hyperlink.

Now looking at the social media icon, we'll be adding in the actual icons later in the SVG chapter, but for now, let's go and put in the hyperlinks. I don't actually have social accounts for the Quill app, so I'm just going to link to the homepage of each social media. Now, these are external hyperlinks, so we're going to be grabbing absolute URLs like before. I'm going to cut this text, add in our anchor tags, paste the text between the anchor tags, and I'm just going to paste in the Instagram homepage from my clipboard. It's the exact same process to the others, so I'm going to go ahead and do that now.

Great, so I've now added in all those absolute URLs and made each social media text clickable. Let's now finish up by doing this small navigation menu at the bottom of the footer. The work to do on the login and register is the same we've seen before for the other internal URLs. We're going to cut this, add in anchor tags, paste in the text, and reference the login page. Same thing over over here: cut text, add in anchor tags, paste in register text, and reference the register page.

So now, let's do the home hyperlink. I'm going to cut "home," add in some anchor tags, and paste "home" back in for the anchor text. But now, what URL should be referenced for the href attribute? Well, we're on the homepage, which is index.html, so all we're going to do is put index.html here. We're basically referencing itself. Now, later on in the boot camp, we are going to see a better practice for this, but unfortunately, it's not going to work for this page we're making now. So, just know there is a better practice, but this will work totally fine.

Let's now take a look at this in the browser, so you can see that all our hyperlinks appear as blue with an underline. And if I hover over them, you can see in the bottom left of the browser it's showing the file path. So let's go ahead and click on some of these. I'm going to click on login first, and I'm taken to the login page. I'm then going to click on register, and I'm taken to the register page. You'll notice that as I'm clicking on these and returning, the hyperlinks are turning purple, which indicates that these have been visited. We'll be talking about this a lot more in my CSS full course.

Now, let's visit some of those external hyperlinks. If I click on Instagram, I'm taken to the Instagram homepage. Now, when I click on home, I'm taken back to the original page. So all you're going to see is me move to the top of the page like this, but I have been navigated back to index.html.

Finally, we'll explore how to uniquely identify and style HTML elements with the help of the ID attribute. We'll be talking about what is the ID attribute and the concept of anchor linking.

So, what is the ID attribute? The ID attribute provides a unique identifier for an element. Not only is it used in HTML, but it's widely used in CSS and JavaScript as well. In HTML, it helps us link to a specific section of a web page. There are also other uses for the ID attribute, which we'll explore later on in this topic. In CSS, it helps us target and style a specific element, and in JavaScript, it helps us manipulate or get data from a specific element. Don't worry right now exactly what these mean for CSS and JavaScript; I just wanted to show you that the ID attribute is useful beyond just HTML.

Let's take a look at the ID attribute in action by looking at our navigation list in the Quill app. We can give the unordered list tag an ID of "navigation." The syntax is like any other attribute; it has a name, in this case, ID, and a value, in this case, navigation. Let's also add an ID attribute to the login hyperlink with an ID of "login-link" and an ID to our register hyperlink with a value of "register-link." As you can see, the ID attribute can be added to any HTML element. Let's also give our H1 an ID of "main-title."

It's important to note that an ID value can only be used once. It means for another element, like another heading, we could not reuse this value of "main-title." But another ID value, like "how-it-works."

Now, in practice, we don't go and add the ID attribute to all our HTML elements for the fun of it. We do it for a specific purpose, like anchor linking. Anchor linking is where hyperlinks can directly link to elements with an ID attribute present. Let me show you an example of anchor linking on one of the education companies I run. It's called Snap Revise, and part of the product is we offer these once-a-year seminars. I'm currently on the seminar landing page, and if I scroll down, you can see there are a bunch of details about the event. Going back to the top of the page, now if I click this "Book Now" button, it takes me to the bottom of the page where, during February and March, you would see over here the different seminars that are on and their date and timings. So this is an example of anchor linking. We've clicked a hyperlink and been transported to another section of the page.

So let's now see how this works in HTML. The first thing we would do is give an ID attribute to the heading we want to go to. In the example we just looked at, the heading was "Scheduled Seminars," where below the heading you would see all the different seminars that are on. I've given this heading an ID of "seminars." On the "Book Now" button, which is an anchor tag, we would then put an href attribute where the value references this ID with a hashtag and then the ID value "seminars." By doing this, the user is navigated to the heading when clicked.

Let's now finish off the file paths, hyperlinks, and attributes summary card. We looked at the ID attribute and focused on the concept of anchor linking. We achieved this by giving an ID attribute to an HTML element. We then reference this element inside a hyperlink by using a hashtag and the ID value inside the href attribute.

So let's now apply what we've learned to our Quill project. The "Learn More" hyperlink here will link to the features section below. Inside VS Code, I'm first going to go put an ID attribute inside this H2. To do this, I just type "id" and hit enter. We'll give this the value of "features." I'll then come to this "Learn More" button and turn this into a hyperlink. I'm going to cut "Learn More," I'm going to get a set of anchor tags by typing "a" enter, I'm going to paste in the hyperlink text, and I'm going to reference this ID by putting a hashtag and then "features."

Let's now take a look at this in the browser. So let's go ahead and click our "Learn More" button. You'll see that the page's move down slightly, but you can't really see the effect. So instead, what I'm going to do is zoom in a lot on the page. Now, if I click "Learn More," you'll see this a bit more pronounced where the heading jumps to the top of the page. To really show this effect, I'm going to go add in some dummy paragraph text between the "Learn More" and this heading so you can get a better sense of how it'll work.

In VS Code, I'm going to put a paragraph, and I could just go do something like "Lorem ipsum 10," but I'm a big sucker for "Hipster Ipsum" as I like having a chuckle when I code, and it just provides a little bit of extra character to our mockups. Let's go and get 10 paragraphs and click "Be me." Some of these words are just great, like "waistcoat," "meditation," and "dream catcher." I'm going to copy this text on my clipboard and paste it in the paragraph tag. Refreshing our browser, you'll now see all this dummy text below the "Learn More" button. When I click it, you'll see that I'm navigated down to this heading, and this should give you a better indication of what it will feel like on the completed web application where we'll jump down to a new section.

And now, before we finish up, I'm just going to get rid of this paragraph. We're making excellent progress, and we've now completed the hyperlinks and attributes topic. Next up, we'll learn about self-closing tags and images. We'll first take a look at how self-closing tags differ from regular HTML tags, and we'll then learn how to include images in our HTML files and spend a bit of time understanding the different kinds of images we can use in our HTML.

Let's start by learning about special types of HTML elements known as self-closing tags. We'll be discussing what are self-closing tags and the HR and BR tags.

So, what are self-closing tags? To answer that, let's quickly recap what the regular tag is, the tag we've been working with so far. The regular HTML tag requires an opening and closing tag to wrap the content. For example, the paragraph element is composed of a paragraph opening tag, a paragraph closing tag, and the paragraph content itself. So, regular tags have both an opening and closing tag that are wrapping content, like headings, paragraphs, and lists that we've seen before.

There is another type of HTML tag called a self-closing tag, otherwise known as a void element. For self-closing tags, the tag itself is the element with no content to wrap. We've already seen an example of a self-closing tag. So, I'm inside a new HTML file. One of the first things we always do is grab our boilerplate code by hitting exclamation mark enter, and part of this boilerplate code includes these meta tags. Now, back in the document structure video, we briefly spoke about meta tags. The tags are not wrapping any content. The attributes inside the meta tags contain this information for the browser. As the meta tags are not wrapping any content, they're self-closing. So we can see that a self-closing tag looks like this: `<meta charset="UTF-8">`.

Now, there is another syntax for self-closing tags that looks like this: `<meta charset="UTF-8" />`. Where there is a space at the end of the tag name and a forward slash. Both syntaxes are valid; however, it is more common to use the first option as it is cleaner. But I did want to show you both because you may see the other version in other places.

So let's now take a look at the full list of self-closing tags. The good news is that there are not that many, and only a few are used regularly, like the `<img>` tag, which stands for image and is used to place images in our HTML, and the `<input>` tag, which is used on forms. We'll be discussing each of these in greater detail later on. Two simple self-closing tags we can look at now are the `<hr>` and `<br>` tags. `<hr>` stands for horizontal rule; it creates a visible line between content. The tag can be either `<hr>` or `<hr />`. The `<br>` tag stands for line break; it creates a line break between content. The tag can be either `<br>` or `<br />`.

Let's go and use both of these tags inside VS Code. I'm going to create a new file by clicking "New File," selecting "Text File," I'm going to select a language, search for "HTML," and hit enter. As always, I'm going to grab our boilerplate HTML by hitting exclamation mark enter. I'm straight away going to save this file by hitting Command S on my Mac, going to my desktop, and let's call it "self-closing.html." I'm going to build a very simple page containing contact information. I'm going to make it for Jon Snow, one of my favorite characters from Game of Thrones. Let's call the document "Jon Snow Contact Information." I'm going to go down to the body. Inside the body, I'm going to add an H1 and put his name: "Jon Snow." I'm then going to put his address in paragraph tags. So I'll grab the paragraph tags by hitting "p" and enter. "Jon's address is Castle Black, The Wall, The North, Westeros." I'm then going to add a short description of him below. I'm going to grab paragraph tags again and paste from my clipboard the short description I have.

Let's take a quick look at this in our browser. So, there are two improvements I want to make to this. The first is that I want each portion of the address to appear on separate lines instead of being in one sentence like this, comma-separated. The second improvement is that I want a visual divider between this part of his name and address and his profile information. Let's do the visual divider first. I'm going to add the horizontal rule. So all I do is type "hr" and hit enter. I'm going to save that and let's refresh the browser to see what we get. You can see we get a nice horizontal rule separating his name and address from his profile information.

Let's now go sort out the address. I'm going to delete the comma, hit space, and type "br" and hit enter. The reason I hit space was because if I didn't do that, VS Code would think I'm just typing "br" after "black" and not looking for a tag. Now, you can leave the `<br>` tag like this, or you can remove the spaces between the text. I personally like leaving space as it is more readable for me. I'm now going to do the same thing for the other commas: remove comma, type "br," hit enter. And for this final comma here, I'm going to remove it, hit space, type "br," and hit enter. Let's refresh the browser and see what this looks like. You can see this address is a bit more readable, and it appears more like how it would on a letter.

Now, a question you may have is, why can't I just use separate paragraph tags? So, for example, why can't I just do a paragraph for "Castle Black," a paragraph for "The Wall," a paragraph for "The North," and a paragraph for "Westeros"? I'm going to refresh the browser to see what this looks like. So, the first thing you notice is that there's spacing between each line. Now, this is not the main reason you wouldn't do this; this is easily fixed in CSS. The main reason you wouldn't do this is because this is like a contained unit; it's a paragraph of text that contains an address. It doesn't make sense to split up the paragraph into different paragraph tags from an HTML perspective. It makes a lot more sense to keep it as one paragraph and then use the `<br>` tag to visually break it up. So, as a general rule of thumb, when you have a block of text and want part of that text to appear on separate lines in your browser, it's best practice to use a `<br>` tag instead of separating it out by elements.

Now, in practice, the horizontal rule is not rarely used on modern web pages. I've come to this nice-looking website here. I'm going to scroll down to the footer, and you'll see at the bottom this very faint gray line here and this very faint gray line here. Now, at this stage of the game, you would think that is a horizontal rule, so we'd expect to see a horizontal rule there. I'm going to go into the dev tools and take a look at this. As you know, we go right-click, inspect. I click on this icon to select the elements, and you'll see in the HTML, there is no horizontal rule tag here. In modern web design, the approach is to use CSS instead, where we add a border to this element, something we will look at in my CSS full course. For now, I just want you to appreciate the horizontal rule tag is not actually used that much in practice. When I was making this video, I spent a lot of time looking at modern web pages and just couldn't find it. The only place I could find it was on the OG Berkshire Hathaway HTML-only website. If I inspect these gray lines here, you'll see we have our horizontal rule.

Now, while horizontal rules are not that commonly used, line breaks still are. So let's summarize this chapter and start to build out the summary card for this topic: self-closing tags and images. We looked at self-closing tags where the tag itself is the element with no content to wrap. We saw that there were two syntaxes for self-closing tags, like `<hr>` or `<hr />`, where the first one, without a space or slash, is more commonly used.

So let's now apply what we've learned to our Quill project. We saw in the previous chapter that horizontal rules are not commonly used, but line breaks still are. I'm going to add a line break here. I'm doing this because I specifically want the first line of our heading to always read "Mindful Living For The" and the second line to read "Digital World." Using a line break will ensure this heading always divides like this visually. So let's go and add this to our project. Inside my H1 heading, I'm going to go over here and type `<br>` to get my break tag. And as I said, I like to leave space between the `<br>` tag and the text either side. Let's see how this looks in the browser. So you can see the effect here. The line break tag has pushed "Digital World" onto a second line, so that we have "Mindful Living For The" on the first line of the heading and "Digital World" on the second line of the heading. And again, remember we don't want to use two H1s to achieve this because this is one sentence; we want to use a line break to visually push this onto two lines.

Next, we'll explore how to enhance web pages by embedding visuals using images. We'll be discussing how images are used in web design, the image tag, and absolute and relative URLs.

So let's take a look at images in the context of HTML. Images add visual identity, essential for branding, and can aid in illustrating concepts easily. This is a web application called Notion. It's one of my favorite productivity tools, and their design style has become somewhat legendary in the design community. On the homepage, we can see here a simple black and white line illustration featuring stylized characters. It's a branding element. Images are also used for product illustrations, like over here. The purpose of them is to give a glimpse of how the product looks and feels and to give users an indication of how it works. And here again, on the side, we can see this stylized character, which is a branding element. It's also very common to use real-life imagery that is relatable. This kind of imagery improves our personal engagement and evokes our emotions. This section of the homepage is about the Notion community, which evokes a sense of belonging. So over here, it is fitting to have real-life imagery of their community meetup in Tokyo. We can also see real-life imagery used for testimonials, which makes sense because it adds confidence to see real images of people advocating the product.

So let's now take a look at the image tag in HTML. The image tag, or `<img>` tag, is one of the most common self-closing tags we will be using throughout the course. The image tag has two important attributes. The first is the `src` attribute. This is a URL which points to the actual image file, in this case, a picture of a dolphin that's posted online. The second attribute is the `alt` text attribute. This is a text description of the image and is used by browsers for two main purposes. The first is for screen readers, which is assistive software that translates on-screen information into speech, enabling visually impaired users to interact with computers. The second is for SEO, search engine optimization. The alt text allows search engines like Google to properly index images. So when you go on Google Images and search for a "blue dolphin," Google knows that this is an image of a blue dolphin because of the alt text I'm providing.

So let's now go add an image in VS Code. I'm going to make a new HTML file by clicking "New File," selecting "Text File," then clicking "Select a language" and search for "HTML." I'll straight away get our boilerplate by hitting exclamation mark enter, and I'll save this file by hitting Command S on my Mac, going to the desktop, and saving it as "images.html." I'll update the title as well to "Images."

Now, a popular tool that I often use to grab stock images is Unsplash, as the images look very professional. I'm going to go grab an image of a dolphin by just searching "dolphin" in the address bar. Let's find a suitable image. I like this one over here, so I'm going to click it and then right-click on the image and go "Copy Image Address." I'm going to head back to VS Code and inside the body tag, I'm going to type `<img>` to get our image tag. For the `src` attribute, I'm just going to paste the URL I just copied from Unsplash. Now, just to clean up this URL, there's a whole bunch of stuff here which is auto-formatting things, so I'm just going to remove it after the question mark. Now, at this stage, I wouldn't expect you to know that, so don't worry too much about it. Most images from the internet you'd be grabbing wouldn't have that. For the `alt` text, I'm going to give this a description of "a pod of dolphins swimming."

Let's take a look at this in the browser. So, here is our image, and it appears massive because HTML is just displaying the source image file, which in this case is a fairly large image. I'm just going to zoom out on the browser, and you can see the image inside our HTML document.

We're going to now revisit the concept of absolute and relative URLs. We saw this already in the hyperlink chapter, and they're also relevant to images. An image source can be referenced in two ways. The first is with an absolute URL. This is often used when an image is externally hosted, like we've already done with the Unsplash image. The second way an image can be referenced is using a relative URL. This is where the image is located somewhere inside our current working directory, and we are referencing the image file.

So let's see how this works inside VS Code. So, first up, I'm going to go grab another dolphin image. I like this one over here, so I'm just going to click over here, "Download Free," and it's automatically going to go into my downloads folder. I'm just going to rename it "dolphin.jpeg" and I'm going to drag it over here onto my desktop. Now, often times when referencing images using a relative URL, you'll have multiple images, and they'll all be stored in a folder. So I'm going to create a new folder called "images," and I'm going to move the dolphin image inside there. Now, our "images" folder and our "images" folder are both on the desktop, so the desktop is the current working directory. So let's go into VS Code and add this image using the relative URL.

Now, as I just mentioned, "images.html" is on the desktop, which is our current working directory, and the "images" folder is also inside that same current working directory, the desktop. So I'm first going to grab the folder by going "images" and you'll see that the folder comes up here, and then I'm just going to add the "dolphin.jpeg" image. Let's give it an `alt` text of "a dolphin smiling."

So let's check this out in the browser. So you can see now our second image is here. The first image is using an absolute URL, and the second image is using a relative URL where the image is stored somewhere inside our current working directory.

So, in this chapter, we learned about image tags. The image tag is a self-closing tag with two attributes: the `src` attribute is a reference to the image file, and the `alt` text attribute is a description of the image for the purpose of screen readers and SEO. We also revisited the concept of absolute and relative URLs that we have already summarized in the hyperlinks topic, but it's a really important concept, so I wanted to add it onto this summary card as well. An absolute URL is often used for an image externally hosted from our project, and a relative URL is used when the image lives inside our current working directory. In the Quill application, we will be saving our image files inside our project, so this is the method we will mainly be using.

So let's go ahead and add images to the Quill homepage. In the features section, we have three sets of these with heading text, paragraph, and image. So we'll need to grab three different images. Now, I know there are other images on the Quill homepage, like the logo and social media icons, but we're actually going to be using a different image type for those called an SVG, and we will cover that in the next chapter.

Now, the images I'm using are from this fantastic tool called unDraw. It has thousands of beautiful illustrations. All you do is click "Browse Now" and go to search and look for the type of image you want. My images all contain a phone, so I'm going to type "phone," and you see we get all these really nice illustrations. Now, the really cool thing you can do is change the color of all of these. If I come to this color square here and click it, I can change the colors of all the images on the Quill homepage. I'm using a hex color of this. Now, don't worry about hex colors right now; we'll be talking about this a lot more in my CSS full course. The first features image is this one here, so I'll click on it and go "Download PNG." In my downloads folder, it will appear like this. I'm just going to rename it "features-1."

Now I've gone ahead and grabbed the other two images from unDraw in the correct colors. If you're coding along with me, I'm going to put these images in the description below so you can download the same images and add them to the project. I'm going to copy these images and put them inside the "images" folder in the Quill working directory. So I'm going to copy these, head over to my desktop, and I'm first going to remove some of these files that we've done in previous videos; it's getting a bit messy. So I'm going to select them and go "Move to Bin." Inside the Quill folder, we had this "images" folder, so I'm going to paste in those three images.

Let's now put them in our HTML document in the features section. This here is feature one, this here is feature two, and this here is feature three. So I'm going to pop the image below each paragraph element. I'm going to type `<img>` to get the image self-closing tag. For the `src`, I'm now going to go reference the images I have in my project. And if you remember, we're going to be using a relative URL to achieve that. The images I need are inside this "images" subfolder, so I'm first going to type "images" to grab the folder, and then straight away VS Code shows me what's inside that folder, so I'm just going to click "features-1." I'm going to add the `alt` text of "simple online journal."

Let's go grab the second feature image. I'm going to type `<img>` to get the image tag. For the `src`, it's the same thing: I got "images/" and now get "features-2." For the `alt` text, I'm going to write "beautifully displayed journals." And for the final feature, I'm going to pop below this paragraph element here, type `<img>` and hit enter. For the `src`, again, it's the same thing: "images/" and then I'll click "features-3." For the `alt` text, I'm going to put "create journals anywhere."

So let's go check this out in the browser. So you can see that the images are now appearing nicely below each paragraph for each feature. Now, one thing you'll notice is that these images are huge. HTML will always display the image as its original file size. Inside the "images" folder, I'm going to right-click on an image and go "Get Info." You can see that the dimension of this image is 117 by 904, which is quite large. Image sizing is something we handle properly in CSS, but for now, I do want to make this image a bit smaller so that it's easier to work in this HTML file. To do that, inside the image tag, I'm going to go add another attribute called `width` and hit enter. I'm then going to enter a value of "300" pixels. I'm going to hit save and then refresh the browser. You can see the image has now shrunk to 300 pixels. When I use just the `width` property, the height automatically scales to maintain something called the aspect ratio. If I did specify a `height`, say 100 pixels, you'll see the image becomes distorted. Instead of setting a `width`, I could have just set a `height`, let's say 400 pixels, and in this case, the `width` is automatically calculated to ensure the aspect ratio remains the same.

Now, in all honesty, don't worry about any of this; we're going to be deleting it anyway when we get to CSS. But for now, I do just want to make these images a bit smaller so that the images don't appear massive when we're inspecting the HTML document in the browser. I'm going to add back the `width` of 300 pixels, and I'm going to copy and paste this into the other images. So now we end up with more reasonably sized images. Again, don't worry about any of this aspect ratio pixels; we're going to be covering all this at CSS. For now, you can literally just copy `width="300"` pixels to resize the images and forget about it.

Finally, we'll dive into Scalable Vector Graphics and how to implement them using SVGs. We'll be looking at comparing bitmap and vector images, the SVG tag, and how to use SVGs.

To understand SVGs, we need to take a step back and look at the different types of image formats. Most images you look at in day-to-day life, like photographs, are bitmap images, also known as raster images. They are made from a grid of pixels, with each pixel assigned a color value. Here's a TikTok video showing this in quite a neat way. Here's a photograph of a person, and the person in this video is recreating this image inside Excel by assigning each grid a different color value. Many hours later, they've built two rows, and 3,000 years later, they've got a few more rows, and after around 240,000 cells, they've recreated the original photograph inside Microsoft Excel. Bitmap images are resolution-dependent. This means that the quality and clarity of the image are directly tied to the pixel dimensions. So enlarging the image beyond its original size can lead to a loss of sharpness and detail, which we call pixelation. Bitmap images are typically used for photographs and images that require a lot of detail, and typical file formats for bitmap images include JPEG and PNG.

So let's take a look at some examples of bitmap images on the Notion page. Real-life imagery, which are photographs, will be bitmap images. So this photo of the community meetup and profile pictures of people in the testimonials will be real-life imagery. And now I want to show you the pixelation issue I was talking about earlier. If I go to this photo over here and click right-click, "Copy Image Address," and paste it in another tab, I'll be taken to the source file of that image. And as you can see, this is the original size of that image. If I now zoom in on this image, you'll see that as it gets larger, it becomes very pixelated; it's losing quality, and that's because bitmap images are resolution-dependent. Enlarging the image beyond its original size will lead to a loss of sharpness and detail.

Now, the other image type is called a vector image. These images are made by mathematical equations and instructions for rendering shapes, parts, and colors. They are resolution-independent, meaning that if the image is enlarged, it won't lose quality because it is being described mathematically, as opposed with a fixed number of pixels. Vectors are commonly used for smaller images like logos and icons, and common formats for vector images are SVG, which stands for Scalable Vector Graphics, and AI, which stands for Adobe Illustrator, which is a type of vector graphic file created in Adobe Illustrator, a popular vector graphics editing program.

So let's now take a look at some vector images. Back on the Notion homepage, I'm now in the footer. The Notion logo over here is a vector graphic, and these social media icons are also vector graphics. Now, most of the time, the vector graphics we're going to be working with are SVGs, and both the logo and social icons here are SVGs.

So let's take a look at the SVG tag. An SVG has two components to it. The first component is the SVG tags themselves, which has an opening and closing tag. The SVG tags have several attributes which determine styling rules, such as `fill`, which sets the background color; `stroke`, which sets the color of the lines and shapes drawn; and `stroke-width`, which sets the thickness of the lines. The second component of an SVG is the `<path>` self-closing tag. The `<path>` tag has an attribute that plots the shapes and line paths of the SVG; it gives the image its form.

Now, these attributes may seem very overwhelming. The good news is that you're never going to code your own SVGs; you'll be grabbing the SVG code from other places. For example, the social media icons we're going to be using in the Quill application is from this resource called Ion Icons. You just search for the icon you want, say "Facebook," you then just click on the icon, and you can download the SVG here. As you can see, there is an array of icons you can choose from. Don't worry too much about the specifics of the SVG code; you just need to know the basics of what makes an SVG: where the attributes inside the SVG tag are styling rules, and the attribute inside the path tag defines its shape. You're either going to grab SVGs somewhere online, or they're going to be provided to you by someone like a designer.

Now, an important idea we need to discuss is how you actually go about using SVGs in your code. You have two options. The first is called inline. This means the SVG code is used directly inside your HTML code. So you would place your SVG, say, in your index.html document, exactly like this. Let's go to VS Code and see how this works. The first thing I'm going to do is download a sample SVG we're going to use. Let's grab this "plane" one. I'm going to click "Download SVG," and this will go to my downloads folder. Now that I've downloaded the file, I'm going to go and make a new folder on my desktop called "SVG." I'm now going to move the SVG I just downloaded into this folder, and I'm going to open this folder just to double-check it's there. Great, our SVG is in this folder. I'm now going to open up this folder in VS Code. So I'm going to go "Open," go on the desktop, click the "SVG" folder, and click "Open." If I double-click the SVG, you can see here is the SVG code. I'm going to come in this folder and create a new HTML document. I'm going to right-click, make sure I'm inside this folder, click "New File," and let's call this "svg.html." I'll grab my boilerplate code straight away by hitting exclamation mark enter, and let's title this document "SVG," and I'm going to hit save.

Now, to place the SVG inline, all you would do is copy the SVG code and pop it inside the body. I'm also just going to give this an H1 of "Plane." Let's check this out in the browser. So you can see that our SVG is rendering inside the browser, and it's been placed directly inside the HTML document. In fact, this SVG over here is actually doing nothing. If I deleted it, there'd be no impact. Let me refresh the browser, and you'll see nothing has changed because the SVG has been placed directly inside the HTML document. I have stored the SVG because we will need it in a bit, but I just wanted to show you that because the SVG is placed inline here, this has no impact.

The other option is to use an image element and reference the SVG exactly how we do with bitmap images. We would use an image tag like this on index.html and use the `src` attribute to reference a relative URL where the SVG is stored. In this case, "logo.svg," which is inside the "images" directory. So let's look at this option inside VS Code. Back to our previous example, I'm now going to remove this SVG, which we did inline, and instead, I'm going to go grab the image tag by typing `<img>` and hitting enter. Now, for the `src`, I'm going to go reference our SVG, which is sitting in the exact same directory as our HTML file, so all I need to do is type "airplane.svg" and it will locate our SVG, and I'll hit enter. For the alternative text, I'm just going to write "airplane."

Let's check this out in the browser. So you can see we end up with the same result. Our airplane is rendering in the browser, but this time it's not inline; it's with an image tag that is referencing this SVG here. It means that the existence of this SVG is important. If I were to delete this, the `src` attribute in the image tag would be referencing nothing. Let me show you that. I'm going to delete this, and I'll refresh the browser, and you'll see the SVG disappears. All we're left with is a broken image icon and the alt text.

Now, before I go on and say which option is better, I want to quickly talk about the reason we even have these options, whereas we didn't have this option when it came to a bitmap image used in the previous video. This is because a bitmap image is what is called embedded into the HTML; we always have to reference either an absolute or relative URL for a bitmap image. Whereas a vector graphic can be directly integrated into the HTML document using the SVG tags. It's kind of like the vector image is made inside the HTML, whereas the bitmap image lives outside the HTML, so we could never place the bitmap image directly inline in the document; we always have to reference it with the image tags.

So, which options should you use? My preferred option is this one on the right, using the image element, and there are two reasons for this. The first is that we have something called separation of concerns. This is a term you'll hear a lot in software engineering. It is a design principle in which programs are organized into distinct sections, each addressing a specific aspect of functionality. In simple words, we want to separate our SVGs from our structural HTML. This helps with keeping our code well-organized and easier to maintain. The second reason is performance. The browser can store these images for quick retrieval, reducing the amount of data that needs to be loaded each time and speeding up the page loading times. Another side benefit is that more complicated SVGs can get very long, so it is nice not to have them clutter our main HTML documents. In this course, we'll be using the second method, but be aware the first method can also work.

So let's finish off the summary card for this topic: self-closing tags and images. We looked at SVGs. We saw an SVG has two components: the SVG tags, which have attributes defining the styling rules, and the `<path>` self-closing tag that defines the shapes and form of the SVG. We also saw the best practice of using an SVG through the image tag, where the SVG is referenced as the `src` attribute. This means we have the SVG located somewhere, like inside an "images" directory, and this SVG would be referenced inside the main HTML document, like index.html.

So let's go and add SVGs to our Quill homepage. We have an SVG logo in the top left corner here, and at the bottom of the page, we have that same logo, as well as SVG social media icons at the bottom here. So let's jump into VS Code and code this up.

So, first up, let's go grab all the social media icons from Ionicons. I'll grab the Facebook one first. I click "Download SVG." Now, you can go ahead and download them all yourself, but I've put a download link to each of them in the description below. Now, for the Quill logo, this is a bit of a custom SVG; it's not from an icon website like Ionicons. I actually made this myself inside Figma, which we will be covering later on in the boot camp. You can download the Quill SVG in the description below, and this would be a similar experience for more custom SVGs where a designer would likely provide you with the file.

Once everything is downloaded, you'll have five social media SVGs and the one Quill logo SVG. Let's move all of these into the "images" folder inside Quill. So let's jump back into VS Code where we've been working on our Quill project.

Let's first add the Quill logo in the navigation. We're basically going to do what this comment says, so let's remove it and add the logo. We're going to grab an image tag, so I'm going to type `<img>` and hit enter. Inside the `src` attribute, I now need to reference the logo SVG. We know that's inside the "images" folder, so I'm going to type "images/" and it's the "quill.svg" file. I'm going to give it an `alt` text of "Quill logo." Let's check that renders in the browser. So there it is. We can see the SVG has rendered in the browser.

Now, what we want to do is make this SVG clickable because this navigation bar is going to be on most pages throughout the application. We want the functionality to be that when you click the logo, you're always taken back to the homepage. That's how it's done on most web applications. So now, what we're going to do is going to seem a bit tricky, but we're actually going to wrap our image tag with anchor tags. So, the first thing I'm going to do is just cut this image. I'm going to now grab our anchor tags by hitting "a" enter. The `href` attribute is just the "index.html" page; it's where we want to be navigated back to when we click the SVG. Now, ordinarily, inside the anchor tags, we put text like "login" and "register," but I'm just going to paste in the SVG I just cut. So what this has done has made the image clickable. If I refresh the browser, you'll see that the cursor changes, and then I can click this, and I'm just taken back to the original page. So you can't really see much of an effect, but this image is now clickable; it's a hyperlink. This may seem a bit tricky, but just think about it: instead of having text here like "Get Started," I'm just putting an image. So the image is acting like the clickable text.

Let's go and do this exact same thing at the bottom of the page. I'm simply going to copy this, delete this, and paste in what I copied. It's what we had on the design, just the Quill logo again, and we've made it clickable to take you back to the homepage. And here it is. Now, it might look a bit weird why the Quill logo is appearing next to the "Get Started" as opposed to below. What's going on there? Don't worry about this behavior for now; it is something we will talk about later on in the course.

Let's go and sort out our social media icons. Instead of this placeholder text being clickable, we want our SVG clickable. So all I'm going to do is delete the text here and grab an image tag. I'm going to go find the SVG for Instagram. We know that's in the "images" folder, so I type "images/" and click "instagram.svg." I'll give this an `alt` text of "Instagram logo." Let's refresh the browser. So you can see that the Instagram logo appears, and it's also clickable, and when I click it, I'm taken to the Instagram homepage.

Now, this one looks even more tricky. We have the image tag wrapped by anchor tags, which is then wrapped by list tags. This kind of wrapping is quite common, so it is something you will get more used to, but it can seem quite tricky to start. You can kind of think of it like this: usually, in a list, we would have some text, but in this case, instead of text, we're just putting an image.

I'm now going to go do the same thing for each social media icon. Grab an image tag, get the source of the image, and give it an `alt` text. To avoid boring you, I'm just going to go ahead myself and do them, so you can see. Now I've added in all the social media SVGs. Opening up the browser, we can see that all the social media SVGs have rendered. Now, because they're in a list...

structure. We still have this bullet point, and we will take care of that in the CSS course.

Now, these SVGs are appearing very large. So, what I want to do is just temporarily reduce their size. I'm going to do the same thing I did with the images by adding in a width attribute.

Now, a quick trick I want to show you that I sometimes use is how to get cursors in multiple places at once when typing the same thing. Let me zoom in a bit. On my Mac, I'm going to click the Option key, and I'm now going to click in the same location my cursor currently is, but on the line below, while holding the Option key, and you'll see that a second cursor appears. I'm going to do the same thing on the other three. I believe the shortcut on Windows is Control Alt.

Now, what I'm going to do is type `space width`, hit Enter, and let's make the width 20 pixels. I'm going to save this and then just click away. So, of course, you could have written it once and copied and pasted it four times, but sometimes this trick can be helpful.

I'm going to refresh the browser so you can see that our social media icons are at a more appropriate size. And as I mentioned in the images chapter, we are going to resize this with CSS, so we will later be removing this width attribute here. I just wanted to do it for now so that our document was a bit more workable.

Now, the last thing I want to do before we finish up is add an emoji in our H1. In our design, we have a mobile emoji over here. Now, I've left adding the emoji for this chapter because I wanted to show you we can just copy and paste emojis straight from the internet. We don't need to store images separately and reference them, and they're also not complicated SVGs we need to put into our code. So, let's go and grab that emoji now.

There's a ton of emoji tools out there, but I use this one called React Emojis. They're just a bit more developer-friendly. So, I'm going to go search mobile here. The emojis I want to use, I just click it, and it copies it to my clipboard. I'm then just going to paste in the emoji here. Hit save, and let's go check this out in the browser. So you can see that our mobile emoji is rendering nicely inside this heading.

Another topic done and dusted. It's now time to look at more challenging concepts in the topic HTML forms. This is the bread and butter of web development because almost all web applications need to be able to submit data to a server, which is done through an HTML form. We'll first learn about the different form elements like inputs, text area, and dropdowns, and we'll then take a deep dive into how forms actually submit data to a server.

Let's begin by understanding the basic setup and organization of HTML forms, focusing on form structure. We'll be discussing different form elements, form submission, and the form tag. So, this topic is getting my more difficult stamp. We're going to be discussing some more complex concepts around web development.

So, what are forms? Forms collect and submit user-provided data and send it to a web server for processing. An example of a form we all interact with is a registration form. This is the Unsplash registration page. Unsplash is a tool that provides high-quality stock imagery, and over here, you can create a new account. This element is a form. This is the Unsplash homepage where you can search for different images. Although it may not seem like it, a search bar like this is also a form. From a web development perspective, the user is submitting data for processing, in this case, to find specific results.

Now, there are several form elements that make up an HTML form. Forms act as a container for various form elements that allow users to input different types of data. This is a form to contact the sales team at Asana, another project management tool. I'm going to be using this form throughout this topic because it contains all the major types of form elements we will be learning about.

At the top of the form, we have inputs. It uses first name, last name, email address, and phone number. Below this, we have a set of dropdowns. The first one is country, where the user can select from a list of predefined countries, and the second one is company size, which has different ranges of numbers like 1 to 9 and 10 to 99. The next one down is a text area, where the user can put some text about what they would like to discuss. And finally, we have a button which submits the form. These elements all live inside a form element.

Now, before we start looking at coding our own forms in HTML, we first need to get a good understanding of the concept of form submission. Forms need to know where to and how to send data. We're going to understand this concept by looking at interactions we can have with a librarian at a library.

The first interaction we're going to look at is borrowing a book from a library. If you wanted to retrieve a specific book from the library, you would go up to the librarian and ask for a book. The librarian would then head over to the shelf where the book would be and would look for the book. If the book is present, the librarian would take the book from the shelf and give it to you. I want to look at two key things in this interaction. The first is what I am asking the librarian to do. In this example, it's "retrieve me a book." This is how I'm interacting with the librarian. The second is the location of the book. In this example, it is a history book I'm asking for. This is the where the librarian is going to fulfill my request.

I now want to look at a second interaction we could have with the librarian, which is donating a history book, and it would look like this: I would take the book to the librarian and donate it. The librarian would then work out which type of book it is and put it on the correct shelf. Again, there are still two key things that make up this interaction. The first is what I'm asking the librarian to do. In this example, it's "take the book I'm donating." This is the how I'm interacting with the librarian. The second is the location of where the book should go. In this example, it is a history book I am donating. This is where the librarian is going to fulfill my request.

You may be thinking, why have I chosen these two specific cases? Like, donating a book is fairly random compared to just returning a book. I've chosen these two very, very specific real-world examples as they closely relate to two different ways we work with HTML forms, which we will look at now.

So, let's finally take a look at the form tag. The form element has an opening and closing tag, as we mentioned earlier. These tags act as a container for form elements like inputs, dropdowns, etc., which we will be looking at in this topic. For now, I've represented these elements with a comment which says "form elements."

Now, the form element has two very important attributes. The first is the action attribute. The action attribute specifies the location on the server where the data will be sent for processing. The location on the server won't mean much to you at this point. All you need to be able to do is conceptually understand what this means, and you already do. It's just the "where" in the library analogy. Just like in our example before, if the person was borrowing or donating a book, the librarian went to the history shelf, and the same thing's happening here. The location of the server is `/api/v1/journals`. This is where, in our Quill project, our journal entries will be stored. So, think of it like a history shelf in the library or the journal section storage on the database. There could be many other locations on the database for different kinds of data, just like there are different sections of a library. For example, there would be another location where we keep our user data, something like `/api/v1/users`, just like there would be another shelf for sciences in a library.

Now, I don't love the name "action" for this attribute. I'd personally call it something like "location," but hey, I didn't invent HTML, so what leg can I stand on?

The second attribute is the method attribute. This determines the HTTP method used for handling the form data. We will be looking at HTTP methods in a later topic in the full stack boot camp, so don't worry about the details right now. Let's just get a conceptual understanding. Back to our library analogy, this is the "how." In one case, the person was borrowing a book, and in the other case, they were donating a book. In the HTML form, we have different HTTP methods which detail how we are interacting with the server. If we're there to retrieve, submit, update, or delete data.

You can see here that this is a POST method. This is like us donating the book; we are sending the data to be stored in the server. Other common HTTP methods are GET, PUT, and DELETE. The GET method would be like borrowing a book, just like we're asking for a specific book. In web development terms, we are asking to get specific data from the server.

Now, again, at this point, this all may seem a bit overwhelming, but please don't stress about it. We will be discussing HTTP methods in much greater detail in a later topic in the full stack boot camp. For now, you just need to conceptually understand the idea of what a method is. It simply details how we are interacting with the server, just like how we interact with the librarian.

Let's go back to the visuals of the library and add in the HTML attributes as if it was us interacting with the server to get a clearer idea of how this all works. Let's first look at the case of borrowing the book. The "how" is the method attribute, and it is how we are handling the data. As we are trying to borrow a book, we are getting it, so the method is GET. The "where" is the action attribute, and specifies where on the server the data is. As we are borrowing a history book, we are looking in the History Section, so the action would be something like `/history`. Now, I know the action previously had something like `/api/v1/` whereas this one doesn't. Don't worry too much about that, it's web development stuff we'll learn about later.

The second case was donating a book. The "how" is still the method attribute, and is again about how we are handling the data. In this case, we are donating the book and not expecting to get anything back. We are POSTing it, so the value of the method attribute here is POST. The "where" is still the action attribute, and again specifies where on the server the data is. As we are donating a history book, the book is added on the History Section, so the value of the action attribute is still `/history`.

Let's go take a look at the form element and its attributes on the Unsplash join page. I'm going to right-click and go "Inspect." I'm then going to click on this inspection tool and click one of the four form elements here. Scrolling up, I can see the form element over here, and you can see when I click it, it hovers over the entire form. This is the container element I was talking about earlier that wraps around all the different form elements we'll be looking at soon. What I want to do is look at the attributes. You can see the action attribute over here, which has a forward slash with a string of characters. This is the location on the server where the data will be sent once the form's submitted. We can also see the method attribute here. In this case, it's POST, which makes sense. We're going to be sending the data to the server to create a new record, that is, create a new user on the database. It's like donating a book; we're just sending the data, we're not expecting anything back.

Let's now go check out the form on the homepage. If you remember, this search bar here was also a form. So, let's go inspect it, and you can see we have the same form element. The action here is referencing a different location on the server: `/search`, and the method here is GET, not POST. In the library analogy, this was like borrowing a book; we're asking the librarian to go get something for us, just like we're asking the server to return specific results for our search query.

Now, before we summarize this video, I just wanted to highlight a small thing. Starting your web development career and learning things like Dev tools definitely makes you feel a bit like a web warrior. I certainly did. You may go away and start checking out the underlying HTML of different forms across different web pages, and you're quickly going to become confused because you're not going to see the attributes I just spoke about. For example, on this Asana page, if we go inspect and check out the form element, you'll see that the method and action attributes are absent. This is because a front-end framework like React is actually handling the form data. In our Quill project, when we get up to the React section, we'll be doing the exact same thing. This doesn't mean what we've just learned is a waste of time. In fact, if you've come away from this video with a solid conceptual understanding of how forms are submitted, you're doing really well, and it's the same concept when we get up to more advanced things like using React. Long story short, I just wanted to show you, don't be disheartened if you go and check out forms yourself and see some attributes absent. The underlying concepts we've learned this video still hold true, just the implementation is slightly different when using a front-end framework.

So, let's summarize this chapter and start to build out the summary card for this topic: Forms. We looked at the form tags, which act as a wrapper for different form elements. The form element had two important attributes. The first was the action attribute, which specifies the location on the server where the data will be sent for processing. It's the "where," like the history shelf in the library. The second attribute we saw was the method attribute, which determines the HTTP method used for handling the form data. It is the "how" we interact with the server, like in the library we were borrowing a book, and in web development terms, we are GETting data. The other example we looked at was donating a book, and in web development terms, POSTing data, that is, creating a new record on the database, like adding a new book to the shelf. I'll be writing in red on the site here, as we'll be seeing a lot of form elements. This is the form element.

Now, I know this was a tricky one. We discussed some more complex concepts involved in interacting with servers, which may seem very confusing, as we have not even spoken about servers or databases yet. For now, if you can walk away from this video just conceptually understanding the idea that from our forms, we send data to a specific place on a server, like different sections of a library, and we interact with our server in different ways, like borrowing or donating a book, then you're doing great. The details of how all this works, we will cover later on.

Let's now look at how we're going to use forms in our Quill project. We're going to be using a form on the Quill create journal page. This is another section of our web application. It's the form that will be used to create journal entries. As you can see, this form has different elements like a title, journal type, and entry. But for now, we're just going to be adding in the form container element we have just learned about.

So, here I am in the index page in our Quill application, inside the Quill working directory folder. I'm going to right-click and add a new file. I'm going to call this `create-journal.html`. Straight away, I'm going to grab my boilerplate code by hitting `!` Enter, and I'm going to give it a save. We'll create the title here of "Create Journal." Inside the body, I'm just going to add an H1 and add the text "Create Journal" so it's clear what this page is for users.

I'm then going to add our form element. I do this by just typing `form` and hitting Enter. You can see we automatically get the action attribute, and if you remember, this is the location on the server the data will be sent. I'm just going to put `/api/v1/journals` for now. Again, this won't mean much to you right now, but just remember it's the location on the server the data will be sent, just like the history shelf in the library. And then going to come and add our method attribute. Now, because this is a journal creation page, we're sending our journal data to the server, which then sends it to the database to create a new record. It's like donating a book, so all I'm going to type here is `POST`.

I'm then going to hit Enter and put a comment here by hitting Command `/` on my Mac or Control `/` on a Windows machine, and I'm just going to say "Add form elements here," which we will be doing in the next few chapters.

Let's check out this page in the browser. Now, we're not actually going to see much. We can see our heading here, "Create Journal," but nothing appears below for a form. That's because the form element is just a container. There's nothing to actually display on the page. Once we add in our elements, we will start seeing things appear here. We can check it definitely there by going right-click, Inspect, and you can see inside the body, we do have our form element. There's just nothing rendering on the page yet.

Next, we'll look at how to gather user information through different types of form inputs. We'll be discussing different form elements, input types, the input tag, and form submission with inputs.

We're going to start this chapter by looking at different form elements. There are three main HTML elements that allow users to enter or select data in a form. The first is inputs, like a text input for a name. There are a lot of these, which we'll be looking at in this chapter. The second is text area, where users can enter large chunks of text. And the third is a dropdown, where users can select from a predefined list, like the currency they want to pay for an airline ticket. Forms will often contain a mix of these elements.

Looking at the Asana form we looked at earlier, in purple, we can see form inputs. First name and last name are text inputs. The company email is an email input, and the phone number is a tel input. We'll talk more about these soon. Just note for now that these are actually different kinds of inputs. In green over here, we have two dropdowns, one for country and one for company size. And here, in blue, we have a text area. This form uses all three types of form elements: inputs, dropdowns, and text area, but not every form will use them all. I chose this specific form as an example because it has all three, so it's nice to teach with.

So, let's now look at the different input types. The first category of input types are textual. They include things like a regular text input, a password input, an email input, a date input, a tel input, and a number input. Now, you may be asking yourself, what is the actual difference between some of these? Like, say, the text and email? They both just look like different text or user inputs. Let's take a look at the Unsplash registration page we saw in the previous chapter.

So, the first difference is how the text appears. For example, over here is just regular text for a first name, like Daniel. Whereas for a password field, I'm going to enter text, but you can see we get these solid fill circles appearing instead of the plain text. So, that's the first difference: appearance.

The second difference is something called validation, which we'll discuss later on in this topic. For now, to show you how this works, if I just enter regular text in the email field, like "Daniel," instead of something like "Daniel@gmail.com," which it is expecting, if I hit "Join," you'll see we get this error message saying, "Please include an @ symbol in the email address." So, this text input email has some things happening behind the scenes to know to expect the "@" symbol for an email. This wouldn't happen for first name; it's just a regular text input.

Another input type is called binary. There are two examples of a binary input: a checkbox and a radio button. We'll be looking at the checkbox and radio button later on in this topic. Then we have a file input, which allows users to upload a file, like a passport photo when applying for a new bank. And then there are a whole bunch of miscellaneous inputs. Things like a range, where there is a slider for users to select different values. You might see this on something like a mortgage calculator to select different interest rates. We also have something like a color picker, which allows users to select a specific color and could be used to pick the background color of a web page, like a build-it-yourself drag-and-drop wedding invitation website.

Now, text inputs will be the focus of this chapter, and they are the most commonly used input type, and we will be using them throughout our Quill project. As I mentioned before, we'll be looking at binary types a bit later, but we won't be looking at file input and miscellaneous as they are not as commonly used, and for now, it's better to focus on the important ones.

This is also a good time to introduce you to a resource that is the golden standard for HTML, CSS, and JavaScript. It's called MDN Docs. It's kind of like the Encyclopedia Britannica dedicated to HTML, CSS, and JavaScript, and is the most trusted resource online. You can see if I hover over "Reference," we have HTML, CSS, JavaScript, and a few other things. If you want clarification on a topic, I suggest you search in Google the topic name followed by MDN. For example, I'm going to search "HTML form inputs MDN," and this page will give me everything I need to know about the HTML form input. Something useful here is you can see all the different input types, and you can even play around with them, like the range input or entering a password to see what happens.

Now, I don't typically use the navigation when I'm looking at MDN Docs. As I said before, I'll pop into Google the topic I'm interested in and then just write MDN after.

So, we can see that there are a lot of input types, and forms will often use a mix of them. Back on the Asana page, we can see we have two text inputs here for first name and last name, an email input here, and a tel input here for a phone number. We also have a checkbox over here, which is still an input, but as we saw before, it's a binary type of input as opposed to a text input like the fields above, and we will be looking at this later in this topic.

So, let's now take a look at the input tag. The input tag is a self-closing tag and looks like this. The input tag has important attributes. The first is the type attribute, and it specifies the type of input. This attribute is always required, so you have to have it. We've already seen the names of these values, but here are some examples of how it would look written as an attribute: `type="email"`, `type="password"`, and `type="date"`, and obviously you have the others like `type="tel"`, etc.

The next attribute is the name attribute. This assigns an identifier for data collection. This attribute is required when sending data to a server, which is most of the time. The purpose of the name attribute is to give the data you were inputting a name so that the server knows what this data relates to. For example, if I'm submitting a title for a journal entry, we could call this `name="journal-entry"`. Other examples may include `name="email"` or `name="user-password"` and even `name="name"` to say the name of a user. You have complete freedom to choose whatever value you want for the name attribute.

Now, at this point, I want to highlight something that can cause a lot of confusion when starting out, and that is the fact you can have the same value for type and name. For example, over here I have `type="email"` and `name="email"`. Let's look at `type="email"` first. This is just saying that the input type is an email; we need to enter an email address with the syntax like `daniel@gmail.com`. But we can also have a `name="email"`. This attribute is serving a very different purpose. It means that when `daniel@gmail.com` is submitted to the server, the server will receive the email data as `email=daniel@gmail.com`. So, the type attribute is specifying what type of input this is, and the name attribute is used to give the data that will be inputed a name when it hits the server so the server knows what we're talking about.

To make things more simple in this section of the course, I am going to use name values that are always different to the type value so I don't confuse you. So, for example, I wouldn't call this `name="email"`; I'd call it something like `name="user-email"`. Now, in reality, most developers wouldn't do this; they would just have this as `type="email"` and `name="email"`, but I want to keep these different for now to help distinguish these when you're starting out. Don't worry too much if this is still confusing you right now. We're going to look again at the library analogy so you can better visualize what I'm talking about.

The final attribute we can have are other attributes. They're simply other attributes we can use, and you can use one or more of them. They're totally optional, so you don't have to use them. The example I have here is `placeholder="Enter title"`. This will simply put the text "Enter title" inside the form input. You can see this placeholder attribute value over here, where we have `e.g., John Smith, name@company.com`, etc. More examples of other attributes include `maxlength`, which could be used to set a maximum journal title entry; the word `required`, which ensures the user enters a value in that form field before they submit (we'll look at this one a bit later when we discuss validation); and the word `disabled`, which prevents users from inputting. This is commonly used once a form has been submitted and the data is in the process of being sent to the server. You would then use this to disable the form so users can't change any details during the process of sending the data to the server.

You'll notice that some other attributes have a value like `maxlength="10"`, while other attributes have no value, and this is totally fine.

Let's go check out the different text form inputs on the Asana form. I'm going to right-click and go "Inspect," and then I'm going to use the inspection tool to click on an input. This input is the `type="text"`. It's just a regular text input. You can see it's been given a name of `first-name`, which is used to identify the data sent to the server, and there are also some other attributes like `placeholder="e.g., John"` and `maxlength="255"`, so a name can't be more than 255 characters.

Let's check out the company email input. You can see here the `type` is `email` because this is an email input. You can also see the `name` is `email`. They've just capitalized the E. So, if I entered for this field `daniel@gmail.com`, the server would receive data that would look like `email=daniel@gmail.com`. You can see we have the `placeholder` attribute as well as the `maxlength` attribute. Let's quickly look at the phone number attribute as well. You can see this is a `type="tel"`, which is used for a telephone. We've got the `name` attribute and again two optional attributes: `placeholder` and `maxlength`. Don't worry about the other attributes inside each input; they're not important for now.

So, let's head back to our form submission library analogy to visualize how this all works. We've seen that forms need to know where to and how to send data. Just a quick reminder of the library analogy: we want to borrow a book, so we ask the librarian for a book. The librarian looks for the book on the shelf, and if the book is present, takes it and gives it to us. The interaction of borrowing the book is the "how." In web development terms, it is the method, and because we are borrowing a book, it is a GET method. The location of the book on the shelf is the "where." In this case, it's on the history shelf, and in web development terms, it is the action, which is the location on the server, and because this is a history book, the action attribute would be something like `action="/history"`.

Now, we've just spoken about HTML form inputs, so the other variable that we need to add into this analogy is the data part. In the library analogy, this is about what we are asking for. In this case, it is a book. Bringing this back to HTML form inputs, this can be described as `type="book"` and we'd also be asking the librarian the name of the book we want, so this would be something like `name="Maus"` (Maus, which is a history book). In web development terms, the type would be an input type like `type="email"`, a name would be something like `name="user-email"`.

The library and a web application are conceptually working the same way. Both the book in the library and data in an HTML form both have a type and name, and both requests are eventually being fulfilled somewhere. In the library, a book is retrieved from a bookshelf, and in web development, data is retrieved from a database.

Let's now look at the other case, the case when we donate a book as opposed to borrow it. Let's say we're going to donate the same book we requested in the previous video. So, this is `type="book"` and `name="Maus"`. So, the "what" hasn't changed. The "where" also hasn't changed because this book will eventually be added to a history shelf. What has changed is the "how," which is now `method="POST"`. We are giving the librarian a book, and it is added on the shelf, just like a new record being created in a database.

Let's now go back to the borrowing case. So, we are back at `method="GET"`, but now I want to change the "what." In this case, we'll be asking to borrow a movie instead of a book. So, the type now is `movie`, not `book`, and let's say we're looking for the movie called "Unbroken," which is another history movie. So, in this case, the name will be `unbroken`. Now, "movie" is just acting like another type, like `type="email"` or `type="password"`. But the point of showing you this is that just like you can ask to borrow a book or movie, so too in web development, you could ask to see different data, like a list of email addresses or a list of telephone numbers.

The final case we will look at is when we want to now donate the movie instead of it. The "what" is the same as before, it's still a movie called "Unbroken." The "how" has now changed though, it's now `method="POST"`. We are giving the librarian the movie called "Unbroken," and the librarian will add it to the shelf like a new record being created in a database.

Hopefully, this library analogy is able to help you conceptually understand how form attributes of method and action work together with the input attributes of type and name, so a form knows what kind of data it is sending, how it is sending it, and where it is sending it. Later on in this topic, we'll be spending an entire chapter just talking about form submission and going into more detail, so don't worry too much about it right now.

So, in this chapter, we learned about the input tag. We saw that there were several attributes. We saw that there was the type attribute, the value of the type attribute would be something like `text`, `email`, `password`, etc., and defined what type of input this is. Next was the name attribute, which gives the submitted data a name so that when it arrives on the server, the server knows what this data relates to. We can call this whatever we want, like `title` for a journal title. And the last attribute we saw are other attributes like `placeholder`, `maxlength`, etc., and these are all totally optional, and you can use one or more of them. All of this makes up the input element.

Let's now go and add inputs on the Quill create journal page. We will be adding a single text input for the title of the journal.

So, I'm back in the `create-journal.html` page. I'm going to delete this comment and go grab an input tag by typing `input` and hitting Enter. You'll see it automatically gives me a `type` attribute with the default value `text`. Now, luckily for us, this is a text input, so we can leave it as it is, but if it were another input like an email, we would just change it over here. Just a reminder, the `type` input is defining the input type, in this case, just a plain text input.

The next attribute we're going to give our input is the `name` attribute. Because this is a journal title, I'm just going to give it the name of `title`. And again, just to remind you what this is doing: when a user eventually enters a title in the form field, something like "I had a great day," that will be submitted to the server, but it will be submitted to the server as `title=I had a great day`. This value is serving as an identifier for the value the user will eventually enter so that when it hits the server, the server knows what this data relates to. And again, you can call this whatever you want.

I'm also going to give it an attribute which is totally optional. I'm going to give it the `placeholder` attribute, and I'm going to type "Enter title."

Let's go check this out in the browser. So you can see we now have an input type here. "Enter title" is the placeholder, and it is a text type, so it's expecting just plain text, like "I had a great day."

Moving on, we'll explore how to enhance accessibility and usability by using form labels. We'll be discussing the purpose of form labels and the label tag.

So, what are form labels? Labels improve accessibility and usability of forms. Looking back at the Unsplash registration form, we can see labels here above each input. These labels, behind the scenes, are also linked to their respective inputs. For example, when I click the word "email" here, you'll see that it moves my cursor to the email field to allow me to start typing in an email, and this is the case for all of these labels. If I click "password" over here, I'm immediately taken to that input field and I can start typing away. So, behind the scenes, these labels are connected to their respective input.

Now, you may be thinking, "Who cares about labels? They just seem like extra work. I could just use a placeholder attribute with the value of 'first name' instead of using a label." There are three good reasons why you should always use labels. The first is that they are generally easier to read. The second is that they are needed for screen readers, so it makes your code more accessible for those with visual impairments. And because the label and respective input are connected behind the scenes, it makes the usability much easier on smaller devices like a mobile, where clicking on a label would take you straight to the input box.

Let's now take a look at the label tag. I'm first going to go grab the input from our Quill application for the journal title. As we've seen, the label we're going to add is somehow connected to this input, and to do that in HTML, we first need to add an `id` attribute to the input. As a reminder, the `id` attribute, which we've looked at already, identifies an element and must be a unique value. I've given this input an `id` value of `main-title`, but you can call it whatever you like. It is also common for the `id` attribute to be the first attribute, so that's why I've put it at the start.

We can now add the label tags, which is made up of an opening tag and closing tag, wrapping the label text. In this case, "Journal Title." To connect this label element with the journal title input, we need to add a new attribute called the `for` attribute. The `for` attribute is specifically used in HTML form labels, so you're not really going to see it anywhere else. The value of the `for` attribute has to be the exact same of the value of the `id` attribute in the input, so we have to call it `main-title`. So, both the `for` and `id` have the same value of `main-title`. Doing this now connects the label to the input.

I'd also like to highlight something which can cause confusion when it comes to deciding the values for `id` and `for` attributes. We could have given the `id` a value of `title` and the `for` attribute a value of `title` as well. These values are the same, so our label would still be connected to the input. What I want you to take note of now is that the `name` attribute also has a value of `title`. When you get more comfortable with HTML, you'll likely name your attributes like this, and it is totally fine because the `id` and `for` attribute and `name` attribute are doing totally different things. The `id` attribute of `title` is just being used to link to the `for` attribute of `title` in the label; it's just connecting our input and label. On the other hand, the `name` attribute with the value of `title` is used when sending data to the server so that the server knows that this data we are receiving is the title of a journal. So, because they're doing totally different things, you can actually label them the same. And as I mentioned, doing this is actually fairly common, reusing a succinct value like `title` for the `id` and `for` attribute as well as the `name` attribute. In fact, there are some circumstances where all your values would be the same.

I'm going to demonstrate this by creating an email input. I'm going to grab the input, I'm going to change the `type` to `email`, which identifies this input type as an email, and then I'm going to make the `name` `email`. Again, this is the identifier that is sent to the server, so that when the user inputs an email like `daniel@gmail.com`, the server receives `email=daniel@gmail.com`. I'm then going to add an `id` with the value `email`, which is used to identify the input element itself and helps us connect to a label. I'm then going to go grab the label element. I'm going to call this `email`, and for the `for` value, I'm going to call it `email`. By having the `for` and `id` value the same, this connects the label to the input. So you can see I've used the `email` value for every single attribute. When starting out, it can be really confusing to know what all these values relate to, so I will be using different values for different attributes so it is very clear how they relate to one another. So, I'm going to remove the `id` and `for` attribute and replace them with what we had before: `main-title`.

So, in this chapter, we learned about the label element, which was made up of a label opening and closing tag, wrapping the label text. The label text had the `for` attribute, which was used to connect to the respective input. To make this work, the input needed an `id` attribute with the same value. In this case, `main-title`. Doing this connects the label and input elements.

Now, looking at the form overall, we've added in a label element. Now, it is common to have repeating units of labels and inputs. So, this is a block as part of the overall form, and we will now be adding more of these blocks as we move through this topic.

Let's now go and add labels on our Quill create journal page. There are three labels we're going to be adding: one for the journal title, one for the journal type, and one for the journal entry. At this stage, we only have a text input type for the journal entry, so let's just go and add a label there.

In VS Code, so I'm back on our `create-journal.html` file. The first thing I'm going to go do is add an `id` to this input. I'm going to give it the value of `main-title`. I'm then going to pop above this and get a label tag by typing `label` and hitting Enter. Now, the `for` attribute value needs to be the same as the `id` attribute value, so this is `main-title`, and we'll call the label "Journal Title."

Let's go check this out in the browser. So you can see that our label now appears next to the input, and if I click "Journal Title," it highlights the input and allows me to start typing straight away. Now, you'll notice that this label appears on the left of the input, not above. This behavior, we will be discussing towards the end of the HTML section, so don't worry so much about it now. It is normal for this to happen.

Now, we'll dive into creating larger input fields for user text with the help of text area. We'll be discussing different form elements, what is a text area, and the text area tag.

So, just a reminder on the different form elements: there are three main HTML elements that allow users to enter or select data in a form. We have inputs, which we saw in the previous chapter, and if you remember, there were a lot of these. The second is dropdowns, which we will look at in the next chapter. And then there is a text area, which we will be looking at now.

So, what is a text area? It is an element used for multi-line text input, used for comments and longer messages. When I say "input," I do not mean an HTML input type like `text`, `email`, `password`, etc. The text area is its own special kind of text input that does not belong to the input elements. Here is an example of a text area on the Asana form. You can see that users can enter a longer description of what they would like to discuss with the sales team.

Let's now take a look at the text area tag. The text area has an opening tag and a closing tag. Let's now take a look at all the attributes. We'll first add an `id` attribute, as we're going to need that for a label. I'm going to be building the text area for the journal entry on our Quill application, so I'm going to give this an `id` with the value of `journal-entry`.

Next is the `name` attribute, so that whatever text is entered by the user, when it arrives at the server, the server will know what this text relates to. In this case, an `entry`. And as another reminder, the `id` and `name` values can be whatever you want, and they can even be the same thing, but for now, I'm keeping these values unique so it's a bit clearer what they relate to.

The last set of attributes are `rows` and `cols`. They set the visible dimensions in text characters. The `rows` value is the number of lines the text will fit on, in this case, five lines. And `cols` is the number of characters the text will display horizontally, in this case, 30 characters wide.

Now, you may be wondering, where is the `type` attribute we saw in the inputs chapter? We don't have a `type` attribute here because this is not an input; it is a text area. The `type` attribute is only used in inputs like `text`, `email`, `password`, etc., to distinguish between those different types of inputs. The text area is just a text area; there are no other types, and it's defined on the tag itself.

I'm then going to add a label of "Journal Entry," and I have to give this a `for` attribute with the same value as `id`, in this case, `journal-entry`, and this will connect the label and text area.

So, in this chapter, we learned about the text area tags. The text area tag had an `id`, which was used to identify the element so that we can add a label. It had a `name` value, `entry`, which is used to identify the data when it

eventually hits the server, so the server knows what data this relates to. It had a `rows` and `call's` attribute which defined the height and width of the text area in text characters. All of this makes up the text area element. We also added a label to this, which we called "journal entry". And for the `for` attribute, the value had to match the value of the `ID` attribute, `journal-entry`. So this again was the label element. We now have two distinct blocks of code inside our form. The first block is a label and text area relating to a journal entry, and the second block is a label and input related to the journal title. Both of these are nested inside our form element.

Let's now look at adding the text area to the Quill create journal page. We're using a text area over here for the journal entry, so let's go and add this in VS Code. So I'm inside the `create-journal.html` file. I'm going to pop down here and grab our text area tags by typing `text` and you'll see straight away `textarea` comes up. I'm going to hit enter to grab this. You'll notice that straight away we get all the attributes we need. I'm just going to reorder these slightly, as I like my `ID` attribute coming first. I'm going to give this text area the `ID` of `journal-entry`. And as a reminder, this is used to identify the text area element so that we can add a label which connects to it. I'm going to give the `name` a value of `entry`. And as a reminder, this is used to identify the data that the user will eventually input into the text area so that when it hits the server, the server knows what the data the user inputted relates to. The `cols` has a predefined value of 30, which I'm going to leave, and I'm going to change the `rows` value to five.

I'm then going to add a label by hitting `label` and enter. We'll call this label "journal entry" and the value of the `for` attribute needs to be the same as the value of the `ID` attribute, so I'm going to copy `journal-entry` and paste it here. Let's check this out in the browser. You can see we now have our journal entry text area and the connected journal entry label. Now, you'll notice that all these elements are appearing one next to each other horizontally, as opposed to vertically like some of the other elements we've seen. Throughout this section, we'll be discussing why this behavior is occurring later on in the HTML topic. But for now, I'm going to be doing something a bit hacky to clean this up that you would never really do. I'm just going to put a line break tag between these two blocks of code. The line break is the `<br>` tag, which we learned about earlier on in this topic. I'm going to hit refresh in the browser to see what this does. So this now moves the journal entry label and text area below the journal title label and input. Using CSS is the proper way to implement the layout we want. You would never do this in real life. I've just done this for now because we don't know any CSS at this point, and later on when we do cover CSS, I will come and remove this.

Now, before we finish up, I want to quickly discuss why is the text area not a self-closing tag? The text area is not actually wrapping anything here. The reason is, you can put start a text there. So, for example, if I put the text "my day was", save this and refresh the browser, you'll see that text actually appears inside the text area. This is not to be confused with the placeholder, like we have in the input here, which says "Enter title". That's grayed out, and as soon as I click into this input, it disappears and I enter my text. Whereas inside the text area, the text "my day was" will not be removed when I click into this. It's actual text inside the journal entry.

Let's continue by learning how we can provide multiple options to users using dropdowns. We'll be discussing different form elements, what is a dropdown, and the `<select>` and `<option>` tags.

So, just a reminder on the different form elements. There are three main HTML elements that allow users to enter or select data in a form: we've seen `<input>`, and if you remember, there were a lot of these in the previous chapter. We saw `<textarea>`, and in this chapter, we will discuss the dropdown.

So, what is a dropdown? A dropdown allows users to choose from predefined options. On the "assign a contact" page, there are two dropdowns over here: one where you can select your country from a list, and another where you can select your company size from a list. So you can see the form here. If I go to "Country" and click it, you'll see a predefined list appears. I have to select an option that's provided here. This is very different to the inputs we looked at earlier, where I, as the user, input the value.

So let's take a look at how we code dropdowns in HTML with `<select>` and `<option>` tags. In this example, we'll be coding the dropdown for the Quill create journal form. In the form, we allow users to select a category of the journal, like is this an idea, a reflection, a memory? These tags are going to wrap another set of tags, so we'll move them here for now. Let's go and add the attributes we need to the `<select>` opening tag. The first attribute we'll give it is the `ID` attribute with the value `journal-category`. This then allows us to add a label which has the same value, `journal-category`, for the `for` attribute. As I'm sure you know by now, you have to have the same value for `ID` and `for` attributes to connect the label to the form element, in this case, a `<select>` tag. We next add the `name` attribute, and I'm going to give it the value of `category`. As a reminder, the purpose of the `name` attribute is that when the data eventually hits the server, the server knows what this data relates to.

Next up, we add our different options that appear on the drop-down menu, and this is done with `<option>` tags. We have an opening and closing `<option>` tag which wraps the text of the option. In this case, "task". We'll add another two options to our journal category. We'll add "note" and "idea". Now, this is where things are a bit different to the other form elements we've seen so far. We need to give each option a `value` attribute, which in most cases will just be the same name as the text, just in lowercase. The `value` attribute sets the data that will be sent to the server. Because the user is not inputting any data, like in a text or email input, we need to provide a specific value, and just the text the `<option>` tags wrap is not good enough. We need to explicitly define the data the user selects as an HTML attribute with the `value` attribute.

Now, this can be a bit confusing. So, to understand it a bit more, let's compare how dropdowns and inputs work. Taking a look at the dropdown first: when the user selects an option like "task", it will be sent to the server like this: `category=task`. `category` comes from the `name` attribute that's inside the `<select>` tag, and `task` is the predefined value we set with the `value` attribute inside the `<option>` tag. Let's compare this to the `<input>` form element. Let's say I created a new journal and gave it the title of "Serenity". `title` also comes from the `name` attribute that would be set inside the `<input>` tag. Now, "Serenity" is a user-entered value. It's what the user would have actually typed on their keyboard.

So, in a nutshell, both the dropdown and input have names like `category` and `title` so that when the data hits the server, the server knows what this data relates to. But the dropdown has a predefined value explicitly set with the `value` attribute inside the `<option>` tags, whereas the value in, say, a text input is set by the user and is what they would type on their keyboard.

Later on in this topic, we're going to look in-depth at form submission and how data arrives at the server. So, for now, if you can just recognize that on a dropdown, the developer sets the value, and for an input like a text or email, the user is setting the value by what they type, then you're doing great.

So, in this chapter, we learned about dropdowns. We started with the `<select>` tags that had `ID` and `name` attributes. We added a label of "Journal Category" and made sure that the value of the `for` attribute matched the value of the `ID` attribute, in this case `journal-category`. We then added `<option>` tags nested inside the `<select>` tags. Each `<option>` tag wraps some text that the user will see in the drop-down menu. Each `<option>` tag also has a `value` attribute that explicitly sets the value that the user chooses from the drop-down menu. We saw that this `value` attribute was not needed in other form elements like text or email inputs, because in those form elements, the user is defining the value by typing it in with their keyboard.

So, in summary, we've added a `<label>` element, a `<select>` element, and `<option>` elements, which are nested inside the `<select>` tags. So now, looking at the different blocks of our form, we have the dropdown over here, the text area over here, and the text input over here. All of these form elements are nested inside the parent `<form>` tags.

Let's now go add a dropdown to the Quill create journal page. On our create journal form, we have a dropdown over here where the user can select the category of journal they are creating. So let's jump into VS Code and write this up.

I'm now in the `create-journal.html` file. I'm going to pop down below this line break tag and I'm going to grab the `<select>` tag by typing `select` and hitting enter. I'm first going to hit enter to separate these tags, as we're soon going to put options here. I'm then going to swap the order of my `ID` and `name`, as that's just my preference, and I'll give this an `ID` value of `journal-category`. Straight away, I'm going to grab my `<label>` elements by typing `label` and hitting enter. We'll enter the text for the label "Journal Category", and to connect our label to our select elements, we need to give the `for` attribute the same value as the `ID` attribute, so I've just copied and pasted it. I'll give the `name` attribute a value of `category`, and just to keep hammering at home, this is used to identify the data when it hits the server.

Let's now go and add our different options. Our application will have eight options, so I'm going to do our nifty trick by typing `option * 8` and hitting enter. For each option, I'm going to add the option text. The first option will be "an idea", and I'll give it the same value in lowercase. The next one will be "notes", and I'll give it the same value in lowercase. To avoid boring you, I'm just going to go and complete this. So, as you can see, I've added in the extra six options: "goal", "habit", "memory", "mood", "event", and "task", each with its respective value in lowercase.

Now, the last thing I want to do is just add another line break tag here, so that we view this in the browser. Each form element block will appear below each other, and if you remember from the previous chapter, this is not something you'd ordinarily do. We just can't handle layout yet because we haven't learned CSS, so I will be removing these line break tags later on.

Let's check this out in the browser. You can see a default to the first option, "idea", and when I click the dropdown, I can select the others.

Next, we'll learn how to actually submit forms using buttons. We'll be discussing what are buttons, the `<button>` tag, and the difference between buttons and hyperlinks.

So, what are buttons? Buttons trigger actions, such as submitting a form. On the "assign form", you can see a submit button over here that, once clicked, will take all the user-entered data to the server for processing. On the Unsplash homepage, this magnifying glass icon is also a button. Once the user enters the text for an image they want to find, they can click this button to tell the server to go and find all the related images.

Let's now take a look at the `<button>` tag. There is the button opening tag, closing tag, and button text. The button can also have optional attributes. You will sometimes see a `type` attribute, such as `type="submit"`. This is actually just the default behavior, which is saying this button is used to submit a form and does not actually have to be included if the button is being used to submit a form, which is almost all cases. However, it is best practice to include this attribute. We've seen the `type` attribute already when we looked at `<input>` tags. We had to specify a `type` of input like `text`, `email`, or `password`. This is the same `type` attribute, but it has specific values for buttons. So you could not put `type="text"`, `email`, `password` here. The other `type` value you may see is `reset`, which is used to reset all the user-entered data, so it essentially clears it from the form.

Let's check out the button on the "assigner form" in DevTools. I'm going to right-click, inspect. I'm going to grab the inspector tool and click on the button. You can see we have the `<button>` tags, and we have that `type="submit"`. As I said, you don't actually have to include it because the default behavior is to submit, but it is best practice, so we do include it.

Now, a question you may have at this point is, what is the difference between buttons and hyperlinks? I mean, why didn't we just use the `<button>` tags when creating, say, the login or register hyperlinks before, as they also appear as buttons in the final project? Well, hyperlinks and buttons can appear visually the same, but serve different purposes. Let's look at the hyperlink element first. An example of a hyperlink we've made so far is the "Get Started" hyperlink. Hyperlinks are used to navigate users to a different page. In this case, when the user clicks on "Get Started", they are taken to the registration page. Its sole purpose is to navigate users. Hyperlinks will often look like a button element, and we will, in fact, be styling this in the CSS section to make it look like a button. But don't be mistaken, behind the scenes in HTML, these are hyperlinks, not button elements.

Let's now look at the `<button>` element. Looking at the example from this video where we created a button for our form called "submit". The `<button>` element is used to trigger actions, like submit a form. They act within the current page. So, for example, once the user submits the form, they could see a popup on the same page saying "Thank you". They're not necessarily taken anywhere new. The button is there just to trigger an action. However, a lot of times, clicking a button can result in navigation to a different page. This is secondary and a byproduct of clicking a button. The main purpose of the button is to say "submit form data". Once that is done, there could be extra logic to take users back to, say, all their journals once they have submitted the most recent one.

In a nutshell, hyperlinks are used for page navigation, whereas buttons are used to trigger events happening on a page and can sometimes also navigate users, which is a secondary effect.

Let's take a look at hyperlinks and buttons behind the scenes in HTML on the completed Quill project. Now, all of these buttons are actually hyperlinks behind the scenes. They're just styled as buttons, and again, they're hyperlinks because their main purpose is to navigate users to another page. Let's take a look at this in DevTools. I'm going to inspect and click this "Login" button. You can see that this is actually a hyperlink with anchor tags used. We're just using CSS to style them to look like buttons. Let's click on the "Login" button and take a look at this "Submit" button. You can see this is actually a `<button>` element. We're using `<button>` tags, not anchor tags, and that's because the main purpose of this button is to submit a form. It's triggering an action, and again, we just use CSS to style our buttons and hyperlinks to look the same.

So, let's finish off the summary card for this topic. The missing piece in this form is the button, which we saw was used to trigger an action like submitting a form. We discussed that it's best practice to add a `type` attribute with the value `submit` to submit a form, and another value we can use is `reset`, which clears the form fields. This is the `<button>` element. Taking a look at all our different blocks in the form: the first block is the text input for the journal title, the next block is the dropdown for the journal category, the next block is the text area where users enter their journal entry text, and the final block is the button used to submit the form. All of these elements are wrapped by the `<form>` tags.

Let's now go ahead and add a button to the Quill create journal page. We have a submit button in blue over here, which is used to submit the data in the form to the server. There is a cancel button above this, which we will be handling later on in the React section of the course. The functionality here will be just to navigate users away from this page. So let's jump into VS Code and code this up.

So I'm inside the `create-journal.html` file. I'm going to scroll down to the bottom here and add a button by typing `button` and hitting enter. We'll add button text of "submit". I'm then going to add that `type` attribute and set it to `submit`, and if you recall, we don't actually need this because the default behavior of a button is to submit, but it is best practice to include it. Now, again, I'm just going to add that line break tag so this appears on a separate line.

So let's check this out in the browser. You can see that our submit button appears down the bottom here. Now, in the next chapter, we're going to be spending quite a bit of time discussing how form submission actually works, but I do want to go ahead and submit the form now to show you some interesting behavior of the submit button. I'm going to just enter some random data for each of these elements, and you can see by clicking submit, the form submits. Now, the reason we're getting this error message is because we don't actually have a server set up. You can see in the address bar here, we're trying to submit the data to this section of the database which doesn't exist, so we get this error message. But from an HTML perspective, the button is doing its job, it's submitting the form.

What I want to show you is that the `<button>` element can actually live anywhere inside the form. It doesn't have to be at the bottom. For example, if I popped it right at the top like this, I'm going to hit refresh, I'm going to go again and enter some data and hit submit. It also submits the form. The button just has to be somewhere inside the form. As soon as the button moves outside the form, it won't work. So, for example, I'm going to grab our button and just get rid of this line break tag, and I'm going to put the button outside the form over here. I'm going to go enter some random data and I'm going to hit submit, and you can see it does absolutely nothing. The button has to be somewhere inside the form in order for it to trigger the form submission.

Let's pop it back where it should be. I also want to show you, you don't need this attribute. So if I just cut this for now, refresh, add some random data, and hit submit, the form still submits. And that's because the default behavior of the button is to have `type="submit"`. There, but as I've mentioned, we have it there for best practice. The final thing I want to show you is the `reset` attribute value. If I change this to `reset`, enter some random data, and hit submit, you'll see that it clears the form. That's the behavior of setting `type="reset"`. I'm just going to change it back to `submit` now.

We'll take a look at how to send user data to a server by focusing on form submission. We'll be discussing how form data is packaged and sent to the server, and the HTTP request and response when submitting data.

So, in this chapter, I'm going to be doing a detailed walkthrough of form submission. As we know by now, forms need to know where to and how to send data. I'm going to recap the library analogy we've been using in the last few chapters, as I just want to make sure we're on the same page in conceptually understanding how forms are submitted. We're going to be looking at the case where you donate a book. The book is given to the librarian, and the librarian then adds the book to the appropriate shelf. Now, there are three important aspects of this interaction we need to look at. So, the first aspect is how I'm interacting with the librarian. In this case, I'm donating a book. It's the "how" I'm interacting. Now, as we've seen before, there are other kinds of interactions you can have, like borrowing a book. The second aspect is where the book is eventually being stored. In this case, it's the "history" shelf, but of course, depending on the book, it could go to other shelves, say if it was a science fiction book or a children's book. This is the "where". The third aspect is about what I'm actually donating. In this case, it's a book, but libraries have other kinds of resources, like old-school movies available on DVD. So this is the "what".

So let's now look at this library interaction through the eyes of HTML forms. We'll first look at the "what". And for HTML forms, this is the data. For our library analogy, it could look something like this: `type="book"`, which is defining what resource it is, in this case, a book, and `name="mouse"`, which would be the title of the book. For the "how", this is the `method` attribute. It's how we're interacting with the server. In this case, it's `POST`, because the book is being added to the shelf. It's the same as a new record being created on a database. And finally, the "where" is the `action` attribute. In this case, it could be `action="/ht"`. It's the location in the library the book is being stored. And as I mentioned before, because this is a history book, it's going in the "history" shelf in the library. But if it was another category of book, like science, the `action` attribute would be something like `/science`.

So, this is the form we've been working on, where users can submit a new journal entry. So let's now identify the "where", "how", and "what". The `action` attribute inside the `<form>` tag is the "where". It's the location on the server the journal entry will be sent to. In this case, it's `/api/v1/journals`. And just like the library where there's different shelves for different books, on our database, there would be different locations for different kinds of data. So, for example, a web application is going to have user data. So user data would be stored in a location like `/api/v1/users`. Don't worry so much about `/api/v1` for now, it's just web development stuff we're going to talk about later. The second attribute in the `<form>` tag, `method="post"`, is the "how". It's how we're interacting with the server and database. In this case, because we're submitting a new journal entry, we're creating a new record on the database, so it's appropriate to use `method="post"`, just like you donate a book. Now, as I've mentioned in previous chapters, there are other methods like `GET`, `PUT`, and `DELETE`, and I'm going to be talking about the `GET` method a bit later on. The final aspect is the actual data itself. It's the "what". These form elements include a text input, a dropdown, and a text area, and it's where the user will be entering data and selecting data that's packaged up and then sent to the server.

I'm now going to step you through exactly what happens when a user inputs data and submits a form. The first element we have in our create journal form is a text input for the journal title, and here is the HTML `<input>` element. We gave the input a `name` attribute with the value `title`. As a reminder, the `name` attribute is what is used to identify the data that is being submitted to the server, so the server knows what this data relates to. Let's take out `title` as this is going to be sent to the server. Let's say a user typed in this input "car washing" as an idea for a business. This is the value that is sent to the server. So let's also take this out and put it over here. So when the form is submitted, the data is set like this: `title=car-washing`. If the user entered something else like "scuba diving", we would have `title=scuba-diving`.

The second element we had in our form was a dropdown where the user selected the category of the journal, and here was the corresponding HTML. We also gave the dropdown a `name` attribute inside the `<select>` tag with the value of `category`, and again, this is the identifier that will be sent to the server. So let's take it out and put it over here. Let's say the user selects "idea" from the dropdown. This is a predefined value that's set with the `value` attribute inside the `<option>` element. So this is the value that will be sent to the server. So let's pop it over here. So when the form is submitted, the data that is sent looks like this: `category=idea`. If the user selected another category like "task", then it would be `category=task`.

The final form element we had was a text area where users enter their journal entry. The corresponding HTML looked like this. We gave the text area a `name` value of `entry`, which again is the identifier that will be sent to the server. So let's take it out and put it over here. Let's say the user enters the text "a car wash that serves coffee while you wait". This is the value that is sent to the server. So let's also take this out and put it over here. So this is what will be sent to the server: `entry=a-car-wash-that-serves-coffee-while-you-wait`. And if the user entered anything else like "a car wash that serves tea while you wait", that would be the value that is sent.

So, in summary, we have this for the journal title text input: `title=car-washing`. For the journal category dropdown, we have `category=idea`. And for the journal text area, we have `entry=a-car-wash-that-serves-coffee-while-you-wait`. This is the package of data that is sent to the server.

Let's look at this visually now. We have our user, our server (like the librarian), and our database (like the bookshelf). The user will fill out the form and send the data. The data is what we just saw: `title=car-washing`, `category=idea`, and `entry=a-car-wash-that-serves-coffee-while-you-wait`. This will hit the server, and the server sends the data to the correct part of the database to create a record. This is the `method`. It's how we're interacting with the server. In this case, `method="post"`. We are adding new data to the database, just like we added a new book to the shelf when we donated it. The final piece is the `action`, which is the exact location on the server where the journal data will be saved. In this case, it's `/api/v1/journals`. It is here the journal is created.

So let's go ahead and submit some form data and take a look at what's happening behind the scenes. So I'm going to go ahead and submit some data. For the title, I'm going to use "car washing". The category, I'm going to select as "idea". And for the text, "a car wash that serves coffee while you wait". So I'm now going to go submit this. Now, as I mentioned in the previous chapter, we're getting an error because we don't actually have a server set up. We can see that the data is trying to be sent to `/api/v1/journals`, however, the HTML form is working from its perspective. It has successfully sent the data. I'm going to go do this again, but I want to look in DevTools at the network tab. I'm going to go inspect and tap network. Network is responsible for showing network requests, like sending data to a server. We'll be talking about this a lot more in a later topic in the full-stack boot camp. I'm going to hit submit, and as you saw before, the form fails because we have no server. If I click on this first row over here, "journals", this now is the HTTP request and response for sending the data we have entered to the server to try create a record in the database. You can see we have the request URL here. This is what we defined in the `method` attribute in the form. If I head over to payload, you can see we have the name and values: `title=car-washing`, `category=idea`, `entry=a-car-wash-that-serves-coffee-while-you-wait`. So this is the package of data that is sent to the server. You can see now why that `name` attribute is so important. It's giving a name to the data that the user is entering or selecting. Now, because we don't actually have a server set up, we're getting no response.

I now want to go do the same thing, but on our completed project, to show you what this would look like in real life. We'll enter the same data: "car washing". The journal type, we'll select as "idea". And for the entry, "a car wash that serves coffee while you wait". I'm now going to open up the DevTools, head over to network, and submit the form. I'm just going to scroll this up slightly. I'm going to click on this first row over here. On the headers, you can see that same request URL: `/api/v1/journals`. This is the location on the database we're creating that journal record. We can also now see a request method: `POST`, which we defined in the HTML form as `method="post"`. We're also now getting back a status code: `201 Created`. This means that the journal has been successfully created as a new record in the database. We'll be talking about status codes a lot more in a later topic in the full-stack boot camp. If I head over to payload, you can see the data that's being sent. We have our `title`, our `entry`, and our `category`. I've just called it `type` on the final application. We called it `category`, it doesn't really matter. I'm also automatically sending an emoji for the type of journal, in this case, a light bulb. We'll be adding that functionality later on in the React section. If I now go to response, this is data we're getting back from the server. This is essentially the record that is being created in the database, and I'm sending it back to the front end so that we can then display this journal. I'm getting back a few other things that are specific to the database, like when it was created, a unique ID for this journal, and which user it was created by. Again, this is stuff we'll discuss much later on in the course. For now, I want you to see that we did get a response back.

So, before we finish up, I do want to look at form submission for the other type of interaction that we've seen in the last few chapters. So, instead of donating a book, we're now going to go and borrow a book. In this case, we would ask the librarian for a book, and the librarian looks for the book on the shelf. If the book exists, they would take the book from the shelf and hand it to us. So let's go through the "what", "how", and "where" for the "what". It's still a book, and let's say we are asking for the book "mouse". So the "what" here doesn't change. Of course, it could be anything though. We could be looking for a `type="movie"` and a `name="unbroken"`. For the "how", this is no longer a `POST` method. In the donating book case, we were adding a book to the library, creating something that didn't exist there before. In this case, we're just retrieving something already on the library. So the method here is `GET`. Now, don't worry so much about HTTP methods, we will be talking about them at great length later in the course. And finally, the "where", the location of the book in the library. This is the `action` attribute: `/history`. And because we're still looking for a history book, the value of the `action` attribute `/history` is still the same. But of course, this could be another shelf depending on what we were requesting. If I were wanting to borrow a science book, the librarian would go to the science shelf, so the `action` here would be `/science`.

I'm going to go and quickly make an HTML form to show you how this looks behind the scenes. Inside VS Code, I'm going to hit "new file", click "text file", select the language, and search for HTML. I'm going to grab our boilerplate code straight away by hitting `!` and enter, and I'm going to save this on our desktop and just call it `form.html`. Let's give it a title of "form". I'm going to be making a quick form where a user will be able to search for different journals based on a title and/or category. I'll first get our `<form>` element by typing `form` and hitting enter. For the `action` value, this is where we're searching on the database, and because we're searching for journals, it lives in the same location: `/api/v1/journals`. And then I'm going to go add our `method` attribute. And now, because we're trying to retrieve values, the correct method is `GET`. `POST` was used for creating a new record on the database. I'm now going to go get an `<input>` element by typing `input` and hitting enter. This `<input>` element is going to be the search area where users will search for a journal title. I'm going to give this a `name` of `search`. I'm going to give this input an `ID` of `search-bar`, and then I'm going to add a label called "Search", and the `for` value needs to be the same as the `ID` value, so that the label is connected to the input. I'm also just going to add some placeholder text of "Search Journal".

Next up, I'm going to add a dropdown where users can select a category of journal. I'm going to get the `<select>` tag by typing `select` and hitting enter. I'm going to swap the order of the `ID` (that's just my preference). I'll give this a `name` value of `category` and an `ID` of `journal-category`. I'll grab the label and give it the text "Journal Category", and copy the `ID` value and paste it as the `for` value to connect the select to the label. I'll then add a few options. I'm just going to add three for this example: "idea", "task", and "memory", and I'm going to give the `value` attribute those same names, just lowercase. Finally, I'll add a button so we can submit the form. I'll give it the text "submit" and for best practice, I'm going to add a `type` with the value `submit`.

So let's go check this out in the browser and submit this form and see what happens behind the scenes. Let's pretend I have thousands of journal entries, and a few of them will contain the title "love". So I'm going to be searching for journals that contain the title "love", but let's say I only want journals with the title "love" that belong to "memory". Before I submit this, I'm just going to open up DevTools on the network tab, so we can see what's happening behind the scenes. I'm going to hit submit. I'm going to go to this first row over here. Now, you'll notice that the request is structured slightly differently to the `POST` request. The request URL is `/api/v1/journals`, but now we have this question mark with `search=love` and `category=memory`. This is called a query string and is positioned after the request URL with a question mark. If we head over to payload, you can see that these are now query string parameters with `search` as "love" and `category` as "memory". For the `POST` request, this was not called query string parameters, it was called a request payload. Now, there's a lot of terms flying around here. I really don't want you worrying about them for now. I just want you to understand that `GET` and `POST` requests are structured quite differently. When I was making this video, I was weighing up whether I should even include the `GET` method example, but I thought for the sake of completeness for the two library analogies we've been looking at, it was worth showing you. For now, I wouldn't worry too much about understanding all the details of form submission, like payloads, query strings, etc. It's a complex topic, and we'll be covering it in a lot more detail later on in the full-stack boot camp. For now, if you could conceptually understand the idea that at HTML forms, we are sending name data (the "what") to a specific location on the database (the "where"), and that the "how" is about how the data is processed or how we are interacting with the server, it can be a `POST` where we will create a new record on the database (in the library analogy, donating a book), or it can be a `GET` where we retrieve relevant data from the database (in the library analogy, borrowing a book). If you can conceptually understand this at this point, you're doing great.

Moving forward, we'll cover how to ensure data accuracy and completeness through form validation. We'll be talking about what is validation, client and server-side validation, and built-in versus custom validation.

So, what is validation? Validation is the process of checking data to ensure it meets expected criteria. On the Unsplash registration form, we have an email input that expects the user to enter a value that is an email format, something like `daniel@gmail.com`. In the password input, you can see it requires a minimum of eight characters, so there is an expected password length.

So let's see this in action. I'm going to add my first name and my last name, and then I'm just going to enter some random text, not in email format, in the email field. If I try to click "Join", you'll see we get this message: "Please include an '@' in the email address." So this is validation. The email field is expecting an '@' symbol, and the form isn't submitting until I enter the email in the correct format. I'm going to enter it in the correct format now. I'll just do `daniel@gmail.com`. And for the username, I'll do `danbrand200`. Now, for the password, I'm going to enter a password with less than eight characters, just `123`. If I try to click "Join", you'll see we get another validation message: "Please lengthen this text to eight characters or more." So again, this is validation in action. We're not meeting the expected criteria of what the form wants.

Let's now discuss the difference between client and server-side validation. We'll look again at the library analogy. Let's say we want to donate a book. Before we arrive at the library, we'd want to check on our bookshelf: is this the correct book we're taking? We also may want to check: is it in a suitable condition by checking, are all the pages there? This is client-side validation. It's checks that we do before we interact with the librarian. When the book arrives at the librarian, the librarian will check for similar things: like, is this the correct book? Are all the pages there? And could also do additional checks that the person donating the book couldn't do, like, is this book already on the shelf? And do we need it? These checks the librarian is conducting are called server-side validation. They are checks done by the librarian before adding the book to the shelf. Once the checks are complete, the librarian will add the book to the shelf.

Let's now look at this in terms of web development. We have our user on the front end who sends data in the HTML form. Let's say they are wanting to register a new account and need to enter an email address. Before the data is sent, the form on the front end will check things like: is this a valid email address? Which we saw earlier on the Unsplash registration page. This is client-side validation. When the data arrives at the server, the server will also do its own checks. Some are similar, like, is this a valid email? Just a double-check. But some would be checks only the server could do because it has access to the database. A check like, is this email unique? That is, does the email already exist in our database? Because if it did, we'd have to reject this request. This is all server-side validation. Once the server has done all its checks, it will then create a record in the database of the new user's details.

I want to now look in more detail at client-side validation, as there are actually two types. The first type of client-side validation is built-in validation. This is validation that is automatically provided by the browser for certain input types. For example, the `email` input type will automatically check that the value the user enters is in a correct email format, and again, this is what we saw on the Unsplash registration page, where that message popped up when we didn't enter the email in the correct format. The `number` type will check that numbers are entered and not letters. There's no extra work we need to do to get these validations; they're built-in as part of the input type.

The second type of client-side validation is custom validation. This is validation set by a developer using HTML attributes. For example, for our journal title text input on our Quill application, we can add a `required` attribute that checks that the user does enter a value for the title. That is, the user could not submit the form without giving their journal a title. Some other common validation attributes are `minlength` and `maxlength`, which is used to set the minimum and maximum length of characters and could be used for something like the title of a journal. We might want the journal title to be a minimum length and not go over a maximum length. Other validation attributes include `min` and `max`, which are used for numbers. For example, you could use the `min` attribute for a minimum age to buy alcohol online, or you could use `max` value to limit the number of nights you can book a hotel room for online. These attributes all have a value that you would set. There are also some validation attributes like `required`, which we spoke about before, that has no value.

[Music]

Now, before we finish up, something I want to show you is that most modern web applications actually have JavaScript handling validation, something we'll be doing later on in the full-stack boot camp. I'm on the Descript sign-in page. Descript is a video editing tool. If I go to the DevTools, right-click, inspect, and I inspect the password field, you'll see that there's no validation here. I specifically want to show you that there's no `required` attribute. However, when I fill out the form and leave off the password and try to submit it, you'll see "Password can't be blank." You'll also notice that the styling is a bit different. We get a red border, and the text isn't appearing in that popup box, it's appearing below in red. This validation is being handled by JavaScript, and it's a more modern and clean implementation. The reason I wanted to show you this is that you may go around in DevTools taking out different forms and seeing that there is no validation, but validation is happening. So I just wanted to highlight that most modern web applications will be using JavaScript to handle validation, not relying on the HTML built-in validation or custom validation. The most important thing you get from this video is the concept of validation.

Let's now go and add some custom validation to the Quill create journal page. Let's add a minimum length and `required` to our title. We'll add a `required` to the journal category, and we'll also add a minimum length and `required` to the journal entry. Let's jump into VS Code and write this up.

All right, so I'm in the `create-journal.html` file. Inside the input, I'm going to first add the `minlength` attribute, and let's make this three characters. I'll then add the `required` attribute, which ensures users have to enter a value for the journal title. For the journal category, I'm just going to add the `required` attribute, and then for

The text area I'm going to add a m length again. Let's make this 10 characters and a required. So let's check this out in the browser.

So first up, I'm just going to hit submit with no values entered, and you can see straight away it's telling us to fill in this field. I'm just going to enter one character, 'a'. Let's hit submit and see what happens. It says, "Please lengthen this text to three characters." So we can see, see that our min length is working. Let's call this journal fund day.

Now, the journal category actually already defaults to a value, so I can't really test this to show you that it will fail if I hit submit now. You'll see that the journal entry is now giving us an error, "Please fill in this field," because we set it as required. I'm going to enter five characters, 'a', 'b', 'c', 'd', 'e', and hit submit. And you'll see it says, "Please lengthen this text to 10 characters," 'cause that was the min length we set over here. I'm going to enter more than 10 characters, and because we're meeting all validation criteria, the form will submit.

Now, just a small note on this, the particular form elements I have here of a text input, drop-down, and text area don't actually have any built-in validation. If we had, for example, an email input that does have built-in validation, what we have done is just code up some custom validation. Now, of course, you can have both built-in and custom validation, for example, in an email input that comes with built-in validation to check the email format is correct, and you could also make that required, which is custom validation.

Finally, we'll explore how to let users select options by using checkbox and radio buttons. We'll be discussing checkbox and radio types and comparing checkbox and radio. So let's take a look again at the different input types that exist. We've seen textual inputs where users enter text, like password, email, or numbers. We have binary input types, like a checkbox and radio button. We'll be covering these in this chapter. There is a file input that allows users to upload files, and then there is a whole bunch of miscellaneous inputs, like a range or color picker.

Now, in our quill project, we're only using textual inputs, but I thought it would be a good idea to still cover binary inputs, the checkbox and radio buttons, as they are still commonly used. The other input types, file input and miscellaneous, are just not as commonly used, and we would be here a long time if we went through every single one, and we do have more important material to focus on.

Let's start by looking at the checkbox. A checkbox allows users to select one or more options from a predefined list. Here is an example of a self-employment tax calculator, where as a user, you can input different information like annual income, tax codes, etc., and the tool will calculate your tax and take-home income in daily, weekly, monthly, and yearly amounts. One of the criteria it asks for is if you are married, blind, or have no National Insurance contribution. As you can see, checkboxes allow you to select one or more options from the list.

Let's now take a look at the checkbox type in HTML. In this example, I'm going to be making a form where users can select different pizza toppings with checkboxes. We start with an input tag. I'm going to go straight away and add a label tag that will be for the pineapple topping, and I've given it a for attribute of "topping one". Now, you'll notice that for checkboxes, the label will often appear after the input, so that in the browser, the order will be checkbox followed by the label. You can, of course, put your label first, but this ordering is more common. Inside the input, let's add our attributes. The first will be the ID attribute with the value of "topping one", so our input and label are now connected. The next is the type attribute, which we set to "checkbox". This specifies the checkbox type, and if you remember from other inputs, we had types like email and password. The next attribute is the name attribute, which I've given the value of "pineapple". We need the name attribute so when that the data hits the server, the server knows what this data relates to.

Next up, I'm going to add another two checkboxes in this exact format for corn and olives, and you can, of course, add as many as you want. I want you to take note that each checkbox input has a unique name. This is very important, and we'll see now why when we go code this up.

All right, so we're in VS Code now. I've just made a random file called binary inputs.html. The markup you see is just what we saw before. I'm going to now make this into a form by adding the form tags and having them wrap our input and labels. If you remember, the action attribute is the location on the database the data will be sent to. Let's just call this "food/pizza". This could be a restaurant that serves other food like pasta and burgers, so that data would be sent to "/food/burgers" or "/pasta". We'll add our method attributes. In this case, because we're going to be creating a new record on the database, it's a POST method. Final thing I need to do is add a button so that we can submit our form. I'll put the text "submit" inside the button, and for best practice, we know it's good to add type="submit".

All right, let's check this out in the browser. So you'll see all different checkboxes up here. First thing you'll notice is that the labels appear on the right of the checkbox. This is because we put the label after the input, and if we put it the other way around, the label would appear on the left. The next thing you'll notice is I can select multiple options, not just one, and I can, in fact, select them all if I want. This is the nature of a checkbox; you can select one or more values. I'm going to select pineapple and corn, and let's now take a look in Dev Tools as we submit this request. I'm going to right-click, inspect, and head to the network tab. Let's submit. And as you're aware by now, the form has submitted. We just get this error message because there is no server to receive our data. In the network tab, I'm going to click on this row, and you can see under payload, we have "pineapple=on" and "corn=on". Those are the two checkboxes I selected. You'll also notice olives is just absent. This is why it is a binary input; it's either on or off. It's also why I mentioned each name has to be unique: pineapple, corn, and olives, because if they're selected, that name is sent to the server, like we see here, pineapple and corn, and it's automatically just given a value of "on" to say that it was selected.

Let's now take a look at the radio button. Radio buttons allow users to select exactly one option from a predefined list. Looking back at the tax calculator, for the ages section, radio buttons are used, as the person filling out this form can only fit into one of these categories: under 75, 75 to 84, or over 84. So it makes sense to use a radio button; you can only select one option.

Let's now take a look at the radio type in HTML. In this example, I'm going to be making a form where users select their shirt size, like you would see on an e-commerce website. We start with the input tag. I'll straight away go and add a label tag that will be for the small size and give it a for attribute with the value of "small". Like with checkboxes, the label will also often appear after the input, so that in the browser, the order will be radio button followed by the label. Inside the input, let's add our attributes. The first will be the ID attribute with the value of "small", so that we can connect our input to label. The next is the type attribute with value "radio". This specifies that this is a radio type, just like we had before, type="checkbox", or for text inputs, things like type="email" or type="password". We then give the radio button a name attribute, which I've called "size", so that when this data hits the server, the server knows what this relates to. We then also have to give our radio input a value attribute, which I've called "s" for small. Now, this is different to the checkbox type; we didn't need a specific value there, but we do for the radio button. To explain why, let's go and add another two radio buttons, one for a medium shirt and one for a large shirt.

Now, what I want you to notice is that the name value for each of these inputs is the same: name="size". Now, the reason we have the same value is because we're only going to be submitting one of these, because in a radio type, you can only select one option. And because the name value is the same for all of them, the value attribute is needed to distinguish between the options. This all may sound a bit confusing right now, but it will become clearer soon when we look at this in the browser, and I will also be doing a side-by-side comparison of checkbox and radio buttons, so just stick with me.

Now, before we look at that, I do want to do a quick value attribute reminder, as it can be a bit confusing what this actually is. Let's look at the text input, like say the title of a journal. Over here, "title" is the name we set on the text input as name="title", and "car wash business" is the user-entered value; it's what the user actually typed in the input box in the browser on their keyboard. Comparing this to the radio input, we also have the name, which we defined with the name attribute, name="size", but the value "small" is a predefined value. The user is not entering any text on their keyboard; they are simply selecting the "small" option, which has a predefined value of "s". So that when it is sent to the server, it is sent as size=s. If you also remember, we used predefined values on option elements inside drop-down menus.

So let's jump into VS Code. So I've got the code we saw before. Let's go and make this an actual form by adding in the form tags and having them wrap these inputs and labels. As you'll recall, the action attribute is the location on the database we're sending this data. I'm just going to make it "/shirts", and then also going to add a method of "post", as this data will be sent to a server and a new record would be created for the order of this particular shirt. I'll finish up the form by adding a button so that we can submit it, and for best practice, I'm going to add type="submit".

Let's check this out in the browser. So you can see, like up checkboxes, we now have radio buttons with the labels on the right. And you'll notice I can only click one of them. As soon as I click another option, it immediately removes it from the previous location. This is the nature of a radio button; you can only select one option. Before we submit the form, I want to open up Dev Tools so we can see the HTTP request. I'm going to select "large" and hit submit. I'm then going to click on this row over here and look at the payload tab, and you can see we have "size=L". Only one piece of data is being submitted, and that is why we had to explicitly define a value, because the size of the shirt could be any one of these values, 'cause "size" is used three times for small, medium, and large. So in order to distinguish these, we had to provide a value. There's no "on/off" like we saw in the checkbox before.

Before we finish up, I want to do a detailed side-by-side comparison of checkbox versus radio buttons to help clarify their differences, as I know it can be confusing to properly appreciate the differences between them. Looking at the checkbox first, the checkbox form we built was for a list of pizza toppings: pineapple, corn, and olives. If you can recall, we gave each checkbox a unique name. We do this for checkboxes because the user can choose one or more options. This means one or more options can be submitted, so each option has a unique name. We saw when we submitted it in Dev Tools, we just had the value "on" when we ticked the checkbox. For checkboxes, the value attribute is not needed, as each input has a unique name and is either on or off.

Now, looking at radio buttons, the form we built with radio buttons was a list of shirt sizes: small, medium, and large. If you can recall, each radio button has the same name, "size", and also a unique value: "s" for small, "m" for medium, and "l" for large. We do this for radio buttons because the user can only choose one value from the options. This means only one option can be submitted. So each option has the same name. In Dev Tools, we saw this where we selected "large" and the payload sent to the server was "size=L". For radio buttons, the value attribute is needed, as each input has the same name. There's no "on/off" like in checkbox; we need a value there to distinguish between the different options.

All right, I know that was a lot to take in, but we've now completed the HTML form section of the course. The next topic is containers and semantic HTML, where we'll start by discussing the important concept of block and inline elements, and we'll then move on to look at the generic container elements, div, span, and finish off the topic by exploring semantic HTML, which are critical for proper HTML document structure.

Let's start by distinguishing between two fundamental types of HTML elements known as block and inline elements. We'll be talking about block and inline elements and nesting block and inline elements. So, what are block and inline elements? All HTML elements are by default either a block or inline element. First, let's look at block elements. Block elements always start on a new line. I'm going to represent them like this. They start on a new line because they take up the full width of a page. Some examples of block elements that we've seen so far are headings, paragraphs, unordered lists, and list tags.

Now, let's look at inline elements. Inline elements do not start on a new line, unless they appear after a block element. It's because the block element takes up the full width, so it pushes the inline element onto a new line. I'm going to represent them like this. Inline elements only occupy the width of their content. Some examples of inline elements we've seen so far include anchor tags, images, line breaks, and inputs.

Now, this distinction between block and inline elements may not seem that important at this point; it may just seem like good to know for now, but understanding the concept of block and inline elements is absolutely critical when it comes to CSS, because styling rules are heavily influenced whether an HTML element is block or inline.

Let's take a look at block and inline elements on our quill homepage. I'm going to right-click to go into Dev Tools. I'm then going to click on the inspector and I'm going to click on this heading. First, you'll notice that this blue box is extending the full width of the page. We know that this is a heading; it's an H2, and headings are block elements, so you can see it's behaving as you'd expect, starting on a new line and extending the full width of the page. We can see that this is the same for a paragraph element over here.

Now, if I hover over this image, you'll notice the blue box does not extend the full width of the page. The blue box only takes up the width of the content, i.e., the image, and this is the behavior of an inline element. An inline element does not extend the full width of the page; it only occupies its content. If I scroll down, I flagged this funny behavior in a previous chapter where we had our quill logo appearing next to the "Get Started" anchor text. It was funny behavior because we're used to seeing elements start on a new line, but now we can understand why this is happening because of our knowledge of block and inline elements. We have a "Get Started" hyperlink, which is an anchor tag, which is an inline element, so it will only occupy its width and the image is also an inline element; it only occupies its width and doesn't start on a new line. So that's why our image appears next to the "Get Started" as opposed to on a new line, because it's an inline element next to an inline element. And the reason the "Get Started" anchor tag starts on a new line is because it's being pushed down by the previous block element, this heading.

Now, what you'll notice is we actually have these images that aren't appearing next to each other like you would expect inline elements to do. We can see that behavior over here and at the top. These anchor tags would ordinarily appear next to each other. So why is that happening? To understand it, we need to look at nesting inline and block elements. An inline element can be nested inside a block element. Taking a look at the navigation bar on the quill homepage, we have list tags, which are block elements, and inside our list tags, we have anchor tags. The login and register links are anchor tags, which are inline elements. So we can see here we have a block element which is wrapping an inline element. So that is why the anchor tags and images we saw are not appearing next to each other; it's because they're being wrapped by a block element, which always starts on a new line and occupies its full width.

Now, an important rule to remember is that placing a block element inside an inline element is invalid. Let's compare what is invalid and valid. First, looking at invalid, if I have an anchor tag, which is linking to a login page, and put inside the anchor tag a heading, we would then have an inline element, the anchor tag, wrapping a block element, the heading, and this is invalid. You can't do this. What is valid is to start with the heading and inside the heading, place the login anchor tag. We would then have a block element, the heading, wrapping an inline element, the anchor tag. This is valid, and in fact, this kind of markup is fairly common. Looking at the Alig Wikipedia page, I'm going to right-click, inspect, and check out this hyperlink which says "satirical". You can see in Dev Tools, we have a paragraph, which is a block element, and the anchor tag is inside this paragraph element. We have an inline element inside a block element, and this is the case for all the hyperlinks inside this paragraph; they're all anchor tags wrapped inside the main paragraph tag.

To help clarify this concept, I've created this table which summarizes which elements you can nest inside another element. The rows of this table are the parent, and the columns are the child. Starting off with a block parent and block child, an example of this would be an unordered list with list tags inside of it. This is valid; we can do this. Next up, we'll look at a block parent and an inline child. An example of this would be anchor tags inside a heading, and this is valid; we can do this. Moving on to an inline parent and a block child, an example of this would be heading tags inside anchor tags. This is not valid; we can't do this. And the final example is inline parent and inline child. An example of this would be an image inside anchor tags. This we can do; it is valid.

Before we finish up, I want to show you an example where we have three layers on our quill homepage. In our footer, we have our social media icons. They're images inside an unordered list. In our markup, we can see we have the image tag over here. This is an inline element. This is then wrapped by anchor tags, which is another inline element, and we know wrapping inline inside inline is valid. The anchor tag, inline element, is then wrapped by our list elements. So our list element is a block wrapping an inline element, the anchor tag, which is valid. And then the list tags are wrapped by the unordered list tags. We have a block inside a block, so this is also valid. I'm going to go back now and select each element, working up from the image to the unordered list. If I click on the image, you'll see that it's only occupying the width it needs to. If I then go a level above and click on the anchor tag, you'll see that it's also only occupying the width it needs to. Going a level up, I'm going to click on the list, and at this point, you'll see the blue box is extending the full width of the page, and that's because this is a block element. And finally, going a level up to the unordered list tag, you can see the blue box extends the full width of the page again, because this is a block element.

So let's summarize this chapter and start to build out the summary card for this topic called containers and semantic HTML. We covered block and inline elements. We started with block elements, which always start on a new line, and they take up the full width of the page. We saw examples of block elements like headings, paragraphs, unordered lists, lists, and list tags. We then looked at inline elements. Inline elements do not start on a new line, unless, of course, they're directly following a block element. A block element pushes the inline element onto a new line. Inline elements only occupy the width of their content, and examples of inline elements are anchor tags, images, line breaks, and inputs.

Next, we'll dive into two versatile elements used for structuring and styling web pages: div and span. We'll be discussing containers, the div element, the span element, and the differences between divs and spans.

I'm going to start off by talking about storage containers in the real world. I live in a fairly small apartment in London with my wife, four-year-old son, and two-year-old son, so space is always an issue for us. So to help, I've got this shed in my patio area that, at least once a month, I'm in there sorting it out before it goes back to complete chaos. You can see it is currently in a state of chaos, so it is only a matter of time before my wife will be shouting at me to go and clean it up. Now, to help manage storage, not that it seems to be helping that much, you can see we have these large plastic storage containers in my shed. I have six of these: a container for baby clothing for the ages 6 to 12 months, a container for clothing for 12 to 24 months, books, 0 to 6 months, clothing, toys, and my work stuff. These containers help keep things organized and store related items together.

So, what is a container when it comes to HTML? A container groups content and is used in conjunction with CSS to control the positioning and styling of content blocks. Here is the Notion homepage. You can see here in red, there are two main containers that contain two different kinds of content, and the content in the container is all related to each other. For example, the top container contains information about the companies that use Notion, whereas the bottom container is about a specific feature that Notion provides. You can also have containers within containers. You can see a smaller content container here in green, which contains all the logos of the companies using Notion.

So, how do we create these containers in HTML? To do this, we use the div element. The div element is a block-level container element used to group content for styling and positioning. The div element has an opening tag, a closing tag, and then you would put all the content you want inside these div tags, which for now I am representing by a comment which says "code block".

Let's go check this out in action on the Notion homepage. I'm going to right-click and click inspect to open up Dev Tools. You can see over here is a div which is grouping all the content together related to companies using Notion. I can also go inspect the logos and you can see here another div which is used to group together all the logos. This div is nested inside the other div, so you can see we have containers within containers. I'm going to zoom out a lot on the Notion page and I'm going to grab the inspector tool and click on those main containers. You can see a container for this section, another container for this section, and another container for this section. So divs are being used to contain related content.

Now, I want to show you what I mean by the div being a block element. I've created this very simple HTML file. We have a heading, a paragraph, and four hyperlinks: link one, link two, link three, and link four. Let's see what this looks like in the browser. So we know from the previous chapter, headings and paragraphs are block elements; they take up the full width of the page, like we can see here. Anchor tags are inline elements; they only occupy the width they need and don't start on a new line. And if you remember, the only reason link one is starting on a new line is because it's pushed down by the paragraph tag. What I'm going to do is now group link one and two together and link three and four together by adding in a div. I'm going to type `div` and hit enter. I'm then going to cut these two hyperlinks and put them inside the div. I'm going to do this again for the second set, cut the anchor tags and put them inside the div. Let's refresh the browser to see what happens. You can see that link three and four now appear on a second line, and that's because the anchor tags are wrapped in a div, which is a block element. Let's inspect this on Dev Tools. You can still see the anchor tags themselves are only occupying the width they need to. However, because they're wrapped inside a div, and div is a block, the div element takes up the full width of the page, which forces link three and four, which are also inside a div, onto the next line. So, just remember, the div element is a block-level element; it will take up the full width of the page and force any content below it in our HTML document to start on a new line.

Now that we've looked at the div element, which is a block-level container, we also have inline containers. An inline-level container element is most commonly used to style a portion of text. This is the homepage of Canva, which helps you easily create designs for presentations, social media, and more. In the heading, the word "design" has been styled differently compared to the rest of the words. The styling has been applied in CSS, but to achieve this, the word "design" has to be inside a container, and it has to be an inline container. I want to show you why using a div element here simply wouldn't work. I've made a new HTML document called inline-container.html. All I have is a simple heading where the text is the same from the Canva homepage: "What will you design today?". As I mentioned, the word "design" is styled differently, which is handled in CSS, but in order to achieve that, we have to wrap it inside a container. Let's try using the div container. I'll grab our div tags, cut the word "design", and put it inside the div tags. Let's check this out in the browser. You'll notice a problem: the heading is no longer on one line. That's because the text "design" is inside a div, which is a block element, and we know that block elements take up the full width of the page and always start on a new line. So using a div container, which is a block element, for text doesn't work. We need an inline container element.

So, what is this inline element? It's called the span element. Let's say I have the heading "Create amazing journals". If we later want to style the word "amazing", we would need to wrap it in span tags. There's an opening tag and a closing tag. By doing this, custom styling can be applied without impacting the rest of the heading. In CSS, we would target this span and apply the styling, something we'll be doing soon in the CSS section.

Let's check out the span in action on the Canva homepage. I'm going to right-click and open up the Dev Tools. I'm going to click the inspector icon and click on the word "design", and you can see that the word "design" is inside this span, which is nested inside the heading, surrounded by the rest of the text. Now, in HTML, the text and span are appearing on separate lines. It's the exact same thing if it were to all appear on one line in the HTML. And just to give you a bit of a teaser for CSS, inside the Styles tab here, we can see this background image and this color property. If I turn them both off, you'll see it goes back to black. So with CSS, we're targeting this span and applying these two properties, which gives the text this gradient look.

Now, when I started learning about divs and spans, I found it a bit confusing to understand the difference between them and their exact purpose. To help with this, I want to compare divs and spans inside this table. First off, we'll look at divs. The tag for a div is `div`. They are used to group larger blocks of HTML content for styling and positioning in CSS. The div is a block-level element. Let's now look at the span element. Its tag is `span`. Span is primarily used to wrap text for custom styling. Span is an inline-level element. As a general rule of thumb, you'll be using divs a lot more than spans, because every HTML document will need overarching structure, whereas not every page requires text to be styled in a certain way. And just remember, both the div and span may seem to have very little functionality right now, but they do become very, very important in CSS.

Let's now finish off by adding to our summary card: containers and semantic HTML. We looked at the div and span element. The div is a block-level element. In this snippet of code, there is an H1 and paragraph tag inside a div. Divs are used to group content. On the other hand, span is an inline-level element. In this snippet of code, we have an H1, and the span tags are being used to wrap the word "full". Spans wrap text, which are later styled in CSS.

Let's now go and see how we can add the div element on our quill homepage. I've divided our page into different sections. The first is the navbar container. We then have the hero section, which is also a container. Next up, we have the features section. Then towards the bottom of the page, we have our call to action, and finally, the footer. So let's go and add div elements for all these sections.

I'm inside our index.html file. You can see I've actually already flagged these sections with comments, so I'm just going to go add divs for each of these sections. I type `div` to get the div tags and just cut the content and place it inside and make sure it's correctly indented. Next, for the hero section, then the features section, then the call to action section, and then finally the footer. Now I've noticed I still have this comment from a previous chapter, which we have already done, so I'm just going to delete it. So we've now added divs to our markup to act as containers. Let's see what this looks like in the browser. What you'll notice is nothing. Nothing has changed. The div element is just a structural element; there's no new additional content on the page. Now, you may be thinking, what is the point of this div element? It seems so unnecessary. The first is to improve the HTML itself, and this will only become clearer in the next chapter when we talk about semantic HTML. The second is that creating containers like this is absolutely critical to CSS, because we can apply styling and layout rules to a container. So, for example, our call to action over here is inside a blue box, so later on we're going to be applying a background color to this entire container. For now, just understand that the div is a structural element that helps group related content and is critical for CSS later on.

Now, in our features section, we looked at before, there is in fact three different features shown here in green that each contain a heading, paragraph, and an image. These are all smaller containers; they're divs inside another div. Let's go and add these to our HTML file inside our features section. I'm going to go grab a set of div tags. I'll then cut the first feature and place it inside the div, and I'll do the same to the other two features. Now, one thing you'll notice is that our markup does become a bit easier to read, and this is what I mean by improving our HTML code. Each feature is nicely contained within these div elements. The features and the heading are then all indented and nested inside the parent div. It's just a little bit easier to read, and this will only be improved in the next chapter when we look at semantic HTML. Including these divs will not make any difference to how our page appears in the browser; the divs are just structural units. Now, you may be thinking, how do I know where to put divs? Don't worry about this right now. The placement of divs is often more governed by what you want to achieve in CSS, and we'll be seeing this inside the CSS topic. So just don't worry about it now; just know that you can have divs inside divs.

Let's head back to the quill homepage and add a span element. We're going to be adding a span over here where we have the text "Mindful Living". Doing this means that when we get to the CSS section, we can easily add the purple background just to this portion of text. In the features section, we have this same design element for "simple and easy", where we'll now add a span element so we can easily add this orange background color in the CSS section.

Let's jump into VS Code. I'm back in our index.html file. In our hero section, inside the heading, we saw in our design "Mindful Living" had a purple background, which we're going to be styling later in CSS, but in order to do that, we need to wrap it in some span tags. So I'm going to go grab those now. I type `span` and hit enter to get the tags. I'll then cut this piece of text and place it inside the span tags. We need to do the same thing in our features section. In our design "simple and easy" had an orange background, so for now, I'm also going to go grab some span tags and place the text inside there. Let's check this out in the browser. And as you can see again, nothing has changed. "Mindful Living", which is now in a span, doesn't look any different. The span is just a structural unit; it's there as a container to wrap the text.

Finally, we'll learn how to improve clarity and accessibility of web content by using semantic HTML. We'll be talking about containers, semantic elements, and the difference between semantic elements and the div element.

Now, I want to talk about containers. In the real world, like I did in the previous chapter, if you remember, I have my shed outside, and inside the shed, I have these containers where we store different items. Now, I actually have a very modern system for keeping this organized. I've taken photos of everything inside each container and put them in different groups on my phone, so I know what's inside each box. But imagine if I didn't do this, and instead, I just had a labeling system like this: Box 1, Box 2, Box 3, Box 4, Box 5, and Box 6. This labeling is not very helpful; it doesn't tell me anything about what's inside the boxes.

Now, I want to show you an example of some bad markup. This is EU Startups, it's a news website that has articles about different startups in Europe and usually focuses on a company's successful venture capital raise. If I right-click and go inspect to open up Dev Tools, you can see in the markup here, we have a whole bunch of containers defined by divs. For example, this navigation bar up the top is defined inside a div, and if I grab the inspector tool, this section on "Now and Insights" is also contained inside a div. If you look at the markup, you can just see divs being used everywhere. Now, as I mentioned, this is considered bad markup; it's like using "Box 1", "Box 2" to label storage containers.

Let's go back to my shed. Instead of labeling the storage containers "Box 1", "Box 2", etc., using labels like these that describe what's in the container is a lot more helpful. This now brings us to semantic HTML. The word "semantic" is just a fancy word for meaningful, so in other words, meaningful HTML. So, what is semantic HTML? Semantic HTML is using HTML elements that describe the type of content they contain. So instead of using a generic div as a container to group related content, HTML gives us a handful of other container elements that better describe the content they contain. We're going to look at those elements soon.

I want to discuss three reasons why using semantic elements to group content is better practice. The first is accessibility; it helps users with disabilities who rely on screen readers and other assistive technology. The second reason is SEO, which stands for search engine optimization; it improves search engine rankings by helping search engines better index webpage content. And the third reason is cleaner code; it creates clean and structured code that you and other developers can more easily understand.

To explain semantic HTML, we'll be looking at this mockup of this fake website called "Dan's UX Review". The idea of this website is to have articles that review the UX of different web applications. This mockup is called a wireframe; it's a simple visual guide that shows the basic structure of a web page without the design details. Now, as we know by now, all the content of this page is going to be contained inside a `body` tag. Let's now split this page up into three main sections. This top part contains the navigation menu and the main heading of the page. For this kind of section, we would use a semantic element called a `header`. Just like a div, the `header` is grouping this content, but it has a more useful name, `header`, as opposed to `div`. Headers always contain introductory content, often containing logos, navigations, and headings. Now, don't confuse `header` with `head`; the `head` contains information that is not displayed by the browser, we've seen things like meta tags, as well as the title of the page, whereas the `header` is a semantic element. In the middle, we have our main content section, and we can use the semantic element called `main`. The `main` element represents the main content of a web page, and we can only use one per page. At the bottom, we have the `footer`, which is also a semantic element. Footers contain contact details, related links, and copyright information. Now, you can use divs for these three sections, but using the semantic elements is a much better approach because they better describe the content they contain.

Now, there are also a handful of semantic elements we use inside this structure. For the navigation bar, there is the semantic element `nav`. The navigation menu typically contains links to different parts of the website. On the top left of the main section, we can see the most recent article, and we can group this content with the semantic element `article`. An `article` typically contains self-contained content, like a blog post, news article, product card, or user comment. While an `article` is often used for an actual article, don't let the name "article" fool you, as I put in the description here, it's not only used for a news article and can be used for things like product cards. We have this small section advertising Notion. It's placed here because on the left, I have an article about Notion. To group this content, we would use the semantic element `aside`. An `aside` is used for tangentially related content, like sidebars, advertisements, or quotes. Below this, we have two sections. The top section contains a group of articles that are organized by industry, while the section below this has some testimonials. For these sections, we can use the semantic element `section`. A `section` is used as a thematic grouping of content, typically used to divide a web page, and will usually have headings.

This is getting quite cluttered, so I'm going to strip a lot away. What we're left with here is a simple diagram showing semantic elements. I now want to look at this website called smartcompany.com. It's very similar to the EU Startups website we saw earlier but covers Australia instead of Europe. Let's open up Dev Tools and check out the markup. Unlike EU Startups, Smart Company is using semantic elements. For example, we can see the `header`, inside the `header` we can see a `nav` element, we can see all these different `section` elements. If I grab the inspect tool and click over here, we can see the `article` element. Now, this can seem a bit confusing with divs and articles floating around, and we will be discussing later when to use divs and when to use semantic elements. For now, I just wanted to show you some semantic elements in action. Now, you don't have to use all the semantic elements, and you can place them wherever makes sense for your design. So, for example, we could have a design where on the far right, there's another navigation menu, and next to the navigation menu, we could have three sections. So the placement of semantic elements can vary depending on the specific layout of a page.

When I got started, I was so overwhelmed with being thrown all these different semantic elements and questioning myself when I should use the right one. Seriously, don't worry about this. The good news is that most web applications will follow a simple structure and won't use all the semantic elements on a single page. So, for example, inside the `main` section, you could just have three sections like this. If you used, for example, the `article` semantic element instead of the `section` element, it won't actually change anything to do with your markup; it still acts as a container. So don't worry too much about memorizing all the semantic elements and overthinking which ones to be using. I would suggest just remembering the ones you see on the page.

Now, because this structure is quite common, having three big divisions in your page with the `header`, `main`, and `footer` semantic elements, and then inside the `header` having a `nav` element, and inside the `main` having several `section` containers, I want to show you this simple structure on this web application called Wise. Wise is a tool I use to transfer money overseas at very affordable rates. If I right-click and open up Dev Tools and inspect the top over here, you can see we have our `header`, and inside the `header`, the `navigation` element. Next up, we have the `main` element, and the `main` element contains a whole bunch of different sections. There are no elements like `article` and `aside`, and right at the bottom, we have our `footer`. So, as I've previously mentioned, this is a very common structure, and again, don't worry about all these divs floating around; a lot of the time they'll be there because a front-end framework is also in play, and that framework will often require the placement of divs. For now, I just want you to see that the simple overarching structure of headers containing navs, mains containing sections, and a footer at the bottom is a simple structure and is common.

I now want to discuss semantic elements versus the div element. I want us to understand where it's appropriate to use semantic elements and when it's appropriate to use the div element. We'll be looking at the footer on the Assigner homepage. Let's take a look at semantic elements first. Semantic elements provide meaningful structure, typically used for significant sections. For example, the entire footer in red is a semantic element. On the other hand, the div element is a generic container, typically used for smaller groups of content. For example, to group all the links, we could use a div element. We could also use a div element at the bottom to group all of this content together, and we can also use more divs inside this div, grouping things like the social media icons. So don't just throw away the div element; it still is really important, as we're often going to want to group smaller sections.

of content where using a semantic element just wouldn't make sense. Let's check out the footer in Dev tools. I'm going to right-click and inspect. The first thing you'll see is the semantic footer element, which contains all elements of the footer. You can then see we have two divs. The first groups all the links together, and the second groups the content at the bottom. I can continue to expand this div to see more divs grouping these pieces of content together, like the social media icons.

Let's go and finish off our Containers and Semantic HTML summary card. We looked at semantic HTML. We saw that a page has three main divisions: the header, the main, and the footer. Inside the header, we often include a navigation section. Inside the main, we have semantic elements like articles, asides, and sections. And just remember, a lot of the time we're just going to be using sections.

Let's now look at adding semantic elements to the quill homepage. The header contains our navigation bar and hero section. For the navigation bar, we can use the semantic element `nav`, and for the hero section, we can use the semantic element `section`. Scrolling down, after the header comes our main container. Inside the main container, we can use the `section` semantic elements to group together all the content related to the features. We can then use divs to group together each feature, so you can see here we're using both semantic elements and the div element. Scrolling down, this part would still be in the main container. We could then use a `section` element to group the content related to the call to action, and then right at the bottom, we'd be using a `footer` element.

Let's now go code this up. I'm inside our `index.html` file. The first thing I'm going to do is grab the header tags. Inside the header, we have both our navigation and hero section, so I'm going to cut this and put it inside the header. I'm then going to replace the divs we're currently using to group the navigation content with the `nav` tag, and then I'm going to replace these divs with the `section` tag.

Next up, I'm going to go get our `main` tags. Inside our `main` section, we have the features and call to action, so I'm going to cut that and place it inside the `main` tags. I'm then going to replace this div with a `section` tag, and then I'm going to leave these divs as they are. These divs are working just fine, grouping the smaller section of content that is each particular feature. I'm then going to scroll down and then update the div in the CTA section to the semantic `section` tag. I'm then going to scroll down and replace the divs that are currently containing all the footer content with the `footer` element.

So there we have it. We're using semantic elements to properly structure our page. We've got the header at the top, the main in the middle, and the footer at the bottom, and then we're using other elements like `nav` and `sections` inside those three main divisions. And just like with divs, if I open this up in the browser, we're not going to see any change on the web page. The semantic elements are just there to better structure the HTML document itself and give meaning to each container, as opposed to a general div.

All right, we've now completed Containers and Semantic HTML, and we'll be moving on to the last topic of the course, Scientific HTML. We'll be taking a look at the origins of HTML and learn about HTML tables and other scientific elements.

So, before we finish the last topic, I just wanted to quickly let you know a bit more about my mission at Future Full Stack. Future Full Stack has been built to be the world's best online full stack web development boot camp that delivers a world-class learning experience at an affordable price. As you've hopefully seen from this course, I value creating incredibly high-quality material that comprehensively covers everything you need to know in a fun and engaging way. The boot camp is designed for complete beginners with no coding experience, and by the end, you'll be able to build sophisticated full stack web applications. It's ideal if you're looking to start a career in software engineering or wanting to launch your own dream web applications. This HTML full course you are currently watching is part of this boot camp, where the same high-quality teaching can be experienced in all other topics.

The boot camp is split into two major sections. Where first we cover web development fundamentals with the topics in Introduction to Web Development, HTML, CSS, and JavaScript. The second section of the course is full stack development, where we take what we have learned from the fundamentals and extend our knowledge to build a full stack web application. We cover the topics: databases, web design, Node, Express, and React.

Now, most boot camps out there build different projects within different topics, often referred to as capstone projects. In this boot camp, we work on the quill major full stack project from the from the very first video to the very last. This approach is much smarter, as the most challenging aspect of full stack web development is getting a real understanding of how the front end, backend, and database all work together, and you will not be able to see this in smaller topic-based projects.

Now, for complete transparency, the fundamentals of the boot camp will be completely free on YouTube. This means, no matter what, you can master HTML, CSS, and JavaScript without spending a cent. If you're serious about learning web development, you'd likely be paying for similar courses on other platforms, but with me, not only will you save money, but you'll also get a superior learning experience at no cost.

For those ready to take their skills to the next level, I'm offering the full stack development section as a paid option. Head on over to futurefullstack.com to learn more. While I'd love to give everything away for free, I have a family to support and bills to pay. That said, even with the paid section, you'll still be saving thousands of dollars compared to a traditional boot camp while receiving the highest quality learning experience. I hope I've done a good job at convincing you why Future Full Stack is the best option for learning web development, but let's now get back to it.

So, back to the Scientific HTML topic. Let's begin by learning how to organize and display data effectively on a webpage using HTML tables. We'll be discussing what is a table, table elements, `colspan`, and `rowspan`, and the evolution of layouts.

So, what is a table? A table displays information in a grid format, arranging data by rows and columns. Here's an example of a table displaying data about popular World Indices, like the S&P 500, which is the performance of the top 500 shares in the US. It presents each index in a row, and the columns display key data like the price and price change. This is an example of an HTML table. Here is another table from a Wikipedia article detailing Conor McGregor's UFC appearances. This table provides a summary of his various fights, including who his opponent was, the venue, and the city, and other relevant information. Below this, there is another table outlining his short-lived boxing career and where he made a ton of money fighting against Mayweather. These tables succinctly present Conor McGregor's performance history in both UFC and boxing.

Let's now go through the various table elements by using Conor McGregor's UFC fights as an example. Now, I promise I tried really, really hard to look for a table and, more importantly, well, topics like population statistics, but I had to settle for this table because it does have some good features and data that will make teaching HTML more effective.

The first element we need to look at is the primary wrapper for a table, which is the `table` tag. Similar to how forms work, we had a `form` tag wrapping all the form elements, so too with a table, we have a `table` tag wrapping all the table elements we will see soon. Inside VS Code, I'm going to go make a new HTML file, like always. I'm going to click "New File," select "Text File," click "Select a Language," search for "HTML," and hit Enter. I'll grab the boilerplate code straight away by hitting exclamation mark, Enter, and then I'll save this document by hitting Command S on my Mac. Let's save it on the desktop and call it `table.html`. I'm also going to update the title to "Table".

Now, inside the body, let's go grab those `table` tags. I'm going to type `table` and hit Enter, and as we move through the video, we're going to continue to build out our table in this file.

Now, HTML tables are split up into three major sections. We first have the headings of the table, which we use the `thead` tag for. This is the table head tag, and it contains heading information. Next is the body of the table, where we have the `tbody` tag. This is the table body tag, and it contains rows of data. And finally, we have the `tfoot` tag, which is the table foot tag, and it is typically used to summarize information in the table. These three tags are structural elements, kind of similar to the semantic elements `header`, `main`, and `footer`, which we used for overall page structure. Let's add these to our HTML file.

So, let's go and add those three tags. I'm first going to get the table head tag by typing `thead`. I'm going to hit Enter for all of these to create space because we will be entering other elements inside these ones. The second section was the table body, so I'm going to go get `tbody` and hit Enter. And the final section was the table footer with the tag `tfoot`.

We now need to split our table into independent rows, and each row needs a `tr` element, which is a table row tag. We've added a row tag inside the `table head`. Next, we add four rows inside the `table body`, and then finally, we have one row inside the `table footer`.

Now, just a reminder that the elements we saw before, `thead`, `tbody`, and `tfoot`, are structural, just like `header`, `main`, and `footer` elements on a main page. We still need a `tr` table row tag whenever we have a row. So, it means you'll often just have one row in your `table head` and one row in your `table foot`, but just so you know, you do explicitly need to define a table row wherever you have a row, even if it is containing just one row, like the `table head`.

Let's add this to our table in our HTML file. In the `table head`, we need to add one row, so I'm going to get the `tr` tags. In the `table body`, we have four rows, and I'm going to use that trick where I type `tr * 4` and then I'm going to hit Enter inside each of them, as you are going to be adding other elements to this soon. And then finally, we need one row tag for the footer.

Now, this is where HTML tables become a bit painful. We need to define every single cell individually. Inside the `table head`, each cell is defined with a special tag known as the `th` tag, which stands for table header tag. For all the other cells, we use the `td` tag, which stands for table data tag. This process of defining every single cell may seem somewhat cumbersome, but it is unfortunately a necessary step in HTML table creation. It's also at this point we add in the table content. So, let's jump into VS Code and write this up.

Okay, I'm back in our `table.html` file, and I've put the table on the right here as a reference so we can easily see the content we need to add. Inside the `thead`, we have our `tr`, so let's go add each cell now. Now, we need to use this table header tag, and you can see there are five different cells in this row: Event, Fight, Venue, City, and PPV, which stands for Pay-Per-View. So, I'm going to go `th * 5` and now we enter the text: Event, Fight, Venue, City, and PPV.

Let's now go to the `tbody`. Over here, we have four rows for each row of data. The tag we use here is the `td` tag, the table data tag, and again, inside this row, we have five cells. So, I'm going to go `td * 5`. Now, this structure is going to be repeated for each row. Inside the `table body`, we have four rows, each with five cells. So, I'm just going to copy this and replace each table row tag so we end up with a table row with five cells in them.

So, let's add the content for this first row. The first cell in the row is the event: UFC 189. The next cell is the fight: Mendes vs. McGregor. The next cell is the venue: MGM Grand. The next is the city: Las Vegas, and the next cell is the number of pay-per-views, in this case, 825,000. Let's do the next row together. This row over here: the event UFC 194, the fight Aldo vs. McGregor, the venue MGM Grand, the city Las Vegas, and the number of pay-per-views 1.2 million.

Now, to avoid boring you, I'm just going to go fill in the other two rows, but it's the exact same format. All right, you can see here I've just filled in the content, and it's the exact same format as the other two we did previously.

Let's now move down to our table footer. Inside the footer, we have our row, and now we're going to go add each cell, and we still use the table data tag. In this case, there's only two cells: Total Sales and the Pay-Per-Views. So, I'm going to type `td * 2`. The first cell is "Total Sales," and the next cell is the total number of pay-per-views.

All right, so let's check this out in the browser. So, here you can see our table. I want you to notice two things. The first thing I want to mention is that this doesn't look like a table we saw on Wikipedia where we had lines vertically and horizontally making the table look a bit clearer. That's handled in CSS. I also want you to notice that the first row has different styling to the rest of the table. The text is bold and centered. This styling is automatically applied because we're using a `th` element for the cell, whereas all the others are using a `td` element.

Now, the most important thing I want you to see is that the table footer looks very different to the table we saw. In the table we saw, "Total Sales" spanned across four columns, which then pushed the total number below the other numbers in the Pay-Per-View column. So, let's now look at how we can achieve that.

So, let's take a look at `colspan`. `Colspan` is an attribute that specifies the number of columns a cell should span horizontally. We do this by including a `colspan` attribute in the table data opening tag and set its value to the number of rows we want to span horizontally. In this example, the value of `colspan` is four, saying that we should span four columns. Let's see how this works. We need to work out the number of columns we want our cell to span. "Total Sales" is spanning 1, 2, 3, 4 columns, so we need the cell to span four columns, and you can easily work this out visually. Let's go and update our table in VS Code.

I'm back in our `table.html` file. I'm going to scroll down to the `tfoot`, and inside this `td` tag, I'm going to add a `colspan`, and I'm going to set the value to four to span four columns. Let's check this out in the browser. So, you can see the "Total Sales" is now spanning these four columns, which results in this total number being pushed into the correct column.

Now, something I want to do to improve this table compared to the original on Wikipedia is group together these venues, MGM Grand, which we can see three times, and group together the city, Las Vegas, which we can see four times. So, how do we do that? We achieve this with `rowspan`. `Rowspan` is the opposite of `colspan`. `Rowspan` is an attribute that specifies the number of rows a cell should span vertically. Let's look at the MGM Grand cell. We can add a `rowspan` attribute to the opening tag with a value of three, which is equal to the number of rows to span vertically.

Let's see how this works. Here we have the right-hand portion of our table with the columns Venue, City, and Pay-Per-View. I'm going to add in these lines to show the different rows. I'm then going to number the rows that contain the data. So, we're ignoring the header row. We have Row 1, 2, 3, and 4. Looking at the Venue column first, the cell "MGM Grand" is repeated three times. So, here we want this cell to span three rows to end up looking like this. To achieve this, we can write `rowspan="3"` inside the first table data cell containing "MGM Grand." I want to do the same thing in the City column. We have "Las Vegas" repeated four times. Instead, we want the cell to span four rows, so it ends up looking like this. To achieve that, we would add `rowspan="4"` into the first table data element containing "Las Vegas."

Let's go and write this up in VS Code. So, I'm back in `table.html`. I'm going to scroll down to the body of the table. We can see "MGM Grand" is repeated three times over here, over here, and over here. So, the first thing I'm going to do is add in our `rowspan` by typing `row`, and you'll see `rowspan` automatically comes up, so I'm just going to hit Enter. We wanted this to span three rows, so I'll add the value three. Now, it's really important that we delete the other cells, otherwise what would happen is that this would span three rows, but these cells would still exist. So, I'm going to delete this one, and I'll delete this one. So, you can see the `rowspan` attribute is only added to the first instance of the data we want to group.

Let's now add the `rowspan` to "Las Vegas." "Las Vegas" is repeated four times over here, here, here, and here. So, let's go add `rowspan` and set the value to four, and again, make sure you delete the other "Las Vegas"es.

All right, let's check this out in the browser. So, you can see this has worked. "MGM Grand" is only written once now and spans these three rows. "Las Vegas" is also only written once and spans the four rows. Let me show you what would have happened if we didn't delete those cells. I'm going to add back in the "MGM Grand" we had it over here, and we had it over here. Let me refresh. Now, what's happened is that our "MGM Grand" over here is still spanning three rows, and our "Las Vegas" is still spanning four rows. The impact this has on, say, this row is that this is in the right location, this is in the right location, but after "Aldo vs. McGregor," because of the two `rowspan`s being defined here, it's essentially pushing this "MGM Grand" into the Pay-Per-View column, which is then pushing the 1.2 million into a totally separate column, and the exact same thing is happening for this "MGM Grand." It's being pushed into the Pay-Per-View column, which is then pushing the 1.3 million into a new column. Long story short, just make sure you're deleting cells that need to be removed when using `rowspan`.

Before we finish up, I want to quickly discuss the evolution of layouts. In the past, tables used to be the primary method of positioning elements and creating structured layouts. Here is an example of the Asana website, where this layout would have been achieved with an HTML table before 2013. Today, this is done with CSS, as CSS has become more advanced with its layout capabilities.

I'm on the Asana homepage, and let's open up Dev tools to see what's going on. Right-click, inspect, and I'm going to select over here. You can see there is no table anywhere. We just have all these divs. Now, what I want you to see is next to this div, we have over here "grid." We also have this other word "flex." So, this layout is being achieved with the power of CSS, specifically CSS Grid and CSS Flexbox, something we're going to be spending a lot of time on in the CSS section.

I now want to compare this to a much older website. This is the OG Berkshire Hathaway website, which we've looked at previously in this course. This web page is HTML only; it's got no CSS or JavaScript. Let's open up the dev tools, and you'll see straight away the `table` elements. We've got the `tbody` tags, `table` rows, and `table` data. Now, on modern web applications, you just wouldn't do this. Using a table to create these two columns, you'd use CSS Grid or Flexbox, like we saw on the previous web page. Anyways, the point of this was just to show you that tables did once have a more prominent role in creating layouts, but this isn't the case anymore.

So, let's summarize this chapter and start to build out the summary card for this topic, Scientific HTML. Now, in all honesty, "scientific HTML" isn't really a thing. I've just given this topic the title "scientific" because we're going to be talking about elements that are related to data and science. We looked at the `table`. First, there was the main `table` element, which acted like a wrapper for all the other table elements. We then saw three structural units: the `table head`, the `table body`, and the `table foot` tag. We saw that anytime we had a row, we had to explicitly define this with the `table row` tag, even if there was only one row, like we had in our `table head`. In the body, you typically have multiple rows, and in the footer, you'd also typically have one row. We then saw we had to individually define each cell. For cells inside the `table head`, we use the `th` tags, and for cells everywhere else, we use the `td` tags. We also saw how `td`s can span horizontally with `colspan` and vertically with `rowspan`.

Next, we'll explore how to represent specialized content with the use of scientific elements. We'll be talking about a brief history of HTML, superscript and subscript, and figure and figcaption.

So, let's start off with a brief history of HTML. HTML was initially developed to help scientists share their work. This is a screenshot of the first ever website created by scientist Tim Berners-Lee at CERN, which is one of the world's largest and most respected centers for scientific research. The goal of creating HTML was to allow scientists to present their papers and other scientific-related documents in web format, making them more easily sharable within the scientific community. Because of this origin, HTML includes a group of tags that allow scientists to effectively publish their work.

Here is an example of a scientific document. Now, I have struggled to find early HTML documents used for sharing scientific work, so these images are screenshots of my thesis. I did in my structural engineering degree. It was about the design of a bridge that could float during flood times. This was my first taste of outsourcing on freelancer marketplaces like Upwork, and I remember I got these sick renderings done for like $30. Anyways, a lot of research papers have specific elements like figures, which contains an image, and figure text, where you have some kind of scientific image and short text description below. And then you have other content like equation elements.

The first scientific element we will look at is superscript and subscript. This is a Wikipedia article on potassium. For any of you who have seen the Borat movie, you will know potassium is Kazakhstan's number one export. This fact is mentioned in his made-up national anthem for Kazakhstan. One of the funniest things I have ever seen was when at a shooting competition in Kuwait, an athlete from Kazakhstan won gold, and during the medal ceremony, they played Borat's fake national anthem instead of the real one. Check it out.

[Music]

Greatest country in the world! All of the countries are my number one!

[Music]

The next time you buy a potassium, make sure it's from Kazakhstan.

All right, back to HTML. In the Wikipedia article, you can see over here is the number eight. It's appearing above and to the right of the word "knife." This is superscript. To define superscript, we use the `sup` tags, which stands for superscript. Superscript text appears half a character above the normal line and is sometimes rendered in smaller font.

Let's now talk about subscript. Over here, we can see this letter "R," which is appearing to the right and below the "A." This is subscript. We use the `sub` tags to define subscript. Subscript text appears half a character below the normal line and is also sometimes rendered in smaller font.

Let's go check out this page with Dev tools. I'm now on the potassium Wikipedia page. I'm going to right-click, inspect to open the dev tools. I'm going to grab the inspector element and click on the number eight, and you can see it's in the `sup` tags. The `sup` tags are in fact nesting an anchor tag because the number eight is clickable, which will take you to a reference at the bottom of the page. Scrolling down, let's go inspect this symbol over here. You can see we have the `sub` tags, which is wrapping the letter "R."

The next scientific element we'll look at is `figure` and `figcaption`. Over here, we can see an image of potassium and the description below it, known as a figure caption. The image and figure caption make up a figure. The `figcaption` element is used for the description of the figure. You can see here the description is "pieces of potassium metal." Above the `figcaption`, we have an image of potassium, so we'd use the `img` element. The image and `figcaption` are then wrapped by the `figure` tags, and this gives us the complete `figure` element.

Let's go check this out in Dev tools. So, I've scrolled down the page and I'm by the figure. I'm going to click the inspector tool and click on the image, and you can see we have our `figure` here, which is made up of the `img` and `figcaption`. Now, we can sometimes encounter the `figure` element being used not just in scientific contexts. I'm on the Notion homepage. In the testimonial section, you can see in this card over here, we have a person's image and surrounding text of their name, handle, and the testimonial itself. If I right-click and inspect to open Dev tools, use the inspector tool to click on the person, you'll see we have the image, which is wrapped by a `figure`, and the person's name and handle is wrapped inside a `figcaption`. Now, I wouldn't say this is overly common, but I did just want to show you that it is possible to do this.

I'm now on the Ikea page, and this catalog could be a great candidate for the `figure` and `figcaption`. If I right-click and open up Dev tools, I'll click on the image of the sofa, and you'll see a `figure` is not being used, just divs, images, and plain old text with the `h3` over here. So, it's not super common to use `figure` and `figcaption`, but occasionally you might find it being used, so I just wanted to highlight that.

So, let's finish off the summary card for this topic, Scientific HTML. We looked at scientific elements. We first looked at `sup` and `sub`. Superscript text appears half a character above the normal line. In this example, the "2-" is in superscript. Subscript text appears half a character below the normal line. In this example, the number "4" is in subscript. We then looked at the `figure` and `figcaption` tags. The `figure` tag is the main wrapper element, which contains the figure elements. It can contain an image and a `figcaption` tag, which is used to describe the image.

Congratulations! You've made it to the end and now have a solid foundation in HTML needed to work on professional projects. The next step is to learn CSS, which is responsible for visual styling and layout, and convert plain HTML content into beautifully designed web pages. You can join my CSS full course for free on YouTube, where you'll experience the same high-quality teaching and continue to work on the same project, where we'll go from this to this with the power of CSS. Also, make sure to subscribe to the channel to stay in the loop with new releases. And if you are serious about learning full stack web development and interested in joining my boot camp, make sure to head over to futurefullstack.com. See you in the next video.