Developer Tools

Developer tools in web browsers are a set of built-in tools that allow developers to inspect and debug HTML, CSS, and JavaScript code. These tools are accessible by pressing F12 or right-clicking on a webpage and selecting "Inspect".

For instance, let's examine the google.com web page. By pressing F12, we can access the following view:

On the left side, we have Elements tab. It shows the HTML document structure. If we click on any element, we get styles of this element on the right side Styles tab. If we hover over any element, it will be highlighted on the web page which a user sees.

To observe its functionality, kindly view the short recording provided below:

Apart from element inspection, developer tools allow us to modify HTML and CSS code. Any changes made will be instantly reflected in the webpage but not permanently saved in the source code. This functionality is helpful for testing and experimenting with markup and styles.

Code Style

Code style in HTML pertains to the established principles and guidelines for structuring and formatting HTML code to improve readability, maintainability, and uniformity. Although HTML does not enforce rigid code style rules, adhering to consistent practices can significantly enhance code comprehension and facilitate development tasks. By employing standardized conventions, developers can ensure that their HTML code is easier to comprehend and work with.

Note

If you are interested in code styling best practices, it is recommended to visit the following source: Code Guide by @mdo.