HTML overview

(TODO) NEED SOME INTRO

1. HTML structure

    <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
      </head>
      <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
        ...
        ..
        .
      </body>
    </html>
  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the document
  • The <title> element specifies a title for the document
  • The <body> element contains the visible page content
  • The <h1> element defines a large heading

  • The <p> element defines a paragraph

    The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

    It must only appear once, at the top of the page (before any HTML tags).

    The <!DOCTYPE> declaration is not case sensitive.

    The <!DOCTYPE> declaration for HTML is:

    The <html> element defines the whole document.

    It has a start tag <html> and an end tag </html>.

    The element content is another HTML element (the <body> element).

    The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

    HTML metadata is data about the HTML document. Metadata is not displayed.

    Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

    The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.

    <body> link

    The <body> element defines the document body.

    It has a start tag <body> and an end tag </body>.

    The element content is two other HTML elements (<h1> and <p> etc.).

2. Elements

  • HTML Elements

    An HTML element usually consists of a start tag and end tag, with the content inserted in between:

    <tagname>Content goes here...</tagname> The HTML element is everything from the start tag to the end tag:

    <p>My first paragraph.</p>

  • Block-level Elements

    A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

    The <div> element is a block-level element. Examples of block-level elements:

    <div>

    <h1> - <h6>

    <p>

    <form>

  • Inline Elements

    An inline element does not start on a new line and only takes up as much width as necessary.

    This is an inline <span> element inside a paragraph. Examples of inline elements:

    <span>

    <a>

    <img>

results matching ""

    No results matching ""