Congratulations! Now we have covered everything you need to know about HTML and CSS. By now, you should have the skills to design and develop a responsive static webpage using these technologies.
In this lesson, we will delve into the best practices of writing HTML and CSS code to ensure that your webpage designs are efficient, maintainable, and adhering to industry standards.
1. Use semantic HTML tags
When creating an HTML document, you should always use semantic tags whenever you can. Meaning you should use <header> to define the header, <main> for the main content, <side> for the sidebar, <footer> for the footer, and so on.
1<!doctype html>
2<html>
3 <head>
4 <title>Use semantic tags</title>
5 </head>
6 <body>
7 <header>
8 <nav>. . .</nav>
9 </header>
10
11 <main>
12 <p>Lorem ipsum dolor . . .</p>
13 </main>
14
15 <footer>
16 <p>© 2023 My Website. All rights reserved.</p>
17 </footer>
18 </body>
19</html>These elements provide more descriptive names for different sections of your webpage, making it easier for you, the browser, and the search engine to understand the structure and purpose of the content.
Some developers have a habit of using class names to represent the purpose of the element like this:
1<!doctype html>
2<html>
3 <head>
4 <title>Use div and class</title>
5 </head>
6 <body>
7 <div class="header">
8 <div class="nav">. . .</div>
9 </div>
10
11 <div class="main">
12 <p>Lorem ipsum dolor . . .</p>
13 </div>
14
15 <div class="footer">
16 <p>© 2023 My Website. All rights reserved.</p>
17 </div>
18 </body>
19</html>There is nothing wrong with this technique, but since the class naming is very flexible, the browser and search engine won't be able to understand them.