Lecture 3: Anatomy of an HTML Tag

In this lecture we will introduce three HTML tags: 
p 
br
hr

p stands for paragraph. 
br stands for line break.
hr stands for horizontal rule.

The p tag is used to put texts in a paragraph. 

Here is an example: 

<p>Hello world.</p>

So what does this HTML code do? Well, it just creates a paragraph containing the text "Hello world."

There is a wonderful online HTML (also CSS and JavaScript) editor called codepen.io, which we will use to show what our HTML code does in action. 



The left panel shows the code and the right panel shows the output. You can also experiment with the code by clicking Edit On Codepen at the upper right corner.

Next, we will show another HTML code with two paragraphs. 



Note that in the output, the next paragraph begins in a new line.

Anyway, you can see that each paragraph has an opening tag <p> and an closing tag </p>
The content (which is text for paragraph) goes in between the opening and closing tag.

p is called the paragraph element. Most of the HTML elements have an opening and a closing tag. But some elements do not have any closing tags. 

For example: The br element (which stands for line break) has no closing tag.



It should be clear form above what the br tag does. 

Another element that has no closing tag is the hr element. The hr element puts a horizontal black line in the page. 



By the way, there is an interesting thing about the above code. Note that in the code there is no blank line between the two paragraphs. But the output still starts the second paragraph in a new line. 

The browser actually doesn't see the blank spaces or lines like we do. The p tag tells the browser to put the text in a new paragraph. And the new paragraph starts in a new line by default. 

Though we know that the white spaces will be ignored in most of the cases, we should always try to format our code for better readability.

However, there are two specific cases where spaces are not allowed (in the HTML code):   

1. In the opening tag, there can be no space after the opening angle bracket.
   That means <  p> is not allowed. 
2. In the closing tag, there can be no space after the opening angle bracket.
   That means <  /p> is not allowed.

In every other place in an HTML code, spaces are allowed and will (almost always) be ignored.

The last thing that we are going to discuss in this lecture is tag attributes. 

An HTML tag may have attributes. Each type of tag has a possible set of attributes. When we write a tag in our code, we can give one or more of those possible attributes to it. Each attribute has a possible set of values.

An example will clarify it more. The p element or p tag can have an attribute called id. There are many other attributes that p can have. But let's use id as our example. The id attribute can have any text (including numbers) as its possible value.

So we can write - 

<p id="myID">This is a paragraph.</p>

Now this paragraph has an id attribute and the value of that attribute is myID. 

We will know more about attributes in the later lectures. 

For now, it should be remembered that id attribute is used to specify a certain element in the HTML code. For example: Suppose you have three paragraphs in your HTML code. You can give the three paragraphs id attributes with three different id names. 

<p id="para1">This is a paragraph.</p> 
<p id="para2">This is another paragraph.</p>
<p id="para3">This is yet another paragraph.</p>  

Once you give an id to an HTML element, you can never give that same id to another HTML element in the same document; even if that element is a different type of element. In other words, you can give one id name only once in an HTML document. 

We will learn about the use of giving ids to HTML elements, when we discuss CSS in the later lectures. In general, an HTML element is not required to have an id attribute or any other attributes.

Notice that there should always be space between the <p and id="---". That means writing <pid="---"> is not allowed. There must be at least one space between the tag element and its attribute name. But it doesn't matter if you write <p id="para1"> or <p id = "para1">. Both are correct.   

Another thing to notice is that we are putting the attribute values in double quotes. That is not really necessary and all of the following three lines are valid:  

<p id="para1">This is a paragraph.</p> 
<p id='para2'>This is another paragraph.</p>
<p id=para3>This is yet another paragraph.</p> 

However it is recommended that the attribute value is put in double quotes (like in line 1).

In case you are wondering how I included the Codepen code examples in my Blogger blog post, read this article: 
http://codetheweb.blogspot.com/2016/12/how-to-embed-codepen-projects-in-blogger.html