HTML: Text Tags: Part 1

Text Tags


  If you have a question, what is a tag ? Read this post before you countinue.

  Okay so let's get started. As I mentioned before there are dozens of tags in HTML5 Each has it's own purpose and usage. Text Tags are type of tags used to format text in a web page. Text Formatting includes styles like 
  • Bold
  • Italics
  • Headings & Subheadings 
  • Underlines
  • Fonts
  • Strikeout
  • Etc
     In This post we will see only some text tags. ( we will cover up everything later )

  The best example to imply this text Formatting is a Newspaper! See the image below   


In this image, you can see the difference of different header sizes. HTML5 Has 6 different heading tags based on size. 

So there are tags Namely <h1> <h2> <h3> <h4> <h5> <h6>

The biggest header tag is <h1>
And the smallest is <h6>

Also for simple text formatting like
Bold & Italics 

There is <b> is for bold text and  <i>  for italics

 Also to Mark Paragraphs there is <p> Tag Which tells the browser the content inside it is a paragraph 

Remember that every tags listed above are paired tags means they have closing tags!


Let's move to example code. See the code below


<html>
  <head>
    <title>HTMl Text Tags: Part 1 </title>
  </head>
    <body>
       
      <h1> Heading Level 1 </h1>
      <h2> Heading Level 2 </h2>
      <h3> Heading Level 3 </h3>
      <h4> Heading Level 4 </h4>
      <h5> Heading Level 5 </h5>
      <h6> Heading level 6 </h6>
       
      <p> Lorem Ipsum.......... </p>
       
  <p>I'm <b>Bold</b> and <i>Beautiful</i></p>
      
      
   </body>
</html>

This code would give this output:


 Now you can see the difference between each heading tags. And you can see bold and italics text 

( Note: if you are thinking what is that lorem ipsum, It is a dummy text used to fill paragraphs to fill up examples )

Okay so that's what these tags does. There some other text tags too! We will see them in future posts. 

Now I would like to give you a small exercise ( do it if you wish, I am glad if you do that )

Make an HTML Code which creates the following output:


Hope you will do it! Remember this may be the base exercise to all of our future exercises.

Feel free to ask your questions and drop your feedbacks in comment section below! 

See you all in next post, till then take care!

Stay Tuned♡!

Comments

Post a Comment

Popular posts from this blog

Introduction To Python

Image
 What is Python?      If you have some programmer friend or yourself is into to the programming field you have probably heard the language Python .   Python is a High-Level-Programming Language used for many cases, in this post, we will be seeing how to work with Python.  Installation and IDE    We must install python first to work with it. Installation is simple. You can get clear info on how to get python  here . Once you are done, Make sure you have atleast Python Version of 3.0 or greater. Because this guide follows it.    Once you are done installing Python, Now we need an IDE to work with it, an IDE is nothing but an Interageted Development Environment which makes your work smoother. To get a Clear understanding, Think of this   You need to mix somethings in a bowl, you can either use your hands itself or use a mixer, both is going to do the same job but mixer does it well and your effort will be less. Just like this...
Read more

HTML: Anatomy of Tags

Image
HTML Tags - Anatomy In our  previous  post, we made our First Web Page . That would gave you some understanding of Tags. Now let's see in detail about them. ( note: I assume that you have basic understanding of Tags in HTML if not read  this  post before you countinue) Attributes - Explained           As I said Tags are building blocks of HTML. It says how the content inside it should appear in webpage. To make it simple, Tags Navigate The Browser to how to display the content inside them. See this convo (may look funny but useful)  Browser: Okay, What type of file are you ? HTML File: See I have <html> tag.  Browser: so you are an HTML File. You are my Navigator. Okay, what text should I display is my title bar? HTML File: See Under My <head> tag, I have <title> Galax Coders </title>  Browser: Okay so, Galax Coders is the title right? HTML File: Yes Ofcourse! Browser: Okay, What content should I wr...
Read more