HTML Basics

By -

 Basic Tags & Elements used in HTML

To built a huge building what we need to put some small small bricks, stones and concrete. In similar way to write any program we need to know basics of those programs. In this page we are gonna study about all the basic things in a html webpage in very simple manner. Let's enjoy!

 Tags

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

  • All HTML tags must enclosed within < > these brackets.
  • Every tag in HTML perform different tasks.
  • If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

Syntax 

                <tag> content </tag>

 *As it is a basic module I'm not going in much deep. If you want to access complete detail about tags in html CLICK HERE.

*never miss the closing of tag </tag>

*some tags are need not to be closed and also don't contain any kind of data, thus called Empty tag. e.g. <input>, <br>, etc.

 Is HTML case sensitive?

The answer is NO, html isn't case sensitive.

 What is Case Sensitive?.............click here

 

HTML Elements 

Elements are nothing but the whole statement including tags opening to tag data and tag closing. 

e.g. <h1> This is Level 1 Heading</h1>

the given example have a <h1> tag which make text Huge heading. 

After the concept of element there's another concept of Nested Element. If you have studies any programing language you must have read about nested loops, here also word nested has same meaning. No problem if you have not read yet, let me make it clear for you.

If we put a some element inside other element then it is called Nested Element. 

eg. We always write body of the page in <body> tag 

<html>

<body>

            <p> this is example</p>

</body>

</html>

Here what we did? We nested body tag inside html tag and also nested paragraph tag inside body tag.

 

Attributes 

Sometime we need to add more details about tags and attributes are used for the same. Let's understand about attributes by an example:

e.g. <input type="date">Enter Your Date of Birth</input>

Here what we want to take a input from user in date format so we instructed our input tag to take only input in date format. Here type="date" is an attribute of input element. We can have some other examples like <p id="firstpara">This is an example para</p>. What we did here is given an id to the para. We use a bunch of paragraphs in a webpage but while applying CSS(to make page stylish) if we need to target specific paragraph we have to give it some id (we will study about IDs and Classes in CSS deeply). For Now just understand id="anyID" is an attribute in HTML tags for targeting specific tag while styling.

*Get some most used Attributes in html   

*attributes are always written in open tags (as <tag attribute>.................</tag>)

*attributes always contains two part name and value, as <tag attributeName:"value">........</tag>

Comments

Post a Comment

Most popular post

Heading in HTML

By -
Image
 Heading in HTML In the web page you are reading this HTML lesson you can see Heading clearly, and I hope you know well what is heading. Heading is something written on top of every topic, it tell us what we are going towrite inside the page or in the topic. In HTML we are having 6 different levels of headings ranging from <h1> to <h6> <h1> This is level 1 Heading <h1> <h2> This is level 2 Heading <h2> <h3> This is level 3 Heading <h3> <h4> This is level 4 Heading <h4> <h5> This is level 5 Heading <h5> <h6> This is level 6 Heading <h6>  By looking at above example you might have understood all six levels of headings    GET COMPLETE HTML COURSE FOR FREE  
Read more

Paragraph in Html

By -
Image
 Paragraph HTML is an markup language to create a webpage. In webpages we also need paragraphs. You all are familiar with word paragraph. To create a paragraph we use <p>..........</p> tag. Syntax: <html> <body> <p> This is an example paragraph </p> </body> </html>   Attributes of <p> tag We can use all inline css attributes in paragraph tag to decorate and also id & class to target in CSS file or in internal CSS.  Don't worry if you are getting trouble in understanding what are Inline CSS, Internal CSS, or CSS file, we will study them in very easy language and in deep soon. Let's first see a syntax with id & classes <html> <body> <p id="firstpara" class="firstpara"> This is an example paragraph </p> </body> </html>  Here what we did we just given an id and an class to target specific paragraph in Cascading Style Sheet(CSS) Click here to learn about CSS Click he...
Read more

Case Sensitivity

By -
Image
 Case Sensitivity What is Case Sensitive? Before knowing case sensitivity lets firstly know what is case.  ABCDEFGH........... these alphabets are written in Upper Case( Capital letters are termed as Upper case). Similar to those abcdef......... are Lower Case alphabets (small letters are known as lower case). Now any language which is sensitive about cases (upper case & lower case) are known as case sensitive language. If a language is case sensitive then, for that language BOOKS & books  are two different things. "CURRENTLY YOU ARE ON TECHNICALVINAYAK.BLOGSPOT.COM" (This line is written in upper case) "currently you are on technicalvinayak.blogspot.com" (This line is written in lower case) "Currently You ARe ON technicalVINayak.blogspot.com" (This line is niether in upper case nor in lower case but a case sensitive language treat it as a different thing. And for html or any other non case sensitive language all three are same) How case sen...
Read more