HTML tags (for beginner)

In this post, I will describe the HTML tags a bit to better remember them.

• b Defines bold text.

• strong Defines important text.

• <!--...--> Defines a comment.

• <!DOCTYPE> Defines the document type.

• html.../html Defines the root of an HTML document.

• head.../head is a container for metadata. (data about data) and is placed between the html tag and the body tag.

  • title.../title (required in every HTML document)
  • style.../style
  • base
  • link

  • meta

    • Define keywords for search engines.

    meta name="keywords" content="HTML, CSS, JavaScript"

    • Define a description of your web page.

    meta name="description" content="Free Web tutorials for HTML and CSS"

    • Define the author of a page.

    meta name="author" content="John Doe"

    • Refresh document every 30 seconds.

    meta http-equiv="refresh" content="30"

    • Setting the viewport to make your website look good on all devices.

    meta name="viewport" content="width=device-width, initial-scale=1.0"

  • script.../script

  • noscript.../noscript

• title.../title defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

• body.../body Defines the document's body.

• h1-h6.../h1-/h6 Defines HTML headings.

• div.../div Defines a section in a document.

• span.../span Defines a section in a document. Span is an inline container used to mark up a part of a text, or a part of a document.
  
  !!!The span tag is much like the div element, but div is a block-level element and span is an inline element.

• img is used to embed an image in an HTML page
  img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"

  • src Specifies the path to the image.
  • alt Specifies an alternate text for the image, if the image for some reason cannot be displayed.
  • width/height Specifies the width/height of an image.

• br Defines a single line break.

• hr Defines a thematic change in the content.

• a Defines a hyperlink.

  • href specifies the URL of the page the link goes to;
  • target (_blank/_parent/_self/_top) specifies where to open the linked document;

• form is used to create an HTML form for user input.

  • label defines a label for several elements. Why to use: 1.Screen reader users (will read out loud the label, when the user is focused on the element). 2.Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the element, it toggles the input (this increases the hit area).
    • for Specifies the id of the form element the label should be bound to;
    • form Specifies which form the label belongs to;
  • input specifies an input field where the user can enter data;
    • type
      • "button"
      • "checkbox"
      • "color"
      • "date"
      • "datetime-local"
      • "email"
      • "file"
      • "hidden"
      • "image"
      • "month"
      • "number"
      • "password"
      • "radio"
      • "range"
      • "reset"
      • "search"
      • "submit"
      • "tel"
      • "text" (default value)
      • "time"
      • "url"
      • "week"
  • select is used to create a drop-down list
    • name is needed to reference the form data after the form is submitted;
    • id is needed to associate the drop-down list with a label;
    • multiple Specifies that multiple options can be selected at once;
    • required Specifies that the user is required to select a value before submitting the form;
  • option defines an option in a select list;
    • value Specifies the value to be sent to a server;
    • selected Specifies that an option should be pre-selected when the page loads;
  • textarea defines a multi-line text input control;
    • rows/cols is specified the size of a text area;
    • name is needed to reference the form data after the form is submitted;
    • id is needed to associate the text area with a label;
    • placeholder Specifies a short hint that describes the expected value of a text area;
  • button defines a clickable button.
    • type to tell browsers what type of button it is;
      • "button"
      • "reset"
      • "submit"