What is Basic HTML Tag?

HTML can be expanded as Hypertext Markup Language, which is commonly used for the web based application development processes. It operates as a plain text file that can hold a variety of tags based on the requirement set for the said application. Tags in HTML can be defined as a means for instructing the program for modelling the web page. A few of the basic tags that can be seen in almost all the HTML documents are <HTML>, <!Doctype html>, <head>, , <body>, , <div>, , , , , , <hr>, , <li>, <ol>, <ul>, <a href =…>, header tags like h1, h2, h3, .., <img src=””/>, etc.

What is a Tag?

A tag is an instruction to tell the browser how it should display certain content on the screen. Sometimes developers might refer to tags as elements. Here is an example of what a tag with some text inside.

This tag is known as a header tag. The h in the tag name lets us and the browser know that we are working with a header tag. The one that follows the h indicates the size of the header that is being used. In this case, 1 is the largest default text that you can have displayed in the browser. The output of this tag in the browser will display Hello World!

What is an Attribute?

An attribute is an additional value that can configure a tag or adjust the tag’s behaviour. Here is a perfect example of what a tag looks like with an attribute added

<button id=” SubmitPizza” class=”btn”>Add Pizza</button>

The id attribute’s value can be anything you want it to be, though it can’t have any space in it. The second attribute is the class attribute. The class attribute can take multiple values, which can be whatever you want them to be.

Global Attribute

The global attribute is able to be set on all tags. Let’s go over the four most commonly used global attributes.

id: First is the id attribute. This adds no visual change to the tag itself. It is used mostly for JavaScript and styling, with CSS (Cascading Style Sheets). The id attribute value must be unique on a given page. That means that no two tags can have the same value in an id
class: the class attribute is similar to the id tag, except the value of the attribute can be repeated multiple times on a given page. You will find these used mostly with CSS and sometimes with JavaScript.
style: style attribute is used for Inline CSS. It should be avoided if possible.
title: title provides an identifier, or a tooltip of sorts, for the tag. When the mouse has hovered over a tag, where the title has displayed.

For Example

Welcome!

Block Level Element vs Inline Element

The following are the attributes of the Block level element and Inline element. Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,492 ratings)Course Price
₹6999 ₹41999
View Course

Block Level Element: Takes up the whole width of their parent container.

Inline Element: Takes up the current space that exists in.

Here is a basic illustration.

This green area represents the parent container. In our case, it’s the browser window. The width of the browser, our parent tag, will be the width of the block-level element.

These pink areas represent our block-level elements or tags. As you can see, they take up the entire width of the parent container. This means that any tags must start on the next line.

These next three blue areas are Inline tags. As you can see, they are situated side by side, only taking up the necessary width needed for the content they hold. This will make more sense as we see these tags in action.

Different Basic HTML Tags

Let us now discuss the different HTML tags.

1. Tag – DOCTYPE

<!DOCTYPE html>

The DOCTYPE tells the browser what kind of file will be opening. Since we are coding in HTML5. HTML5 is the latest version of the HTML Markup language; our DOCTYPE is extremely simple. Notice, There’s no closing tag.

DOCTYPE is just like a regular tag and starts with a bracket, and then we put in the exclamation point, and then we type DOCTYPE. We have space, and then we type html. This tag is basically telling the browser, hey, these documents need to be served as HTML.

2. Tag – html

<html></html>

The HTML tag, also called the root element, follows the DOCTYPE tag. This tag can have the normal global attributes plus an attribute called manifest. The HTML tag can only be used once on an HTML page.

Everything HTML related is nested inside this tag. This means that all of our tags will be located between the opening and closing of the HTML tags.

3. Tag – head

<head></head>

The head tag provides general information about the web page that is being displayed. An individual tag is added inside of the head tag, which lets the browser know certain specifics, such as the title of the page, author of the page, and other such information.

Nothing in this head tag will be displayed on the web page. However, some information is displayed in the actual browser application, such as the tab title. It is standard global attributes are available for this tag.

4. Tag – body

<body></body>

The body tag lets the browser know what to display on the page. Inside the body, the tag is where we will place all of our content, such as tags and text. Anything placed inside of the body tag will be displayed on the web page.

The body tag is placed after the head tag inside of the HTML tag. There is only one body tag per page. The body tag can have standard global attributes.

5. Tag – span

