Common HTML Tags
HTML is a language that consists of hundreds of tags but in reality we only need a few of them to create professional looking websites. These are some of the most commonly used HTML tags for creating web pages.
Note: If you can't understand these HTML tags right now then don't worry! You will thoroughly learn these tags in next lessons.
Define the version of HTML document
The first line of every web page must define its version using the DOCTYPE declaration. This tag is very important because it helps the browser in understanding the web page, which in turn allows them to process the code efficiently. Different versions of HTML uses a slightly different approach in defining their version.
For example, let's take a look at how we used to define the version of XHTML 1.1 using the DOCTYPE declaration
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Is that looks complex?
Don't worry! Because in HTML5 we have a simple and much easier way to define the type of document. Take a look at below code and see how simple it is.
Example
<!DOCTYPE html>HTML Document Structure Tags
These tags help in defining the overall structure of the HTML web page. You will frequently see these HTML document structure tags because it provides you with a starting point for creating any type of web page. Let's have a look into these HTML tags.
- <html> tag is used to define the start of the actual HTML document while </html> is used to end it. It is known as the root element of HTML web page because it contains all other HTML tags that are used to create a web page.
- <head> and </head> tag contains all the tags that provides information related to the web page. Remember that the tags used inside <head>...</head> tag are not meant to be shown on the screen because they are only used by web browsers and search engines.
- <body> and </body> tag contains the main area of web page that is visible to the user.
Example
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>My first heading</h1>
<p>This is my first paragraph.</p>
</body>
</html>Heading Tags
Headings are an important way to catch user attention. HTML provides us with six types of heading tags that can be used according to scenario. The heading tags ranges from <h1>...</h1> to <h6>...</h6> where <h1> is used to mark the most important heading while <h6> is used for least important.
Example
<h1>Example of heading 1</h1>
<h2>Example of heading 2</h2>
<h3>Example of heading 3</h3>
<h4>Example of heading 4</h4>
<h5>Example of heading 5</h5>
<h6>Example of heading 6</h6>Paragraph Tag
In today's World Wide Web, content is considered as the "King" which is the reason behind creating a blog or website. So, in HTML we have a paragraph tag <p>...</p> whose main purpose is to mark those pieces of text that acts as a paragraph.
Line Break Tag
We all know the use of "Enter" key in a text editor or chat program. Mostly it is used to move the cursor to the next line or leaving a line empty. Line Break tag <br /> in HTML has a similar role as it allows us to begin writing from the next line. Remember that this element does not have any end tag because there's no need to write anything in between. That's why it is also belongs from an "Empty" element family.
Horizontal Lines
Sometimes we may face a situation where we need to separate pieces of content by visually drawing a horizontal line in between. The horizontal line tag <hr /> is there for our rescue. It allows us to easily create a horizontal line wherever and whenever we need.
Example
<h1>HTML horizontal line tag</h1>
<hr />
<p>This is an example of HTML horizontal line tag</p>HTML Links
Links possesses a significant role in the creation of Hypertext Markup Language (HTML). The main reason behind the development of HTML was to provide a way for interlinking related information on the web. HTML links allows us to connect multiple web pages with each other.
The link tag <a href="URL-of-the-page">...</a> has a "href" attribute which specifies the URL of destination where the user will go whenever the link is clicked. Remember that like most other tags you can also add content in between the link tag which makes the whole content area clickable.
HTML Images
Images are no doubt a great way to attract eyes of users and convey a message visually. In HTML we have an image tag <img /> that is just there to add image in any web page. As <img /> is an empty element so it only have attributes which gives more information related to the tag. The two required attributes of image tag are “src” and “alt”. The "src" attribute of image tag specifies the location of image file that we want to show. Whereas "alt" attribute is used to show alternate text in case the image is unable to load.
Example
<img src="https://www.edopedia.com/assets/images/edopedia_icons/edopedia_icon_text_10.jpg" alt="Edopedia Logo" />