HTML Tags

HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets:

   <tagname>content</tagname>
  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the opening tag, the second tag is the closing tag
  • The end tag is written like the start tag, but with a slash before the tag name
  • Use lowercase tags
  • Tags should not overlap

        Some HTML elements do not have a closing tag.

Tags Attribute

Attributes provide additional information about HTML elements.

  • HTML elements can have  attributes
  • Attributes provide  additional information about an element
  • Attributes are always specified in  the start tag
  • Attributes come in name/value pairs like:  name="value" 
<tagname attr-name="value"> content </tagname>
<!-- The filename of the source (src), and the size of the image (width and height) 
are all provided as attributes -->

<img src="picture.jpg" width="100" height="110">


<!-- HTML links are defined with the <a> tag. The link address is specified in the 
href attribute -->

<a href="http://www.yoursite.com">This is a link</a>

Examples

Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

  • Use HTML headings for headings only
  • Don't use headings to make text BIG or bold.
  • Search engines use your headings to index the structure and content of your web pages.
  • h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.

Paragraphs

The HTML <p> element defines a paragraph.

  • Any number of spaces, and any number of new lines, count as only one space.
  • Use <br> if you want a line break (a new line) without starting a new paragraph.
  • To display anything, with right spacing and line-breaks, you must wrap the text in a <pre> element.

Formatting

The <title> tag is required in all HTML documents and it defines the title of the document.

  • Bold text  <b>
  • Important text <strong>
  • Italic text <i>
  • Emphasized text <em>
  • Marked/Highlighted text <mark>
  • Small text <small>
  • Deleted text <del>
  • Inserted text <ins>
  • Subscripts <sub>
  • Superscripts <sup>

Hyperlink

A hyperlink <a> is an element, a text, or an image that you can click on, and jump to another document(page).

        The link text does not have to be text. It can be an HTML image or any other                 HTML element.

  • The href attribute specifies the destination address or bookmark
  • The target attribute specifies where to open the linked document.
  • The id attribute can be used to create bookmarks inside HTML documents. 
<!-- Opens the linked document in a new window or tab -->
<a href="http://www.your_site.com/" target="_blank">Link text</a>

<!-- Opens the linked document in the same frame as it was clicked (default) -->
<a href="http://www.your_site.com/" target="_self">Link text</a>

<!-- Opens the linked document in the parent frame -->
<a href="http://www.your_site.com/" target="_parent">Link text</a>

<!-- Opens the linked document in the full body of the window -->
<a href="http://www.your_site.com/" target="_top">Link text</a>

<!-- Opens the linked document in a named frame -->
<a href="http://www.your_site.com/" target="framename">Link text</a>

<!--Bookmarks -->

<!-- Add an id attribute to any <a> element -->
<a id="tips">Useful Tips Section</a>

<!-- Then create a link to the <a> element (Useful Tips Section) -->
<a href="#tips">Visit the Useful Tips Section</a>

<!-- Or, create a link to the <a> element (Useful Tips Section) from another page -->
<a href="http://www.your_site.com/page.htm#tips">Visit the Useful Tips Section</a>

Examples

Image

  • Use the HTML <img> element to define images
  • The src attribute defines the url (web address) of the image
  • The alt attribute specifies an alternate text for the image, is required. A web page will not validate correctly without it.
  • Use the HTML width and height attributes to define the image size.
  • For an image, you can create an image map, with clickable areas.

        Image elements do not have a closing tag.

Examples

<!-- Image Syntax -->
<img src="cat.jpg" alt="My cat" width="100" height="100">

<!-- Image in another folder -->
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">

<!-- Image Maps -->
<img src="planets.gif" alt="Planets" usemap="#planetmap"
style="width:150px; height:120px">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Examples

<!-- Links to an alternate version of the document 
(i.e. print page, translated or mirror) -->
<link rel="alternate">

<!-- Links to the author of the document -->
<link rel="author">

<!-- Links to a help document -->
<link rel="help">

<!-- Imports an icon to represent the document. -->
<link rel="icon">

<!-- Links to copyright information for the document -->
<link rel="license">

<!-- Indicates that the document is a part of a series, and that the next document
in the series is the referenced document -->
<link rel="next">

<!-- Specifies that the target resource should be cached -->
<link rel="prefetch">

