Explanation of content.
Tags can be nested as demonstrated in the navigation snippet below.
<!DOCTYPE html>
<html>
<head>
<title>Web development course</title>
</head>
<body>
<header>
<!-- header element documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header -->
<nav id="main-navigation">
<!-- nav element documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav -->
<ul>
<!-- ul element documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul -->
<li><a href="/web">Introduction to the web</a></li>
<!-- li element documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li -->
<li><a href="/html">Learn HTML</a></li>
</ul>
</nav>
</header>
</body>
</html>
Keeping your HTML well indented so that every tag and "level" of nesting is aligned will make your code easier to read and maintain. Its aesthetics, how it looks, is conveying its structure.
HTML attributes represent metadata about the containing element. The attributes can be used to identity, classify, style or modify the default behavior of the element.
<element attribute_name=attribute_value another_attribute_name=another_attribute_value></element>
A very common use case for HTML attributes is element identification (id
attribute) and/or classification (class
attribute). The id
attribute is
used to uniquely identify an element within the whole document. The class
attribute is used to group together similar elements.
Both <id>
and <class>
attributes are often used for styling purposes since they allows us to find a specific element or style similar elements with a single style declaration.
<p id='main_paragraph'>This element can be uniquely identified using the 'main_paragraph' id HTML attribute</p>
<p class='other_paragraphs'>This element belongs to a group of elements who share the 'other_paragraphs' HTML class attribute</p>
<p class='other_paragraphs'>This element also belongs to a group of elements who share the 'other_paragraphs' HTML class attribute</p>