Creating Page Components with the Div Tag
This guide examines one of the tools that you will use constantly when working with HTML projects: the <div> tag. In this material you will learn how to structure a site and organize page components using the div tag syntax.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
  • Complete the Exercise
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this section, we will explore the <body> tag. All the content shown on the web page is located within this tag. Below is an example of some content: 

<body>
 <h1>Hi there again</h1>

 My content goes here
</body>

We will begin with the heading tag, but will not return to it until a later section.

When you start typing your content, it gets displayed on your browser with no problem, until it comes to styling it. Looking at the above content, you may question how you can include bold, italics, and color changes.

For styling it necessary to separate the content of your <body. tag into different compartments. Once separated, they can be organized within a specific style's compartment as well as contain a better organizational structure.

Though there are many routes to achieving these results, one of the most popular options is to compartmentalize using <div> tags. For this course, no content will be placed directly into the body tag instead, <div> tags are used extensively throughout each section.

<div> stands for "divider", and must have both an opening and closing tag as so: <div> content </div>

Content can now be placed within the <div> tag. It is usual practice to put the opening and closing tags on different lines, and the content in between, such as below:

<body>
  <h1>Hi there again</h1>

  <div>
    My content goes here
  </div>
</body>

This practice is preferred because most times, <div> tags tend to have various nested elements, classes, and stylesheets associated with them. This pattern makes for easy readability. Also, there is no limit to the quantity of <div> tags you can include, and more is preferred over not enough.

The next element to learn is nested <div> tags. In general, it's difficult to recognize a single <div> tag in the mass of content all within the same set of tags. While creating, you may need to place an element in a different part of the page, so having <div> tags nested inside of other <div> tags becomes extremely useful.

Below is an example of two lines of content with the same div.

large

Though there are two sentences on two different lines, they are displayed on the same line on the browser. This is a result of HTML not recognizing end of line and newline characters. If you desire to have them on two separate lines, you'll have to use nested <div> tags, such as below:

large

In short, <div> tags are one of the most important and most frequently used tags in coding. It's an exceptional way to organize your structure and compartmentalize different elements. Also, it is the best choice when you need content on different lines. Lastly, its not abnormal to have <div> tags nested inside other <div> tags, but rather common and recommended.