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,
|<h1></h1> to <h2></h2>||represents headings level|
|<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|
|<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|
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.
- Structural Markup
- 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 are basically Structural Markup that highlight the main large sized text. Headings are of six levels i.e;
Anything inside <p> and </p> tags defines a Paragraph. By default, each paragraph has a line break and some sort of spacing or indentation.
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.
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.
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>.
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>.
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”.
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.
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/>.
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.
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.
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.
To write shorter quotes with quotation marks around the text, you can use <q></q> tags.
To display some abbreviation or acronym, use <abbr></abbr> tag. This can use title attribute to show the full form of the specified abbreviation.
To give citation to someones’ book, research paper or film, you can use <cite></cite> tag to reference to that specific citation.
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.
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.
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.
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.
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.