HTML Tags Reference

HTML is the backbone of all HTML pages. Its syntax uses a combination of tags to build complex web pages. Therefore, we offer a list fo the most used tags.

What is HTML?

HTML is a markup language for describing web documents (web pages).

HTML stands for Hyper Text Markup Language.
A markup language is a set of markup tags.
HTML documents are described by HTML tags.
Each HTML tag describes a different document content.

Common Tags

Document

<!DOCTYPE html> – is not an HTML tag; it is an instruction to the web browser telling it what version of HTML it is using.
- All HTML documents must start with a document type declaration.
- The <!DOCTYPE> declaration is NOT case sensitive.
The <html> defines the document as an html page cleanly.
- Clean pages always start with <html> and always have close tags for every open (e.g., <html> and </html>
<head> sets up a page header information and define some page level data/code.
<title> gives your page a title. For example, search engines use the title to search for pages. It is also useful when bookmarking a page.
<meta> provides meta information like a description and keywords for the page.
<link rel=”relationship” type=”format” href=”URL”> Allows you to include other files.
- href – specifies the location of the linked document.
- type – specify the media type of the linked document.
- rel – Specifies the relationship between the current document and the linked document.
- The most common use for link rel is stylesheets however you can choose from any of the following:
  - alternate, archives, author, bookmark, external, first, help, icon, last, license, next.
  - nofollow, noreferrer, pingback, prefetch, prev, search, sidebar, stylesheet, tag, up.
<script> adds Javascript to a page:
- If you are using the code, then it is only available for this page.
- If importing an external file, the external js file cannot include a <script> tag.
- The src attribute must contain the path and file name.

Body Tags

<body> defines the main body of the document.
<hr> creates a horizontal line across the screen.
<label> links a text label to control.
<h1> to <h6> is the heading tag used to emphasize a title of a page or section of text.
<p> – defines a paragraph of text that will automatically wrap according to screen size.
<pre> – used to display preformatted text.
- The text displays in a fix width font, preserving spaces and line breaks.
- Great for displaying text like code.
<br> – creates a line break.
- This is one of the few tags that has no end tag.
- if used inside a paragraph it will not start a new paragraph.
<span> – is an inline element (with a and img). It does not start a new line and only takes the space necessary.
<div> – a container used to hold other HTML elements.
<p> and <div> tags allow you to group sections of text or controls; these are considered blocks (along with H1 – H6).
Divs can contain div’s and p’s, but a p’s cannot contain a p or a div.

Block-Level Elements

Block level elements start a new line and fill the full-screen width (far left & right edges).
Include tags: <div>, <h1>-<h6>, <p>, <pre>, <form>.

Inline Elements

does not start on a new line and only takes up as much width as necessary.
includes tags: <span>, <a>, <img>.

Formatting Tags

These tags are special formatting tags that can be set outside of styles and css.

<b> – defines the text as bold, with no extra emphasis.
<strong> – defines the text as bold, with extra emphasis.
<i> – italicize the text, with no extra emphasis.
<em> – italicize the text, with extra emphasis.
<mark> – highlighted or marked text.
<small> – reduces the size of the text.
<del> – puts a strike through the text.
<ins> – represents added text with an underline.
<sub>- displays the text as subscript.
<sup> – displays the text as superscribed.
These essentially bold, italicize or underline the text between the tags.
<font> makes numerous changes to text including font type, size, padding, color, and more.

Using Tables

<table> defines a table.
<tr> a row in a table.
<td> a column in a row.
<th> defines a column header, generally places in the 1st row of a table.
<caption> defines a table caption. It goes between the <table> tag and first <tr> tag.

Other styling traits of tables:

Tables are inline by default.
Colspan and rowspan collapse table cells.
Cell spacing is between cells padding is within them.
Columns (td) can vary spacing from one to the next.

Using Lists

In HTML there are three types of lists:

<ul> – Unordered, list items in a bullet fashion by default.
<ol> – Ordered, list items in numeric order.
<ol> & <ul> both use <li> to describe their list items.
<dl> -Description, list of terms and descriptions. Like a dictionary term and its definition.
- <dt> the term name.
- <dd> to describe the term.

You can nest these lists together to form a combination of lists types.

Forms

<form> designates a form for data entry.
- The action attribute defines the action to be performed. The action can call a script, and is a common way to submit a form.
- The method attribute specifies the HTTP method to use when transmitting the form. The two most common are GET/POST.
  - “GET” – will append the form element ids with their values in the URL.
    - Used by default if no method value is specified.
    - Ideal for small data sets and nonsensitive data.
    - There is a limit to the size of the URL. Therefore, if you have a large dataset, it may get truncated.
  - “POST” – Sends the form-data as an HTTP post transaction.
    - POST offers better security because the submitted information is not visible to the page address.

Input Tags

<input> designates the data fields.
- Input types can equal the following:
  - “submit” – executes the form and processes the script.
  - “cancel” – removes data that is on the form.
  - “text” – provides a standard single line edit field.
  - “password” – is like text but hides the data as the user types.
  - “radio” – creates a radio button. You can select only one radio at a time.
  - “checkbox” – creates a checkbox control.
  - “button” – creates a button but will need an onclick to do something.
- The value attribute sets the initial (default) value of the input field.
- The readonly attribute will display the input field in a lock or read only state.
- The disabled attribute will show the input field in a lock or read-only state. However, if you don’t want to transmit the elements values, then you need to disable it.
- The size and maxlength attribute control the size and max number of characters a user can enter. We recommend you use CSS to manage these.
<fieldset> – groups a section of data together on a form.
- <legend> – adds a caption to the fieldset.
- Add related <input> elements inside <fieldset>.
<select> – creates a dropdown list of values.
- <option value=” “> defiles the options and values to add on the dropdown list.
<textarea> – creates a multiline textbox. Like a comment box.
<button> – defines a clickable button that requires some type of code to define the action.
Other fields introduced with HTML5:
- Color, Time, Date, Datetime, and Datetime-local, Email, Month and Week, Range, Search, Tel, URL.

Navigation

<a href=”url” target=”frame”>text</a>
- href – defines the destination address. This address can be to a local page on the site, another site altogether, or an anchor on the same page.
- The text entered between the <a></a> tags is what is displayed on the page.
- target – specifies where to open the linked document.
  - _blank – opens the link in a new window or tab.
  - _self – opens the link in the same/current window.
  - _parent – opens the link in the parent frame.
  - _top – opens the link in the full body of the window.
  - framename – opens the link in the specified named iframe.

Media

<img src=”filename” alt=””> displays an image.
- src – the location of the image file. This location can be the name of the file on the same server. Otherwise, it is a hyperlink to the file found on another site.
- alt – this is the text that displays in place of the image. It tends display when the browser cannot show the picture.
- width & height attributes are still valid in HTML5, but their use is discouraged for CSS or style formatting (See CSS section).
- To make an image a link you need to wrap the <img> tag inside a <a> tag. Everything inside the <a> tag will be clickable (this includes text, image).
<audio> (HTML5) – used to embed audio like music or related audio streams.
- Any text inside the between <audio> and </audio> displays in the browsers that do not support the <audio> tag.
<video> (HTML5) – used to embed video onto a webpage.
- Before HTML5 there was no way standard for embedding video into a web page. Users had to use third party plugins like Flash or Silverlight.
<iframes> – this tag is used to embed another web page within a web page.
- The src attribute (similar to href) is the URL location of the page you wish to embed.
- Most commonly used for embedding youTube (or other videos) into the web page from a third party site.
- height and width attribute control the size of the frame. We recommend you use CSS to manage these.

Comments

Comment tags insert a coder’s remarks in the HTML source code:

<!– – Open comment tag.
Any text added between these two tags will not display on the screen.
To read a pages comment you need to open up the source code from within a browser.
–> – Cose comment tag.