Our first tag is the span tag. This tag is a generic, Inline container. That means it has no default style associated with it. You would want to use this tag if you needed to group texts that you want to keep together inline.

6. Tag – p

The paragraph tag, or the p tag, is used when you want to keep a paragraph of text together. This element is a block-level element, meaning it takes up the width of its parent container. The ideal use would be when you have a lot of text to display. Only global attributes are permitted for this particular element.

7. Tag – div

<div></div>

The division tag, or commonly known as the div tag, is a generic block container. This means you can group a lot of tags together to make up a section of your site. This tag is global attributes.

8. Tag – sub

The subscript tag, or the subtag, allows the next to be below the normal line of text. It’s an Inline element as it uses global attributes. A perfect example of usage would be to make the 2, in the H2O, appear little.

Example: H₂O

9. Tag – sup

The superscript tag, or the sup tag, which is an inline element, allows for the text to be above the normal line of text. An example would be when dealing with a math equation. Notice that the 2 is higher than the rest of the text in this equation.

Example: E = mc²

This is a global attribute.

10. Tag – u

U stands for underline. This will underline any text within the open and closed tags. It’s an inline element and global attribute.

11. Tag–em

The em tag stands for emphasis. In this case, the idea of emphasizing any text will make the text look italic or slanted. This inline element is used when you want to express certain emphasis on parts of your text. This is a global attribute.

12. Tag – strong

If you ever want to make any text bold, you would use the strong tag. This inline tag is placed around the text you would want to make bold, just like the emphasis tag. The strong tag gives added importance to text on your website.

13. Tag – br

 

The BR tag standing for a break. There are a few tags that don’t need a closing tag. It’s neither block and inline element. It is a global attribute.

14. Tag – hr

The hr tag also does not need a closing tag to complete it. The hr tag, which stands for the horizontal rule, will create a line on the web page. It’s a block-level element. It’s a global attribute.

Nested Elements/Tags

Nesting tags
Where one tag is inside of another tag

Example

16. Tag – li

<li></li>

The li tag standing for a list item is the tag that will be nested. Inside the li tag, you would put any type of content that is a list.

17. Tag – ol

<ol></ol>

The ol tag, standing for the ordered list, is a container of the nested li tag. You will never see these two tags, the li or the ol tag, by themselves. Since this is a list of orders, that means next to each item in the list, there will be a value.

By default, the list will use numbers.

Attributes

Global, reversed, start, type (a, A, I, i)

18. Tag – ul

<ul></ul>

The ul tag, or the unordered list, is a container for the nested li tag, just like the ol tag. But unlike the ol tag, which displays a number value next to each of the items in the list, this ul tag just provides bullet points next to the list items in the list.

19. Tag – h1, h2, h3, h4, h5, h6

There are six total header tags. Each of these with its own number, starting at 1 down to 6. The h1 tag and all the other header tags provide a brief description for a section of text or content. These tags are global attributes.

20. Tag – a

The tag, or the anchor tag, is a popular tag because it creates links to other pages on a website, and it can create links to outside websites. The tag is an inline element and has a plethora of attributes besides the global attributes associated with it.

<a href=”http://Google.com”>Hello World!</a>

The one additional attribute we will mention is a href. This stands for Hypertext Reference. The main thing to remember is that the href is the attribute where we provide the path so we can link to another page or another website.

The attribute, href. And we always want to put our closing tag. Link back to the Google.com website.

Output

21. Tag – img

The img tag, or the image tag, gives us the ability to display images on our page.

<img src=””/>

Now you will notice in the example here that the image tag does not have a closing tag. This is one of the handfuls of tags. But unlike the br tag and the hr tag, we signify the ending of this tag with a forward slash. Some might actually refer to this as the shorthand way to write a closing tag.

The src attribute and the alt attribute. The src, or the source attribute, as you see in the example, is required.

Now the value of this attribute is the path to the photo we would like to display. The path can be either an absolute path or a relative path. The other attribute is the alt attribute. This stands for an alternative. The alt value should describe the photo. The alt text will be displayed in the browser as below.

Conclusion

HTML is literally amazingly huge subject areas, which are thought to possess. When you have managed to get this much, even though you’re much more than perfectly able to front-end evolution power. You need to be a lot more secure, breaking down a webpage into its element items and, after that, code associated with HTML and CSS.

What is Basic HTML Tag?