HTML contains a number of elements but there are some which are used more often than others. This page looks into some of the more common HTML elements and the purpose of these elements.
Heading tags are defined using <h1> to <h6> tags with <h1> being most important and <h6> being least important (but still important). The browser usually displays the heading tags in bold and bigger fonts. These tags are important as search engines look into these tags to find out important content.
The <p> tag is used to display a paragraph. Browsers usually add whitespace and margin to show a paragraph.
Section tag - <section> - is introduced in HTML5 and is used to denote separate sections. It is different from <div> tag as it separates content semantically and is different from the <p> tag as multiple <p> tags can be part of the same <section> tag. A <section> tag contain and be contained within <article> tag.
An <article> tag defines a content section that can be represented on its own. An <article> can contain multiple <section>, <p>, <div> and any other tags.
The <header> tag defines a logical header for the web page. The <header> tag typically contains the site logo, site navigation section.
The <footer> tag defines the logical footer for the web page. It typically contains the links to copyright information, terms and conditions, etc.
The <nav> defines the navigation system for the web site. It will usually contain a structure and list the more common links for the webpage.
The <div> tag is used to show a division. It does not have any semantic meaning and is used for styling content. It is usually displayed the same as a paragraph, however, from semantic point of view, <p> tag should be used to show a paragraph and <div> tag should be used for styling purpose.
The <span> tag does not have any semantic meaning and is used to separate content. However, there is no visible cue to denote a <span> tag.
The <img> tag is used to display an image. It has additonal attributes to set the height and width and the alternate text in case the image could not be loaded.
Tables are a great way to display tabular data as one might expect. Tables can be created using the <table> tag. Important tags are <table> to start a table, <tr> that defines a table row and <td> that defines table cells.
List is basically a list - it can be both ordered and unordered. Important tags are <ul>, <ol> and <li> .
Line breaks can be implemeneted using the <br> tag.