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.
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.
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.
So, in this section, you learned about HTML and tags and elements.
In next section, you will learn about basic tags of HTML.