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.

 

Further Reading

Outside of additional classes here, we have found these sources to be ideal for learning more about web development:

 

If you are taking our “Creating your Marketing Site” class click here to return to where you left off.

 

[sgmb id=”1″]

 

Leave a Reply