HTML Tags and Attributes for beginners | Lesson 2

HTML which means HyperText Markup Language is the basic ingredient of the web and has been used for constructing the documents of the web through text structures like headings, paragraphs, lists, links, quotes, and many other things.

HTML is the easiest programming language to learn and thus is the first language that any developer to be ought to learn. Well, in this lesson, only the basic tags and attributes which are crucial for every web designer are described.

At the end of this article, you should be in a position to apply these tags and their attributes to construct rudimentary web pages.

What are HTML Tags and Attributes?

Tags in HTML are used to build objects in an HTML document. These tags are enclosed in angle brackets < >. For example, the <p> tag can be used to define a paragraph of text Most of the HTML tags are pairs with an opening tag (for example, <p>) and a closing tag (for example, </p>) However there are some tags known as Self-closing tags, which do not necessarily require closing tags (for example, <br>).

An attribute is an extension to the basic HTML tags that offers more specific details concerning the tags. They are always included in the opening tag and should always be in name/value pairs such as name =”value”. For example, the ‘src’ used in the <img> tag depicts the source of the said image.

Ok, now we can go through the HTML tags and attributes with which you are likely to work most of the time during HTML course for beginners.

List of Tags Explained

• Paragraph Tag
• List Tag
• Heading Tag
• Anchor Tag
• Image Tag
• Br Tag
• Bold, Italic, Underline
• Big and Small Tags
• Horizontal Ruler Tag
• Subscript and Superscript Tags
• Pre Tag

Paragraph Tag (<p>)

The ‘ ‘ <p> ’’ tag is used to define a paragraph of text. It adds some space above and below than that of any other paragraph you type in any word processing program.

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

Attributes

align: Specifies the alignment of the paragraph text. Possible values are left, right, centre, and justify.

Example with attribute

<p style="text-align: centre;">This paragraph is centered.</p>
<p style="text-align: left;">This paragraph is centered.</p>
<p style="text-align: right;">This paragraph is centered.</p>
<p style="text-align: justify;">This paragraph is centered.</p>

List Tag (<li>, <ol>, <ul>)

Lists are used to group related items together in HTML. HTML supports ordered lists (<ol>) and unordered lists (<ul>). List items are defined using the <li> tag.

Unordered list example

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered list example

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Heading Tag (<h1> to <h6>)

The most commonly used tags are the heading tags, which are used to create headings that help when creating order in the content and for the purpose of the SEO. There is general headings or subheading hierarchy referring to from <h1> to <h6> with <h1> being the most important.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

Anchor Tag (<a>)

The most important of them is the <a> tag that is used to create hyperlinks. The only required parameter in the cases of the <a> tag is href, which signifies the location of the link.

<a href="https://www.example.com">Visit Example</a>

Attributes

• href: Provides the location or the Uniform Resource Locator, of the page that the link points to.
• target: Stipulates on where the linked document is supposed to be opened. _blank opens the document in a new tab.

Example with attributes

<a href="https://www.example.com" target="_blank">Open Example in a new tab</a>

Image Tag (<img>)

Images in an Html document are created using the <img> tag. This is a set of tags that automatically closes the HTML tag once they have been entered.

<img src="image.jpg" alt="Description of image">

Attributes

src: Gives the route to the image.
alt: It offers text that describes the image or is a replacement of the image in case the image option does not work.
width: Gives the size of the image horizontally by outlining the width.
height: MACRO height – Sets the height of the image.

Example with attributes

<img src="image.jpg" alt="Description of image" width="500" height="300">

Line Break Tag (<br>)

This is use to create a line break in the text, making the continuation of the text start at the next line. It is a tag where please, sir/madam automatically closes when the next new line is typed.

This is a line break<br>New line starts here.

Bold Italic Underline Tags (<b>, <i>, <u>)

These are tags used to apply styles to text.

<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>

Big and Small Tags (<big>, <small>)

The Big tag increases the font size of the text while the Small tag reduces the font size of the text.

<big>This text is big.</big>
<small>This text is small.</small>

Horizontal Ruler Tag (<hr>)

The <hr> tag is used to insert a horizontal line, which can be used to separate content.

<p>First paragraph.</p>
<hr>
<p>Second paragraph.</p>

Subscript and Superscript Tags (<sub>, <sup>)

These are tags used to define the script which is written in the subscript position and the superscript position respectively.

H<sub>2</sub>O (Water)
E=mc<sup>2</sup> (Einstein's equation)

Preformatted Text Tag (<pre>)

The <pre> tag is used to align the text to maintain its form and look exactly as it has been typed in the Notepad.

<pre>
  This is preformatted text.
    Indentation is preserved.
</pre>

Source Codes Downloads

For the sake of simplicity, all the example codes that are discussed in this article can be downloaded free of charge. You can download the source codes of all steps explained in this tutorial by clicking on the button below.

Key Notes Lesson 2

We have also made detailed notes and handouts for lesson 2 in order to make the presentation as complete as it is possible.

Conclusion

HTML tags and attributes are very important for anyone wishing to produce web pages and should therefore be fully understood. In this lesson, I explained topics that involve the basic tags that comprise the HTML framework, and the associated attributes they possess, which give the HTML developer more versatility on how he wishes the content to be shown.

Like with the other tags presented above, the usage of these tags and tweaking with their features will help you better prepare for more complex HTML and web developing concepts.

Once again, HTML is just the starting point. Once you are familiar with HTML, you can start with CSS (Cascading Style Sheets) to design your web pages and you can also learn JavaScript to further enhance your pages. Happy coding!