Basics Of HTML5 Tags And HTML5 Attributes

HTML5 Tags:

As I mentioned in an earlier basic html5 tutorial blog, HTML uses various tags as it is a markup language.

In this blog, I am going to explain to you HTML Tags basic. These tags are closed into angled brackets. E.g. <Tag Name> .

Types of tags :

Opening tag
Closing tag

For example :

<p> opening tag

Content

</p> closing tag

HTML5 Elements:

Lots of students are always confused about what is the difference between HTML5 Tags and HTML elements.

HTML elements have an opening tag than some content and then a closing tag. That is everything from opening tag to closing tag.

<tag name> content …..</tag name>

For example:

<p> content…. </p>
<b> content….. < /b>

1.Empty Elements :

Empty HTML5 elements are those who do not have content in them. Also, they don’t have an end tag.

Example : <br> :

Break tags do not need an end tag.

2.Nested HTML5 Elements :

Elements in HTML can be nested easily. Nested means one element in other elements.

Following example shows nesting in HTML:

Fig

Here,

<html> is the root element. It has an opening and closing tag.

<body> is mentioned in the < html > tag.

<h1> is called inside the both tags.

So,If <h1> is a child then we can say <html> is grandparent of child<h1> and <body> is parent of child<h1>.

Basic HTML Document Structure:

1.HTML Doctype:

Web browsers can display a lot of different documents, it's not just HTML.

It can display SVG, SML files. So the very first thing we have to do is what type of file this is. And we do that by using the doctype declaration.

So that browser moves into a top-down manner & realizes that this is HTML language that’s it going to render the web page.

Doctype declaration: <! doctype html>

2.HTML5 Element:

Now the very first thing that comes after the doctype declaration is the HTML element. This is a container tag because we can add more tags under this tag.

<html> is opening tag.

As you know we need a closing tag i.e.</html>.

So, it works more like a wrapper. Everything that document content goes between this opening tag and closing tag.

3.Head Section:

After the HTML tag, we need a head section. So, we need an opening and closing head tags. i.e we need a head element. This is the first real section.

<head> opening tag

</head> closing tag

4.Title element:

Now we are going to embed another element. That is the title element.

For example: <title> My web page </title>

5.Body Section

Now we move on to the body section where all the action takes place. This is the heart and soul of your web page.

Pretty much everything between these two tags in the body element will show up on your web page

< body> opening tag

</body> closing tag

<!DOCTYPE html>

<head>

<title>HTML Elements Reference</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Basic HTML Tags:

In this section, we are going to discuss basic tags in HTML. Some common tags which are used to make a pretty good website.

We are going to learn how to lay out a bunch of content inside an HTML and display it in your browser

1.Meta tags:

The meta tags are tags that define information about your file. So it's giving us metadata.

Meta tags are always used inside the head tag.

It is used to describe the character set, meta tags for description, keywords, viewport setting, etc.

Meta Tags are used by browsers like chrome, Mozilla Firefox to display content.

For example:

This tag is used for describing the character set.

If you are thinking about What is name and content here, so they are called as an Attribute.

2.HTML heading Tag:

The heading tag is newly introduced in the HTML5 version.<header> tag is used to define heading to section or document in HTML.

The header tag contains the title of the content which is to be displayed.

The header tag is newly introduced in the HTML5 version.

Both opening and closing tags are required. More than one header tag can be used in one document.

Header tags can be divided into H1 to H6 tags. These <h1> to <h6> tags displays different sized headings.

<h1> element is the superior form of heading followed by other tags in decreasing order of size and <h6> is smaller heading elements in all.

<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

3.HTML Paragraph Tag:

<p>...</p> is the paragraph tag needed to give a fixed format to the text contained in the main body section. Both opening and closing tags are essential.

When a paragraph tag is added in HTML code then the browser adds one blank line space before and after it.

<!DOCTYPE html>

<html>

<body>

<p>This is a paragraph.</p>

</body>

</html>

4.HTML Line Break Tag:

For line break, the <br> tag is used.

As this is an empty element it does not need a closing tag.

If you want a break of three lines then three times break tag should be used.

<!DOCTYPE html>

<html>

<body>

<h1>The br element</h1>

<p>To force<br> line breaks<br> use the br<br> element.</p>

</body>

</html>

Html Attributes list:

Attributes are used to give additional information about tags.

We can use attributes for any element.
Attributes should be declared in opening tags.
Attributes normally declared in pairs.
They are modifiers for tags.

For example:

<a href= “ https://linktr.ee/TechFreakTalks” title= “HTML5 Tutorial”>Google</a>

<a>is a basic anchor tag. I will explain to you in my next blog what an anchor tag does. This is an example of an attribute.

The href is mentioned inside <a> and it is an attribute of <a>.

Link is provided as a value.

Types of attributes:

Core attribute :

1. ID :

The id property indicates an unique id for an HTML5 component (the worth must be special inside the HTML document).

The id attribute is generally used to highlight a style in a template.

Syntax:

2. Class :

The class attribute determines at least one class name for a component.

The class attribute is generally used to highlight a class in a template

Syntax:

<p class= “important note”> This is an important event </p>

3. Style:

The style attribute can be utilized on any HTML element. It allows the Cascading sheet style within elements.

This attribute is under HTML with CSS.

Syntax:

<p style="color:gray;">This is a gray paragraph.</p>

4.Title:

It gives title to an element. It is extra information about an element.

When we move the cursor tooltip on that element it will get visible.

Syntax:

International attribute:

1.dir

The dir attribute permits you to demonstrate to the program about the direction in which the content should flow. The dir attribute can take one of two qualities.

Itr is used to flow left to right and rtl is used to flow content right to left

Syntax:

<p dir="ltr">Write this text left-to-right!</p>

2.Lang :

The lang attribute permits you to show the primary language utilized in a document, however, this property was kept in HTML just for in reverse similarity with the new version of HTML.

Syntax:

<!DOCTYPE html>

<body>

...

</body>

</html>

3.XML:lang :

The XML: lang attribute is the XHTML substitution for the lang attribute. The estimation of the XML:lang characteristic should be an ISO-639 nation code.

That means it describes language which is contained in a tag.

Syntax:

<a xml:lang= “en” href= “ABC” hreflanf= “XY”> Click for Hindi </a>

Here HTML anchor tag is used which is denoted by <a>.

There are some different attributes from all above attributes which are mostly used

1.Valign:

You can use this attribute for top, middle, and bottom alignment. Vertical alignment takes place by using this attribute.

Syntax:

<Tag name Valign = “value”> content goes here </tag name>

2.Background:

Given by any specific URL. It is used to place the background image behind an element.

Syntax:

<tag name style= “background-img: url(url of that img);”> content goes here </tag name>

3.Height:

It is given by numerical value. This attribute is used to specify the height of the table, images, etc.

Syntax:

4.Width:

It is also given by numerical value. This attribute is used to specify the width of the table, images, etc.

Syntax:

Roadmap To Web Development