HTML: Anatomy of Tags

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 write ?

HTML File: I have <body> Bla bla blah </body>

Browser: Alright! I will display that. 

  So Now you may got some idea. To make sense this what exactly happens when you run an HTML File in a browser! I just changed it from programming stuff to an convo! Well Hope you got some understanding about tags. Okay, Let's see in deep about them.

    As I said in previous post, Tags have Attributes which describe them. Look at the following image.
 In the above image, You can see what is an Attribute. The <p> tag, known as Paragraph Tag. This tells the server that, the content inside them is a paragraph. So Let's Get to the point. The Attribute id="my-content" in the image gives a the tag a unique ID. That is, There will be dozens of paragraph tags in a whole HTML file. To identify a single tag, we will use this Attribute. This is same as giving roll numbers to students in a classroom to identify.

Attribute Syntax

      This is simple Attributes always appear inside opening tag only! There is no place for Attributes in closing tag. They syntax of any Attribute in HTML Tag is 

Key = "value"


If you know any other programming languages you can get this, yes it is kinda same as Objects in OOPs ( if you don't know any, no worries! )


So they appear as key-Value Pairs often. There are some Attributes common for all tags. Also There are some Attributes unique for every tag! We will seem them all through our journey! 

Tag Rules: 

  Okay, let's get out of Attributes. ( you will catch them very quickly in our way! ) There are some Basic Tag Rules to remember ( don't memorize Just read! )

  • Tag Names are case sensitive! That is <HTML> is not same as <html> 
  • Space between tag names is not fair! That is < b o d y > is incorrect 
  • In case of nested tag Elements FILO Method should be followed ( FILO stands for First In Last Out) That is
    • What should do:  
      <p><b>Some Text</b></p>

    • What shouldn't do:
      <p><b>Some Text</p></b>
These are simple and ver basic Tag Rules. There are some more, but you will get those on the way! 

From now onwards say bye to big theories! In our future posts, we are going to do practical programs! Get your things up! Let the journey to begin!

If you have any questions or feedbacks feel free to drop them in comment box below!

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

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: Text Tags: Part 1

Image
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...
Read more