HTML Basics – Basic Formatting Elements

0
196

Formatting Text

  1. Inline Elements – elements that are used to format some words, single word or even a single character in a sentence on a webpage.
  2. Block-level Elements – these elements insert line breaks while rendering content of those elements.

Inline Elements are further categorized as

  1. Physical Inline Elements – These elements explicitly describe exactly how the text is to be formatted. E.g. <i>, <b> and etc.

Logical Inline Elements – These elements implicitly describe the test according to its meaning, it is up to browser how to display that text. E.g. <em>, <strong> and etc.

  1. Heading tags:- HTML headings are titles or subtitles that you want to display on a webpage.  <h1>, <h2>, <h3>, <h4>, <h5> and <h6>

The above heading tags are used for text heading e.g. we are going to write an article on HTML Basics so best practice us to use heading tag as shown below for our article, default behaviour of all these heading tags differ in their font size h1 tag has the largest font while h6 is smallest.

<h1>HTML Basics</h1>

Search engines use the headings to index the structure and content of your web pages. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Attributes – These are extra information of the tag which change the behaviour of the tag. E.g. ‘align’ is the attribute which specify the text alignment, below is the code example of heading tag with align attribute.

<h2 align=”center”>This text will be centered aligned</h2>

Paragraph Tag – <p> A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph. E.g. 

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HR tag – Horizontal rule tag – <hr /> or <hr>, it is an empty tag, which means that it  has no end tag.

E.g. <p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>

BR Tag – Line Breaks tag – <br>, use <br> tag in paragraph <p> tag to start a new line without starting a new paragraph tag.

E.g. <p>This is<br>a paragraph<br>with line breaks.</p>

Preformatted Tag – <pre>, this tag is use to solve the poem problem. The text inside a <pre> element is displayed in a fixed-width font (usually Courier font), and it preserves both spaces as well as line breaks, here is an example

<pre>  

My Bonnie lies over the ocean.

   My Bonnie lies over the sea.

My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.

</pre>

Text Formatting Elements

Formatting elements in HTML are used to display specially formatted text.

  • <b> – Bold text
  • <strong> – Important text
  • <i> – Italic text
  • <em> – Emphasized text
  • <mark> – Marked text
  • <small> – Smaller text
  • <del> – Deleted text
  • <ins> – Inserted text
  • <sub> – Subscript text
  • <sup> – Superscript text

Difference between <b> and <strong> – <b> tag defines bold text without any extra importance while <strong> defines text with strong importance and content inside is typically displayed in bold.
<i> and <em> – both these tags show similar result but technically they are different, <i> defines  part of text in alternate mood while <em> tag defines emphasised text.

Quotation and Citation Elements

  • <blockquote> – defines a section that is quoted from another source. Browsers usually indent <blockquote> elements.
  • <q> – defines a short quotation. Browsers normally insert quotation marks around the quotation.
  • <abbr> – defines an abbreviation or an acronym, like “HTML”. Marking abbreviations can give useful information to browsers, translation systems and search-engines. E.g. 

<p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>

  • <address> – defines the contact information for the author/owner of a document or an article.

<address>
Balwant Neeb<br>
#ABC, 17 D<br>
Wonderland<br>
</address>

  • <cite> defines title for creative work(e.g. A book, a poem, etc) – <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
  • <bdo> – Bi-Directional Override – used to override current text direction

<bdo dir=”rtl”>This text will be written from right to left</bdo>

HTML Comments

HTML comments are not displayed in the browser but they are helpful in understanding HTML source code, developer/designer should encourage themself to use commenting tag for future reference or with comments you can place notifications and reminders in your HTML code.

Syntax of HTML Comment

<!– This is the syntax of comment in HTML→

Example – 

<!– This is a comment –>

<p>This is a paragraph.</p>

<!– Remember to add more information here →
<p>This <!– great text –> is a paragraph.</p>

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments