Basic Tags

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.

Headings

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.

Paragraph

The <p> tag is used to display a paragraph. Browsers usually add whitespace and margin to show a paragraph.

Section

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.

Article

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.

Header

The <header> tag defines a logical header for the web page. The <header> tag typically contains the site logo, site navigation section.

Footer

The <footer> tag defines the logical footer for the web page. It typically contains the links to copyright information, terms and conditions, etc.

Navigation

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.

Div Tag

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.

Span

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.

Images

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

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.

Lists

List is basically a list - it can be both ordered and unordered. Important tags are <ul>, <ol> and <li> .

Line Breaks

Line breaks can be implemeneted using the <br> tag.