<!-- Indicates that the document is a part of a series, and that the previous 
document in the series is the referenced document -->
<link rel="prev">

Examples

<!-- Links to a search tool for the document -->
<link rel="search">

<!-- URL to a style sheet to import -->
<link rel="stylesheet">

<!-- The URL of the linked resource/document. -->
<link href="URL">

<!-- A two-letter language code that specifies the language of the linked document -->
<link hreflang="langauge_code">

<!-- The type attribute specifies the Internet media type (formerly known as MIME type)
of the linked document/resource. Complete list of standard media types: 
"http://www.iana.org/assignments/media-types/media-types.xhtml" -->

<link type="media_type">

Table

  • Use the HTML <table> element to define table
  • <th> Defines a header cell in a table
  • <tr> Defines a row in a table
  • <td> Defines a cell in a table
  • <caption> Defines a table caption
  • <colgroup> Specifies a group of one or more columns in a table for formatting
  • <col> Specifies column properties for each column within a <colgroup> element

  • <thead> Groups the header content in a table

  • <tbody> Groups the body content in a table

  • <tfoot> Groups the footer content in a table

Example

List

  • Use the HTML <ul> element to define unordered list.
  • Use the HTML <ol> element to define ordered list.
  • Use the HTML <dl> element to define description list.
  • <ul> Defines an unordered list
  • <ol> Defines an ordered list
  • <li> Defines a list item
  • <dl> Defines a description list
  • <dt> Defines the term in a description list
  • <dd> Defines the description in a description list

        List items can contain new list, and other HTML elements, like images and links,           etc.

Examples

<!-- Unordered List -->
<ul>
    <li>The first item</li>
    <li>The second item</li>
    <li>The third item</li>
    <li>
        <ul>
            <li>The first item</li>
        </ul>
    </li>  
</ul>

<!-- Ordered List -->
<ol>
    <li>The first item</li>
    <li>The second item</li>
    <li>The third item</li>
    <li>The fourth item</li>  
</ol>

<!-- Description List -->
<dl>
    <dt>The first item</dt>
    <dd>Description of item</dd>
    <dt>The second item</dt><dd>Description of item</dd>
</dl>

Form

HTML forms <form> are used to collect user input.

  • accept-charset - Specifies the charset used in the submitted form (default: the page charset).
  • action - Specifies an address (url) where to submit the form
  • autocomplete - Specifies if the browser should autocomplete the form (default: on).
  • enctype - Specifies the encoding of the submitted data 
  • method - Specifies the HTTP method used when submitting the form (default: GET).
  • name - Specifies a name used to identify the form
  • novalidate - Specifies that the browser should not validate the form.
  • target - Specifies the target of the address in the action attribute (default: _self).

Examples

<!-- Form -->
<form action="your_action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

    <!-- Form elements -->

</form>

Form Elements

HTML forms <form> are used to collect user input.

  • <input> - Defines an input control
  • <textarea> - Defines a multiline input control (text area)
  • <label> - Defines a label for an <input> element
  • <fieldset> - Groups related elements in a form
  • <legend> - Defines a caption for a <fieldset> element
  • <select> - Defines a drop-down list
  • <optgroup> - Defines a group of related options in a drop-down list
  • <option> - Defines an option in a drop-down list

  • <button> - Defines a clickable button

  • <datalist> - Specifies a list of pre-defined options for input 

  • <keygen> - Defines a key-pair generator field (for forms)

  • <output> - Defines the result of a calculation

Examples

<!-- Form -->

<form action="your_action_page.php" method="GET">
    <fieldset>
        <legend>Personal information:</legend>
            <label for="firstname">First name:</label>
            <input type="text" id="firstname" name="firstname" value="Ivan">

            <label for="lastname">Last name:</label>
            <input type="text" id="lastname" name="lastname" value="Ivonov">

            <label for="sex">Sex:</label>
            <select name="sex" id="sex">
                <option value="male">Male</option>
                <option value="famale">Famale</option>
            </select>

            <label for="description">Description:<label>    
            <textarea name="description" id="description"></textarea>
            
            <input type="checkbox" id="confirmation" name="description" value="yes">
            <label>Confirmation of participation</label>
            
            <input type="submit" value="Submit">
    </fieldset>
</form>
Made with Slides.com