Web Design Course – Part 5 – HTML Text Elements

Howdy readers,

In this article, you will learn about the basic HTML Text Elements. There will be few small HTML code snippets in this post which will help you. The entire focus of this article is to get you familiar with the basic HTML elements i.e; related to “Text” that we write on websites.

Before proceeding further, just have a look at this small table,

TAG DESCRIPTION
 <h1></h1> to <h2></h2>  represents headings level
<p></p> represents paragraphs
<b></b> represents bold text
<i></i> represents italicized text
<sup></sup> represents character or word half the length above any word
<sub></sub> represents character or word half the length below any word
<br/> represents a line break
<hr/> represents horizontal block level line
<strong></strong> represents text with bold font-weight
<em></em> represents emphasized text
<blockquote></blockquote> represents lengthy quotes
<q></q> represents shorter quotes
<abbr></abbr> represents abbreviation
<cite></cite> represents citation
<dfn></dfn> represents definition of terms
<address></address> represents address of author or organization
<ins></ins> represents new inserted content
<del></del> represents deleted content
<s></s> represents something that is updated and not needed but needs to be displayed

Lets start!

When we write anything on websites or when we design web pages, we need to have clear idea of how we are going to structure the content. For that purpose, we mostly use the structured layout of Headings and Paragraphs. We also use some tags that help us know the value of the Text more clearly i.e; we often use Bold, Italic or Emphasis tags and properties. These tags actually define the text more clearly and viewer of your website will get a quick insight of few important things just by looking at headings and bold text literally.

We can categorize the two types of markup.

  1. Structural Markup
  2. Semantic Markup

1. STRUCTURAL MARKUP:

The structure that we create using Headings and Paragraphs are called “Structural Markup”

2. SEMANTIC MARKUP:

All other markup that provides some additional information about headings and paragraphs are called “Semantic Markup” i.e; where to show emphasis in sentence, where to show bold letters, where we have written quotations or the meaning of acronyms, and so on.

Basically, we use Structural and Semantic Markup to help us write our content more efficiently and more understandable.

HEADINGS:

Headings are basically Structural Markup that highlight the main large sized text. Headings are of six levels i.e;

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

PARAGRAPHS:

Anything inside <p> and </p> tags defines a Paragraph. By default, each paragraph has a line break and some sort of spacing or indentation.

BOLD:

To make any character or word appear bold, enclose that in the <b> and </b> tags. It just applies boldness and there will be no change in the structure of paragraph.

ITALIC:

To make any character or word appear italic, enclose that in the <i> and </i> tags. Special text that is said in different way can be italicized to give it a different visual feel for viewers.

SUPERSCRIPT:

To show any character or word half the length above any word, enclose the word in <sup> and </sup> tags. Example: We need to write “4th”, and we want to show “th” above the half length of the “4”. We will achieve this by writing it in a Markup like this, 4<sup>th</sup>.

SUBSCRIPT:

To show any character or word half the length below any word, enclose the word in <sub> and </sub> tags. Example: We need to write “CO2”, and we want to show “2” below the half length of the “CO”. We will achieve this by writing it in a Markup like this, CO<sub>2</sub>.

WHITE-SPACE:

Web Developer/Designer use White Spaces to make the Code readable and easier to understand and edit later. This extra white spacing in code doesn’t effect the actual layout of the website’s content. When browser reads one or more extra spaces in a sequence, it only interprets one space. Similar is the case with the line break. If it comes across the line break in code, it reads it a single space too. This is known as “White Space Collapsing”.

LINE BREAKS:

Most of the time there is a need to start a new line while writing the content for websites. The tag that can help us to start a new line is written as <br/> i.e; Line Break Tag. By default if you write the text in paragraphs using <p></p> tags, then browser will automatically put it on a new line. <br/> therefore, can be used to break lines in the middle of the paragraph.

HORIZONTAL RULES:

To give spacing or separation between the sections of web page, you can use <hr/> tag. This will give a dim greyed line right after the content where you put the <hr/>.

STRONG:

To give importance to any content placed on the web page, you can use <strong></strong> tag. The content placed in between these tags will automatically be bold on the web page.

EMPHASIS:

To give extra focus on the word, you can use <em></em> tag which basically means Emphasis. The content placed in between these tags will automatically be italic on the web page.

BLOCKQUOTE:

To put long quotations which refers to some web page link or someones’ book, you can use <blockquote></blockquote> tag. You can use this tag specifically when writing a long quotations. The content placed inside will be indented by the browser.

Q:

To write shorter quotes with quotation marks around the text, you can use <q></q> tags.

ABBR:

To display some abbreviation or acronym, use <abbr></abbr> tag. This can use title attribute to show the full form of the specified abbreviation.

CITE:

To give citation to someones’ book, research paper or film, you can use <cite></cite> tag to reference to that specific citation.

DFN:

While writing content for the web page, if you come across some new term that needs to be defined, you can use <dfn></dfn> tag. This means that you are defining that new terminology.

ADDRESS:

To give author details on the web page, you can use <address></address> tag. This contact details may be some physical address, phone number, email etc.

INS:

To show the visitors of website some new content on the web page, you can use <ins></ins> tag. This will automatically put underline for the text that has been written inside this tag. It is used generally for prices in online stores.

DEL:

To show the deleted content on the web page, you can use <del></del> tag. This will put the line through on the word that has been deleted.

S:

There are a lot of content on the web page and sometimes there is something that we have written needs to be corrected due to its authenticity and validity. If the text is no more accurate and you’ve used it on the web page, you can use <s></s> tag to indicate that the information is no more accurate. This way you can keep your visitors aware of the fact that you are doing research and updating content on the website.

 

9 thoughts on “Web Design Course – Part 5 – HTML Text Elements

  • Pingback:Web Design Course – Part 8 – Using Images In HTML

  • Pingback:WOW Blog

  • July 12, 2019 at 3:18 am
    Permalink

    This is my first time go to see at here and i am actually pleassant to read all at one place.

    Reply
  • July 20, 2019 at 7:22 am
    Permalink

    This post gives clear idea in support of
    the new people of blogging, that really how to do running a blog.

    Reply
  • July 27, 2019 at 4:07 am
    Permalink

    I am in fact glad to glance at this webpage posts which carries tons of
    useful data, thanks for providing such data.

    Reply
  • August 22, 2019 at 10:04 pm
    Permalink

    I’m not sure where you’re getting your information, but
    good topic. I needs to spend some time learning more or understanding more.
    Thanks for great info I was looking for this info for
    my mission.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *