Semantic elements, Semantic elements in HTML, HTML style guide and declaring document types
Tags: webdev, css, learning, html
Published: 2024-06-13 09:58:29

## **What are Semantic Elements?**
A semantic element clearly describes its meaning to both the browser and the developer.
## **Examples of non-semantic elements**
 `<div>` and `<span> `- Tells nothing about its content.
## **Examples of semantic elements**
 `<form>`, `<table>`, and `<article>`
## **Semantic Elements in HTML**
Many web sites contain HTML code like:` <div id="nav">` `<div class="header">` `<div id="footer">` to indicate navigation, header, and footer.
In HTML there are some semantic elements that can be used to define different parts of a web page
`<article>`
`<aside>`
`<details>`
`<figcaption>`
`<figure>`
`<footer>`
`<header>`
`<main>`
`<mark>`
`<nav>`
`<section>`
`<summary>`
`<time>`
## **HTML `<section>` Element**
The `<section>` element defines a section in a document.
a `<section>` element can be used:
Chapters
Introduction
News items
Contact information
## **HTML `<article>` Element**
The `<article>` element specifies independent, self-contained content.
the `<article> `element can be used:
Forum posts
Blog posts
User comments
Product cards
Newspaper articles
## **Nesting `<article>` in `<section>` or Vice Versa**
The `<article>` element specifies independent, self-contained content.
The `<section>` element defines section in a document.
## **HTML `<header>` Element**
The `<header>` element represents a container for introductory content or a set of navigational links.
A `<header>` element typically contains:
one or more heading elements (`<h1>` - `<h6>`)
logo or icon
authorship information
## **HTML `<footer>` Element**
The `<footer>` element defines a footer for a document or section.
A `<footer>` element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
## **HTML `<nav>` Element**
The `<nav>` element defines a set of navigation links.
## **Example**
A set of navigation links:
```HTML
<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>
```
## **HTML `<aside>` Element**
The `<aside>` element defines some content aside from the content it is placed in (like a sidebar).
The `<aside>` content should be indirectly related to the surrounding content.
## **HTML `<figure>` and `<figcaption>` Elements**
The `<figure>` tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The `<figcaption>` tag defines a caption for a <figure> element. The `<figcaption>` element can be placed as the first or as the last child of a `<figure>` element.
## **Example**
```HTML
<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
```
## **HTML Style Guide**
A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.
## **Always Declare Document Type**
Always declare the document type as the first line in your document.
The correct document type for HTML is:
```HTML
<!DOCTYPE html>
```
## **Use Lowercase Element Names**
HTML allows mixing uppercase and lowercase letters in element names.
Mixing uppercase and lowercase names looks bad
Developers normally use lowercase names
Lowercase looks cleaner
Lowercase is easier to write
## **Example**
## **Bad**
```HTML
<BODY>
<P>This is a paragraph.</P>
</BODY>
```
## **Good**
```HTML
<body>
<p>This is a paragraph.</p>
</body>
```
## **Close All HTML Elements**
In HTML, you do not have to close all elements (for example the `<p>` element).
## **Example**
## **Good**
```HTML
<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>
```
## **Bad**
```HTML
<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>
```
## **Use Lowercase Attribute Names**
HTML allows mixing uppercase and lowercase letters in attribute names.
However, we recommend using lowercase attribute names, because:
Mixing uppercase and lowercase names looks bad
Developers normally use lowercase names
Lowercase looks cleaner
Lowercase is easier to write
## **Example**
## **Good**
```HTML
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
```
## **Bad**
```HTML
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
```
## **Always Quote Attribute Values**
HTML allows attribute values without quotes.
However, we recommend quoting attribute values, because:
Developers normally quote attribute values
Quoted values are easier to read
You MUST use quotes if the value contains spaces
## **Example**
## **Good**
```HTML
<table class="striped">
```
## **Bad**
```HTML
<table class=striped>
```
## **Always Specify alt, width, and height for Images**
Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.
Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image
## **Example**
## **Good**
```HTML
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
```
## **Bad**
```HTML
<img src="html5.gif">
```
## **Spaces and Equal Signs**
HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.
## **Example**
## **Good**
```HTML
<link rel="stylesheet" href="styles.css">
```
## **Bad**
```HTML
<link rel = "stylesheet" href = "styles.css">
```
## **Blank Lines and Indentation**
Do not add blank lines, spaces, or indentations without a reason.
For readability, add blank lines to separate large or logical code blocks.
For readability, add two spaces of indentation. Do not use the tab key.

## **Example**
```HTML
<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>

<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>

<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>

</body>

```