DEV Community

wasifali
wasifali

Posted on • Updated on

Semantic elements, Semantic elements in HTML, HTML style guide and declaring document types

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:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

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 element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.

Example

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

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:

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

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

<BODY>
<P>This is a paragraph.</P>
</BODY>
Enter fullscreen mode Exit fullscreen mode

Good

<body>
<p>This is a paragraph.</p>
</body>
Enter fullscreen mode Exit fullscreen mode

Close All HTML Elements

In HTML, you do not have to close all elements (for example the <p> element).

Example

Good

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>
Enter fullscreen mode Exit fullscreen mode

Bad

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>
Enter fullscreen mode Exit fullscreen mode

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

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Enter fullscreen mode Exit fullscreen mode

Bad

<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Enter fullscreen mode Exit fullscreen mode

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

<table class="striped">
Enter fullscreen mode Exit fullscreen mode

Bad

<table class=striped>
Enter fullscreen mode Exit fullscreen mode

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

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Enter fullscreen mode Exit fullscreen mode

Bad

<img src="html5.gif">
Enter fullscreen mode Exit fullscreen mode

Spaces and Equal Signs

HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

Example

Good

<link rel="stylesheet" href="styles.css">
Enter fullscreen mode Exit fullscreen mode

Bad

<link rel = "stylesheet" href = "styles.css">
Enter fullscreen mode Exit fullscreen mode

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

<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>

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
zubairmohsin33 profile image
Zubair Mohsin • Edited

Good work.

Please use three backticks and then the name of language which will be html in this case in the beginning of code blocks to get syntax highlighting like below:


<h2>Tokyo</h2>

Enter fullscreen mode Exit fullscreen mode
Collapse
 
wasifali profile image
wasifali

Ok