HTML and CSS Reference
In-Depth Information
To make sure that your new
<div>
element is, in fact, showing up correctly, you can use your browser's developer
tools.
1.
Open the
index.html
file in the web browser that has the developer tools you like to use. (If you don't
have a favorite, I recommend Chrome.)
2.
Now open your developer tools. You may find it easier to right-click on the page and select Inspect Element
from the context menu (if this option is provided by your developer tools).
3.
Make sure that you are viewing the tab that displays the page elements. This will be named Elements,
HTML, or Documents, depending on which browser you are using.
4.
In the main window of your developer tools, you should see a list of the HTML elements in your page, in-
dented to match your page's structure (as shown in Figure 2-4). If your
<div>
is displayed here, everything
is fine. If it isn't, you need to go back and check your code against what is in this topic.
5.
Close your developer tools.
Figure 2-4
Inspecting your page elements using the Chrome developer tools.
