Headers and attribute in HTML with easy step by step guide

After coding and running the first HTML code, let’s start with texts in HTML. This post includes headers and attribute in HTML, and an introduction to text in HTML by styling the headings and paragraphs in HTML.

Chapter 2: Lets style <text>

Page Contents

Attribute in HTML

While coding the first code in the previous chapter, we also learned some basics of HTML. Each HTML tag has a start and an end tag.

Recap:
<tag> your content </tag> is the HTML element.

Some sample tags:

<!doctype> Declares the file type of a document.
<head> Stores the metadata of the document.
<title> Title of your webpage on the page’s tab.
<body> Stores the content of the document.
<p> Starts the paragraph of the document.

Learn to code your first HTML code here.

What is an HTML attribute?

Suppose, <p> stand for paragraph tag.

<p> Welcome to WebsCocktail </p>

Here, <p> is opening tag. Welcome to WebsCocktail Is the paragraph or sentence. </p> is closing tag of paragraph.

Attributes add additional features to HTML elements.
The start tag will always contain the attribute.
An element can have more than one attribute.

Format to write an HTML attribute is: name=”value”
name is the attribute name followed by ‘=’ (equal to sign). “value” defines the value and is written inside double-quotes.

For example,
Here, the attribute for a paragraph tag (always the starts tag).

<p name="value"> Welcome To WebsCocktail </p>

Types Of Attributes:

Some types of attributes are:

The src attribute: used with the image <img> tag.
Here, src is the source or path of the image to display on the site.
<img src="abc.jpg">

Let’s add more attributes to images like height and width:
<img src="abc.jpg" width="100" height="150">

Attributes follow the same pattern name=”value”

HREF attribute: is used with <a> i.e. link element. It links the URL of the page.
<a href="https://www.webscocktail.com"> WebsCocktail </a>

Some more types of attributes are:
alt attribute to give an alternate name to the image, title attribute, style includes styling elements with the color, size, font, etc.

Don’t worry if this seems a bit difficult and confusing. We will learn about the above attributes and more in links, images, etc. We will learn A-Z about every attribute 🙂

Note:

There is no compulsion to use uppercase or lowercase in HTML.
Similarly, you can use single, double, or no quotes around attribute value.
But it is highly recommended to use lowercase in HTML and double-quotes for values. It will support all versions of HTML, including XHTML.

Headings in HTML.

Headings in HTML are in HEADER tags.
They are headings and subheadings of your webpage.
HEADER tags display headings in HTML documents.
Header tags start with h (header) followed by a header number.
There are six header tags in HTML from h1 to h6.
A header number makes your heading bigger or smaller in size.

Define header

<h1> Hello World </h1>

Start header tag <h1> followed by content and closing header tag </h1>. Remember, h1 is the largest header size while h6 is the smallest header size in HTML.

Example of header tags:

Below is an of header tag from <h1> to <h6>. Moreover, you can copy the code and run it on your system or use CheckCode to check your code within seconds.

<html>
<head>
<title> HTML header levels </title>
</head>
<body>
<h1> This is h1. </h1>
<h2> This is h2. </h2>
<h3> This is h3. </h3>
<h4> This is h4. </h4>
<h5> This is h5. </h5>
<h6> This is h6. </h6>
</body>
</html>

Run-on CheckCode:
CheckCode

Learn: How to use CheckCode?

Output:

Note:

Don’t use heading to make your text bigger or bold. HTML have other elements like font size and bold <b> tag.
Header tags give your webpage structure.
They help in defining important headings or subheadings of your page.
It helps search engines to understand the layout and content of your page.

It is recommended that you use only one <h1> tag, upto three <h2> and <h3> tags, around four to fie <h4> tags for one single webpage. Depending on your requirement, use <h5> and <h6> tags for good SEO.

Summary

Below is a summary for easy understanding. Moreover, you can download the image for future reference,

In conclusion, here we start with headers and attribute in HTML. After coding a header, let’s code and style our first paragraph in HTML in the next post.