From the course: HTML, CSS, and JavaScript: Building the Web
Document organization
From the course: HTML, CSS, and JavaScript: Building the Web
Document organization
- [Instructor] In this lesson, we'll add some key elements to our document and discuss document organization. First, inside the head section, we'll add a meta tag. Metadata provides information about the document, such as its author, description, and keywords. This information is used by search engines and browsers to better understand and display our content. One thing I want to point out here about the meta tag is that it's a a little bit unlike the other tags here. Notice that the html tag has a closing tag. The h1 tag also has a closing tag, but what's going on with the meta tag? This meta tag here is a special type of tag in html. We call it a self-closing tag, and all it means is that it's a tag that does not need to be closed manually by its closing tag, which mean it does not have a separate closing tag. You'll see this quite often in front-end web development, specifically working with html pages, and we'll see some more examples of these as we move along. Next, let's link some external resources to our document. We'll add a link tag to our style sheet. This allows us to style our webpage with custom CSS. Notice that it's also a self-closing tag. Now, we'll add a script tag to our JavaScript file. We've just added a script tag to link our JavaScript file. We'll cover the specifics of these tags and their attributes in future lessons, but for now, we won't go into CSS or JavaScript, but we want to set up our page to be able to move on to the next step once we get there. Now, let's organize our content by creating a main container. Inside the body section, we'll add a div element. This div will act as a container that wraps all of our content. Using div elements to group content is a common practice in html. It helps us organize the page structure and apply styles more effectively. Let's further organize our content by adding another container for plant images. Inside the main div, we'll add another div element. This will serve as a placeholder for our plant images. Grouping elements using div allows us to maintain and style similar elements together, making our html more organized and easier to maintain. And now, we've added the basic structure and elements for our virtual terrarium. In the next lesson, we'll explore attributes and how they provide additional information about html elements.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
