If you want to become a front-end developer, one of the most common pieces of advice you will get is to learn HTML. Hypertext Markup Language, abbreviated as HTML, is the foundation of most web pages.
HTML is made of different things, such as tags, attributes, and elements. Our focus will be HTML tags. We use HTML tags to tell browsers how to structure content into headings, titles, paragraphs, images, and so much more. HTML tags are thus like keywords that define how the browser will display or format the content.
Servers read HTML tags from top to bottom. There is no restriction on the number of HTML tags a web page should have.
- All HTML tags are enclosed in
<> - Every HTML tag performs a different function
- Most HTML tags have opening
<tag>and closing</tag>
HTML tags vs. HTML elements vs. HTML attributes
Most people use the terms HTML tags and elements interchangeably. But are they the same? Technically, HTML elements and HTML tags are different.
HTML tags define HTML elements. To achieve this, content is wrapped using an opening and closing tag name that match the content of the tag we are working with.
This is an example of an HTML element:
<p> This is a paragraph </p> <p> is an example of an HTML tag
HTML attributes give additional information about HTML elements in a document. Attributes are found within HTML elements.
This is an example of an HTML attribute
<button id=" SubmitOrder" class="btn">Order</button> HTML Tags everyone should know
HTML as a markup language has evolved over the years since Tim Berners-Lee introduced it in 1993. The first HTML version had 18 tags. New tags are added with every HTML version; the most recent upgrade was HTML5 in 2014.
A close comparison of HTML and HTML5 shows that the latter has semantic tags such as <article>, <header>, and <footer> that clearly describe the content. We now have over 100 HTML tags. The following are some of the most popular tags you should know:
<!DOCTYPE>
The DOCTYPE is not technically a tag but a declaration that tells the browser what kind of file will be loaded. This tag tells the browser the type of HTML that will be loaded.
In HTML5, you can declare your file as
<!DOCTYPE html>Or
<!doctype html> Note: The declaration does not have a closing tag and is not case-sensitive.
<html> </html>
The <html> ….. </html> tag comes after the DOCTYPE tag. This tag defines the document as a web page; every other element will be nested inside. The HTML tag specifies the beginning and end of an HTML document.
A <html> tag is represented as;
<html>Content</html><head></head>
The head section of an HTML document is represented by a <head> tag. This tag is enclosed within the <html> tag and gives general information about the webpage.
The <head> tag contains other tags that give specifics of the web page, such as the page’s title and author. The contents of this tag are not displayed on the web page
This is the syntax of a <head> tag;
<head> …….. </head><title></title>
The <title> tag declares the title of the web page. This tag is enclosed within the <head> tag. The <title> tag will appear on the title bar or the tab in the browser window but not on the actual web page.
Syntax for <title> tag is;
<title>HTML Tags for Beginners</title>When inside a <head> tag, it will appear as;
<head>
<title>HTML Tags for Beginners</title>
</head><body> </body>
The <body> tag displays all the visible content on a web page. Images, links, plain text, videos, and more can be found inside the <body> and </body> tags.
Some of the other tags you will find inside the body include <p> tag for paragraph, <a> tag for images, <strong> tag for bold text, and <ol> tag for an ordered list, to mention a few.
The syntax for <body> tag is;
<body> Content </body><h1> to <h6> Tags
There can be up to 6 heading tags in an HTML document. Each of the tags is represented by a number starting from 1 to 6 as <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
H1 is the largest heading tag, while H6 is the smallest.
In an HTML document, heading tags can be represented as follows:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6><h1> to <h6> tags are enclosed within the <body> tag.
For instance, a ,<H1> tag will be enclosed as;
<body>
<h1> This is heading 1 >/h1>
</body><p> </p>
The <p> </p> or simply the paragraph tag is used when you want to structure content into a paragraph. Hitting the ‘enter’ button in an HTML document in your code editor will not create a new paragraph.
If you want more than one paragraph, you have to use several <p> </p> tags on your document. The paragraph tags should be enclosed within the <body > tag.
The syntax for a paragraph tag is;
<p> ….some content here….</p>If you want to have four paragraphs, your code will be structured as;
<body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body><b> </b>
The <b> </b> or simply bold tag will format any content between the opening <b> and the closing </b> as bold.
The bold tag can be between a heading such as H1 or even within a paragraph tag.
These are examples of a bold tag;
<b> Bold Tag </b>The phrase ‘Bold Tag’ will appear bold.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1> Fifth edition will be bolded.
<i> </i>
The italic tag, denoted by <i>, italicizes the text inside the tags.
For instance, if we have
<i> These are italics </i>The words ‘these are italics‘ will appear italicized.
<u> </u>
The underline tag, or <u>, is used when you want to underline a certain piece of text in an HTML document.
For example, if we have;
<u> underline these words </u>The phrase between the tags will be underlined.
<center> </center>
The Center tag, <center>, is used to center content on an HTML document.
For example, if we have an h2 tag written as <h2> Centering Content in HTML </h2>, we can center it as follows;
<center>
<h2> Centering Content in HTML </h2>
</center><span></span>
Span tag, <span>, is a generic inline container that does not come with a default style. You can use the span tag to group texts that you want to style.
You can span tag inside other tags such as headings and paragraphs;
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2>
<p> Learn HTML <span> from experts </span> and be ready for the market </p><div></div>
A division tag, abbreviated as div, is a tag that allows you to group different tags in an HTML document.
A div tag can be given a ‘class’ to add external styling using CSS.
This is how a div enclosing an h1, h2, and a paragraph tag will be represented.
<div >
<h1> Learn HTML </h1>
<h2> HTML Tags </h2>
<p> HTML is a markup language……… </p>
</div><em></em>
The emphasis, or <em> tag, is used to emphasize certain words in an HTML document.
Content in between <em> tags will appear slanted or italicized.
Emphasized content within a paragraph can appear in a code editor will appear as;
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p><sup></sup>
The <sup> or the superscript tag allows the enclosed text to be above the rest. A perfect example is when you want to square a number X and represent it mathematically to give you X2
The syntax for <sup> within a paragraph tag will be;
<H1> Harveys <sup>TM </sup> Company Limited </H1><sub></sub>
The subscript or <sub> tag is the opposite of the superscript tag. The content enclosed in the <sub> tag will appear below the normal line of text. A perfect example is when writing the chemical formula of water as H20.
The syntax for the subscript tag will be;
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
<br> is a self-closing tag that stands for a break. All the content after <br> will start on a new line.
The syntax for <br> within a paragraph will be;
<p> HTML is the abbreviation of Hypertext Markup Language <br>
There has been an ongoing debate as to whether it is a programming language or not <br>
However, we cannot downplay its importance <br>
HTML has been used in more than 95% of websites today </p><ol></ol> and <li> </li>
The ordered list tag or the <ol> must be used with another tag such as the <li>.
The two can appear on a code editor as;
<ol>
<li> Asia </li>
<li> Africa </li>
<li> Europe </li>
</ol>When rendered on the browser, the contents will appear numbered.
<img src=””/>
You may want to add an image for visual appeal or even a logo. The self-closing image tag, <img src=””/>, comes in handy in such a case.
The syntax for the image tag will be;
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>The content enclosed in the quotation marks represents the source URL.
Wrapping Up
There exist over 100 HTML tags, but the above are the ones you should know as a beginner. HTML is supported in most code editors, and you are thus assured that you will never go wrong when you start learning.
