Developer tools in the browser

The browser provides developer tools to check, how our HTML page is rendered.
Developer tools provide more than just showing HTML rendering.
Most of the browser, when you press F12, it will open developer tools except safari.


To open developer tools in chrome, press F12 or right click on the webpage and select inspect. If you are in Mac, press Cmd + Opt + J.

Chrome Elements Panel
Chrome Elements Panel


Enable developer tools in Safari
Enable developer tools in Safari

To open developer tools in Safari, you need to enable the developer tools first.
To do that, open Preferences -> Advanced. Enable "Show Develop menu in Menubar".
Now Cmd + Opt + C can toggle the developer tools.

Elements Panel

When you open developer tools, there will be Elements or Inspector panel. Click on it. It will show your entire page like below.
When you mouse over any element, it will show the respective element highlighted in the browser window as well. That is how you will come to know, how the element has been rendered.

Hover on Element
Hover on Element


So, in this section, you learned about HTML and tags and elements.
In next section, you will learn about basic tags of HTML.