Get DevWP - WordPress Development Theme

HTML Formatting & Semantics

In this tutorial you will learn how to format your content in your HTML document with HTML tags.

Formatting HTML is accomplished by using HTML tags that provide the context for your content. You will also often hear about HTML semantics which provide a particular meaning to your content. This is important because search engines like Google and accessibility devices will better understand your content when it’s properly formatted and semantic.

There are various pieces to your content that will require formatting. For this tutorial I will cover how to semantically format your text, images and videos.

HTML Text

Text is the most important piece of content on your webpage. People visit websites typically to read information and search engines scan webpages to understand the context of that page. This is why properly formatting your text is extremely important.
HTML provides elements that will help you format your text in a way that makes sense to your website visitor and the search engines.

HTML headings

There are six levels of headings and HTML. Each level provides a different meaning to the browser and will often be displayed in different sizes with the heading one being the largest and headings six being the smallest.
You should not use HTML heading tags for the purpose of making text large on the webpage. The reason for this is each level of heading tags has a different level of importance to your HTML document and the search engine. Increasing the font size is what you would use CSS for.


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Output from the code above:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

HTML Paragraphs

This a similar element is the container for the paragraphs in your content and it provides a very basic default style that rendered by the browser. Sometimes there will be a need to bring attention to a specific word or sentence within a paragraph and there are HTML elements for that as well.


<p>This is the first paragraph in the article.</p>
<p>This is the second paragraph in the article</p>

HTML Strong and B tags

These two tags rendered text in a bold typeface by default. The difference between the strong tag and the B tag is that the strong tag indicates to the browser and accessibility devices that the content in between the strong tags is important. The B tag is really only used to get the attention of the reader and doesn’t convey any special meaning.


<p><strong>This is Strong!</strong> Looks just like Bold Text but more semantic.</p>
<p>Make sure to bookmark <b>This Website</b> and visit often.</p>

Output from the code above:

This is Strong! Looks just like Bold Text but more semantic.

Make sure to bookmark This Website and visit often.


HTML EM and I Tags

Both the em and I tags lender text in italic. The difference between both tags is that the em tag tells the browser and accessibility devices that the text should be emphasized or stressed. The I tag on the other hand is used just to italicize normal text for reading purposes.


<p>Learning to Code is <em>Awesome</em>.</p>
<p>The <i>Language</i> you choose should be dependent on your overall goals.</p>

Output from the code above:

Learning to Code is Awesome.

The Language you choose should be dependent on your overall goals.


HTML lists

You also have HTML tags for ordered list, unordered list and description lists. These are used to create list items for your content.


<ul>
  <li><strong>HTML </strong>- Hyper Text Markup Language</li>
  <li><strong>CSS </strong>- Cascading Style Sheets</li>
  <li><strong>JavaScript </strong>- Adds dynamic functionality to the front end of a website but can be used on the server as well using NodeJS</li>
  <li><strong>PHP </strong>- Is a server side programming language</li>
  <li><strong>MySQL </strong>- Is a Relational Database Management System</li>
  <li><strong>Linux </strong>- The most widely used operating system for websites</li>
</ul>

Output from the code above:

  • HTML – Hyper Text Markup Language
  • CSS – Cascading Style Sheets
  • JavaScript – Adds dynamic functionality to the front end of a website but can be used on the server as well using NodeJS
  • PHP – Is a server side programming language
  • MySQL – Is a Relational Database Management System
  • Linux – The most widely used operating system for websites

HTML line breaks

You can force a line break in your paragraph by using the BR tag.


<p>Here is a <br>line break using the br tag.</p>

Output from the code above:

Here is a
line break using the br tag.


HTML Thematic break

You can use an HR tag to create some separation in your content.


<p>Topic One </p>
<hr>
<p>Topic Two</p>

Output from the code above:

Topic One


Topic Two


Formatting quotes

You can format your quotes with either the HTML block quote tag or the Q tag.


<blockquote>
    <p>Code Is Poetry</p>
    <cite>— WordPress</cite>
</blockquote>

<p>According to the Bureau of Labor Statistics (BLS): <q>The Median Pay for a web developer is $69,430 per year.</q></p>

Output from the code above:

Code Is Poetry

— WordPress

According to the Bureau of Labor Statistics (BLS): The Median Pay for a web developer is $69,430 per year.


HTML address tag

HTML provides a special tag called address which is used to display your contact information.


<address>
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>

Output from the code above:

Mozilla Foundation
331 E. Evelyn Avenue
Mountain View, CA 94041, USA


View Our Themes