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.

 

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

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

  • Pingback: WOW Blog

  • July 3, 2019 at 6:39 am
    Permalink

    I was curious if you ever thought of changing the page layout
    of your blog? Its very well written; I love what youve
    got to say. But maybe you could a little more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having 1 or two images.
    Maybe you could space it out better?

    Reply
  • July 6, 2019 at 7:55 am
    Permalink

    Heya! I’m at work surfing around your blog from my new iphone!
    Just wanted to say I love reading your blog and look forward to all your
    posts! Carry on the great work!

    Reply
  • 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
  • November 5, 2019 at 3:21 pm
    Permalink

    Great blog here! Also your site loads up very fast! What web host are you using?
    Can I get your affiliate link to your host?
    I wish my site loaded up as fast as yours lol

    Reply
  • November 16, 2019 at 2:26 pm
    Permalink

    As the admin of this web page is working,
    no uncertainty very quickly it will be renowned, due to its
    feature contents.

    Reply
  • December 2, 2019 at 8:48 pm
    Permalink

    Hey there! I understand this is somewhat off-topic but I
    needed to ask. Does operating a well-established blog like yours take
    a large amount of work? I am brand new to running a blog however I do write in my diary on a daily basis.
    I’d like to start a blog so I can share my own experience and views online.
    Please let me know if you have any suggestions or tips for new aspiring bloggers.
    Appreciate it!

    Reply
    • December 3, 2019 at 9:06 am
      Permalink

      Hi,
      I would say you need to stay consistent and passionate about your blog if you are thinking about having one. It takes time and a huge amount of work but that you need for any kind of work online.
      If you already write in your diary, then you must have a good amount of content, I would suggest you start your blog right now because now is the best time.
      Looking forward to seeing your blog, leave your comments if you have more queries.

      Reply
  • December 8, 2019 at 4:34 am
    Permalink

    Hi there to every body, it’s my first pay a visit of
    this weblog; this blog contains awesome and really excellent information for readers.

    Reply

Leave a Reply

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