HTML Basics

In this lesson we will discuss some basic tags of html standard web programming language. We will see how html link tags, paragraphs tags and image work. We will see some examples of each of these tags. Don't worry if you find these basic tags difficult to understand, we will discuss each of this tags in detail in the next upcoming lessons. Stay focused and you will definitely find our teaching methods interesting.

HTML Headings

Heading in common words are known as titles on a paragraph or some piece of text. These are used to make some text more visible and get attention from the reader. Similarly in html, heading tags are defined as titles of some piece of text or anything.

In html to make a heading we us <h1> tags. There are total six types of headings we can use in our html works. They start from <h1> and end at <h6>. The <h1> heading is the largest heading and <h6> is the smallest one. These tags also require closing tags. The closing tags are defined as </h1>, </h2>, ... ... , </h6>. Here is an example of these tags. It shows proper method to use these tags.

Example:-

<h1> This Is The H1 Type Heading </h1>

<h2> This Is The H2 Type Heading </h2>

<h6> This Is The H3 Type Heading </h3>

<h4> This Is The H4 Type Heading </h4>

<h5> This Is The H5 Type Heading </h5>

<h6> This Is The H6 Type Heading </h6>

Anything which comes between opening and closing tags of HTML headings will be rendered as headings by Internet browsers. We have not showed you the browser rendered results of this example because these results vary from browser to browser and also depend on type of browser used and settings of browser too. The best way is that you make yourself an HTML file of this example and see the result yourself. Find out more about making an HTML file.

HTML Paragraph

In the last section of HTML headings we showed that you can apply headings to a certain piece of text in an HTML document. Usually this text in an HTML document is showed using a paragraph tag. Paragraph tag starts from <p> and ends at </p>. It is absolutely necessary to close the paragraph tag. There are some HTML tags which do not require closing tags and we will talk about this in upcoming lessons. Here is an example of HTML paragraph tag.

Example:-

<p> this is a paragraph. It can include text, images and other multimedia and interactive content. </p>

Go try it in an HTML file.

HTML Links

HTML links are defined using <a> tag and it has a closing tag of </a>. There are many attributes associated with the link tag and we will discuss all of them in a separate lesson. Here comes an example of HTML link tag.

Example:-

<a href="http://allwebprograming.blogspot.com/">This Is A Link To A Web Address</a>

Link styles also vary from browser to browser therefore you will have to try it yourself in order to see the best result. A single html tag can have multiple attributes. What are attributes? Why they are so important? These questions we will answer in later lessons.

HTML Images

Images and other multimedia can be added into Webpage using HTML code. We use <img> tag to add images in an HTML document. Like HTML link tag, HTML image tag <img> can have one or more attributes. Don’t worry with the world attributes. There is a whole lesson dedicated for HTML attributes only. An example of HTML link tag is given below.

Example:-

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

The src attribute can have different values depending on the location of your image file. we will discuss that later in a lesson.

This was just an introductory lesson for beginning real HTML learning. In fact you need to master all or at least some more commonly used HTML tags in order to master HTML programming language. This was somehow a boring lesson but be patient, you will get every single detail on every single HTML tag in our next lessons.

HTML Elements

The whole HTML programming language is defined using HTML Elements. It is the main building part of HTML document. An HTML document is everything from start tag to the end tag. You will better understand this by seeing an example of this.

Example :-

Start Tags*	The HTML Document	End Tag*
<p>	This is a paragraph	</p>
<a href="homepage.html"	This Is a Link	</a>
<br>

* The start tag is often called opening tag and end tag is often called closing tag by webmasters. It’s nothing serious although, you can call your tags whatever name you like easily. But professionally speaking we suggest you to use documented terms.

General HTML Syntax :-

We have taught you the general HTML syntax in the last example in very detail. But here is a quick check list of important points to remember and keep in mind.
1. An HTML element starts will always start with start tag/opening tag.
2. An HTML element will always start with end tag/closing tag.
3. The element content is everything between the start and the end tag.
4. There are some HTML Elements which are absolutely empty, meaning that they have empty content.
5. Empty Elements are closed in the start tag.
6. Almost every HTML element has some attributes.
Note : we will discuss HTML attributes with more detail in the next chapter.

Nested HTML Elements :

HTML documents consist of nested HTML tags. It means that on HTML tag can contain other HTML tags. For more explanation, see the example below.

HTML Document Example :

<!Doctype html>
<html>
<body>
<p> This Is My First Paragraph. </p>
</body>
</html>

The HTML document example above has 3 HTML tags nested inside each other. See the explanation below for more understanding.

HTML Example Explained :

The <p> Element :
<p> This Is My First Paragraph. </p>
• The <p> element defines a paragraph element in an HTML document.
• The <p> element has a starter tag <p>.
• The <p> element has an end tag </p>.
• The element content is : This Is My First Paragraph.

The <body> Element :
<body>
<p> This Is My First Paragraph. </p>
</body>
• The <body> element defines the body of the HTML document.
• The element has a start tag <body>.
• The element has an end tag </body>.
• The element content is another HTML element a <p> element or you can say a paragraph element.

The <HTML> Element :
<html>
<body>
<p> This Is My First Paragraph. </p>
</body>
</html>

The <html> element defines the whole HTML document as described in this lesson : HTML Document Type Declaration.
• The element has a start tag <html>.
• The element has an end tag </html>.
• The element content is another HTML element (the body element) which contains entire HTML page code.

Don't Forget The End Tag :

Some HTML Elements might display correctly even if you forget the end tag. See example below.
<p>This Is A Paragraph.
<p>This Is A Paragraph.

The example above works in most browsers, because the closing tag is considered optional. But it is highly recommended that you always use both closing and opening tags. HTML language changes its specifications and this change can cause problems if you use previous tags of older versions of HTML. Never rely on this. Many HTML Elements will produce unexpected results and/or errors if you forget the end tag.

Empty HTML Elements :

HTML Elements with no content are called empty Elements. Some of these tags are used for defining style information like break line tags.  <br> is an empty element without a closing tag.

(The <br> tag defines a line break).

Tip : in XHTML, all Elements must be closed. Adding a slash inside the start tag, like <br/>, is the proper way of closing empty Elements in XHTML (and xml).

HTML Tip : Use Lowercase Tags :

HTML tags are not case sensitive at all. You can use both uppercase and lowercase letters in writing HTML tags but it is highly recommended that you use only lowercase letters in writing HTML code because some of the browsers might not render HTML with uppercase letters correctly. <p> means the same as <p>. Many web sites use uppercase HTML tags. But we discourage this practice for your own safety and flexibility.

It is also recommended by w3c organization that all web developers must use lowercase letters while writing HTML Web Pages.