Semantic elements, Semantic elements in HTML, HTML style guide and declaring document types
wasifali
Posted on June 13, 2024
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>
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>
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>
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>
Good
<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
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Bad
<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
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Bad
<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
<table class="striped">
Bad
<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
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Bad
<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
<link rel="stylesheet" href="styles.css">
Bad
<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
<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>
Posted on June 13, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.