DEV Community

Cover image for HTML tags (for beginner)

Posted on

HTML tags (for beginner)

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

Alt Text

  • 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"

Top comments (0)