HTML: Grammar! Tags and Elements

Grammar Of HTML


     As you know, Each and Every Spoken language has it's own and unique Grammar Rules. Which defines, how that language to be pronounced, defined, written, etc. Like wise Every Computer Language has it's own Grammar, which defines how it should be
 
    ▪︎ Coded
    ▪︎ Formatted
    ▪︎ Translated 

This applies for HTML too! Okay, let's see the Grammar of this Markup language.

Tags and Elements 


    Tags are building blocks of HTML Before I explain further take a look at the following image. 

         
   
In the following image It has an HTML Element   
  • An HTML Tag is surrounded by <>
  • A Tag has a Opening and a Closing Tag
  • Any Content in between opening and closing tag is considered as Element Content.
  • An Opening And Closing Tag with A Content in between it makes a complete HTML Element
      • An Opening Tag Defines the opening of the Element Content inside it
      • An Closing Tag Defines the Closing ( end ) of the Element Content inside it 

Confused right ?

       Okay, let me explain much more in brief. To Keep it simple. Remember the following things.

  • A Tag Defines the element Content, like how it should appear in browser. 
  • Browsers Ignore Tags
The only thing that will show up in page is the Element Content

See this

   This Text is in Bold!

You will see only "This Text is Bold!" But the actual code behind is

<b> This Text is in Bold! </b>

The <b> Tag, is known as Bold Tag  Which says the browser to display the Element Content in Bold. As you see the <b> and </b> Didn't appeared in Browser output ( you will learn how to use them soon! ) Now you may got basic understanding on this. 

         There are more than 60+ Tags in HTML5. Each Tag has it's own and unique uses. You will learn everything soon!


Paired Tags Vs Open Tags 


     I mentioned above that, "A Tag has a opening and a Closing Tag" , But in some cases it not true. 

  HTML Tags are classified as Two Types. 
  • Paired Tags
  • Open Tags 
Paired Tags have both Opening and Ending Tags But open tag have only opening tag not a close tag! ( Just Remember This, we will learn more about this soon ) You can remember this like imagine 

   Paired tag as couple, Without Him, She is nothing. Without her, He is nothing. They will Appear Together Everytime. If not it is a breakup! 

Now replace the things here, Without Opening Tag, Closing Tag is nothing, Without Closing Tag, Opening Tag is Nothing. They Appear Together Everytime. If not The code will break!

Likewise Imagine Open Tags as a Single Guy

  He has no rules, Never Searches for his pair. No Breakups, So Useful and handy. Often Appear With a friend who is committed.

Now replace the terms. Opening Tags have no rules. They don't need any partners. They are so useful and handy. They often Appear with paired tags. 

Basic and Compulsory HTML Tags


   Look at the following code below ( may look messy, just take a look! )

     <html>
       <head>
         <title> </title>
       </head>

       <body>
       </body>
    </html>

There are some paired Tags Above which is needed to make an basic HTML Code. These Tags are Compulsory!!! Okay, let's see the definition of easy tag in the code above.

  • <html> Known as HTML Tag. This tells browser that, the following elements are HTML Elements

  • <head> known as Head Tag.  This is the place where you used to define the webpage. ( you will learn about everything Later )

  • <title> know as Title Tag. Defines the title of the webpage. That is, the Content inside this tag appears as title to the webpage in browser's title bar.

  • <body> This is the place where entire Content is written. That is The Content inside this makes the webpage! 

Kinda confused? Don't worry, you will see get to know about it in the next post!

Attributes: Quick Feed


    Attributes are some material which describes  tag. To make everything Simple I will give you a simple Example from English Language. 

  
The Knights |  Ran | Fast

Many of you would have probably guessed. I separated Noun, Verb, Adverb. As by English Grammar

  • A Noun is a Object
  • A Verb is word which describes noun
  • An Adverb is a word which describes verb
Like wise, 
  • An Element Content is a thing which appears in webpage 
  • A Tag is a thing which describes Element content
  • An Attribute is a thing which describes The Tag
Don't worry if you can't pick it up yet, you will catch everything when you start to learn about that!

And an important thing! In our next post, you are going to make your own webpage! Get your things up! If you don't know what you need, you would have probably skipped the Introduction, check it here

Feel free to ask your questions in comments tab!

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

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