Tags you need to know
It is important to know the basic tags in HTML. HTML tag consists of three parts : opening tag, content and closing tag.
The above image explains the syntax of a basic HTML Tag. Let’s have a look at the basic everyday HTML tags -
- <div> — It is a generic container tag that is used to group other HTML tags. It is a block level element.
- <p> — This represents a paragraph tag.
- <h1> — <h6> — The “h” tags represents the headings. The “<h1>” tags is used to define the most important heading whereas “<h6>” represents the least important.
- <span> — It is also a generic container tag similar to the div but is an inline level element. This tag is mostly used for styling purposes.
- <header> — This includes the header content of the web page like logo, name, navigational links etc., It is a block level content holder.
- <nav> — The <nav> tag includes navigational links to the current section in the document or the other web pages.
- <main> — It denotes main content of the <body> tag in a web page. It should be unique to the document.
- <aside> — This mostly includes content of ads, biography of author and related links of the document.
- <article> — It is a self contained composition that may include reviews, posts etc., There can be <article> nested inside an <article> tag.
- <section> — This is a thematic grouping element, they don’t stand on their own. They need to be used within an <article> tag.
- <footer> — This includes the information about the author, copyright data, link related documents etc.,
- <address> — This supplies contact info and is generally placed inside a <footer> tag.
- <ol> — This represents the ordered list of elements — numbered list.
- <ul> — This represents the unordered list of elements — bulleted list.
- <li> — This represents the individual item in the list.
- <button> — This represents a clickable button in the document embedded inside a form tag.
- <form> — The <form> tag includes any interactive information that needs to be submitted to the server.
- <table> — This represents the tabular information in the document — both rows and columns.
- <thead> — This represents the head content of the table.
- <tbody> — This represents the body content of the table.
- <tr> — This represents individual row in a table.
- <th> — This represents individual header cell in a row.
- <td> — This represents individual data(body) cell in a row.
- <a> — This creates a hyperlink to other web pages and has a “href” attribute that includes an URL.
The above tags are the very basic HTML tags that we will need to get started. There are also self closing tags in HTML. But, what are self closing tags? A self closing tag is a short hand representation of the opening and closing tag in one. They are also called as “void elements” in HTML because they cannot have any content between the tags.
Let’s also have a look at the basic self closing tags in HTML:
- <img /> — This embeds image into the document.
- <input /> — This is used to collect input from the user and is usually embedded in the <form> tag.
- <textarea /> — This represents a multiline text input that allows user to enter a sizeable amount of input.
- <br/> — This produces a line break in the text.
- <hr/> — This stands for “horizontal rule” and is used to present a horizontal line between texts.
This post helps you have an insight on the basic HTML tags used everyday. Like this article? Follow Maneesha Venigalla.
