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
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:
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
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
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 Or Note: The declaration does not have a closing tag and is not case-sensitive.
The…..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. Atag is represented as;
The head section of an HTML document is represented by a
tag. This tag is enclosed within thetag and gives general information about the webpage. Thetag 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 atag;The
The
tag for paragraph, tag for images, tag for bold text, and tag for an ordered list, to mention a few.
The syntax for tag is;
to Tags
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
, , , , , and .
H1 is the largest heading tag, while H6 is the smallest.
In an HTML document, heading tags can be represented as follows:
to tags are enclosed within the tag.
For instance, a , tag will be enclosed as;
, , , and .
H1 is the largest heading tag, while H6 is the smallest.
In an HTML document, heading tags can be represented as follows:
to tags are enclosed within the tag.
For instance, a , tag will be enclosed as;
, and .
H1 is the largest heading tag, while H6 is the smallest.
In an HTML document, heading tags can be represented as follows:
to tags are enclosed within the tag.
For instance, a , tag will be enclosed as;
to tags are enclosed within the tag.
For instance, a , tag will be enclosed as;
tag will be enclosed as;
The
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
tags on your document. The paragraph tags should be enclosed within the tag. The syntax for a paragraph tag is; If you want to have four paragraphs, your code will be structured as;
The or simply bold tag will format any content between the opening and the closing 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; The phrase ‘Bold Tag’ will appear bold. Fifth edition will be bolded.
The italic tag, denoted by , italicizes the text inside the tags. For instance, if we have The words ‘these are italics‘ will appear italicized.
The underline tag, or , is used when you want to underline a certain piece of text in an HTML document. For example, if we have; The phrase between the tags will be underlined.
The Center tag,
Centering Content in HTML
, we can center it as follows;Span tag, , 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;
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.
The emphasis, or tag, is used to emphasize certain words in an HTML document. Content in between tags will appear slanted or italicized. Emphasized content within a paragraph can appear in a code editor will appear as;
The 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 within a paragraph tag will be;
The subscript or tag is the opposite of the superscript tag. The content enclosed in the 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;
is a self-closing tag that stands for a break. All the content after
will start on a new line.
The syntax for
within a paragraph will be;
and
The ordered list tag or the
- must be used with another tag such as the
- .
The two can appear on a code editor as;
When rendered on the browser, the contents will appear numbered.
You may want to add an image for visual appeal or even a logo. The self-closing image tag, , comes in handy in such a case. The syntax for the image tag will be; 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.