HTML LEARNING PATH
2.3 Why Do We Use Structural Elements
WHY
Most websites need a common structural pattern consisting of a header, navigation, main content and footer. This structural pattern of elements have meaningful tags known as semantic tags. Semantic tags do not inherently have any visual influence on the content on the page but rather the order on the webpage.
HOW
Semantic elements such as the <section> tag, clearly defines sections in a document, such as headers, footers, or any other sections of the document. Most browsers will display semantic tags with default meaning. Similarly, the <header> element is used to define the header content of a site. The <nav> defines the navigation menu. The footer <footer> tag contains the content for the footer section at the bottom of a webpage. In addition, semantic attributes can be added to other HTML tags such as the DIV <div> tag to give the content specific meaning. HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.
CODE\/IMAGE:
<!DOCTYPE html>
<html>
<head>
<head>
<title>My First Website!</title>
<meta charset="UTF-8">
</head>
<section>
<h1>This is the heading</h1>
<p>This is the paragraph content</p>
</section>
</body>
</html>
GLOSSARY
Semantic html defines the meaningful order of elements in a web page.
TIPS AND RESOURCES
PRACTICE
Edit your webpage and add the following <section> code to the following.
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
<meta charset="UTF-8">
</head>
<body>
<section>
<h1>This is the heading</h1>
<p>This is the paragraph content</p>
</section>
</body>
</html>