HTML Basics

HTML, or Hypertext Markup Language, is the foundational language used to create and design the basic structure of a webpage. Acting as a cornerstone for any site's layout, HTML uses a series of elements and attributes to organize content, ensuring a consistent and coherent presentation to users.

Understanding Elements and Tags

HTML is comprised of elements, which are defined by tags. Each element generally consists of an opening tag, content, and a closing tag. For example, consider the paragraph element:

This is a paragraph.

Here,

is the opening tag,

is the closing tag, and the text inside is the content.

The Structure of an HTML Document

An HTML document begins with a declaration, which informs the browser about the HTML version used. Following this, the element encapsulates the entire document, consisting of two main sections: the and .

  • Head Section: The element contains metadata about the document, such as its title (shown in the browser tab) and links to stylesheets or scripts. Example:

    
  Example Page

  • Body Section: The element holds all the visible content, including text, images, and links. Example:

    
  
    Welcome to My Page
    
  
    This is the content of the webpage.

Common HTML Elements

  • Headings: Defined by

    to
    , headlines help to establish a hierarchy of content, with

    being the most important.

  • Paragraphs and Text: The

    tag is used for paragraphs, while , , and can define bold, italic, and emphasized text, respectively.

  • Links: Links, or hyperlinks, are created using the tag, defined by an href attribute, pointing to another URL.

    Visit Example

  • Images: The tag displays images and requires a src attribute pointing to the image file's location, alongside an alt attribute for accessibility.

    Description of image

Lists

  • Ordered Lists: Use the

      tag and
    1. for each item, creating a numbered list.

        
  
      1. First item
        2. 
  
      2. Second item
        3.

    2. Unordered Lists: Use the

        tag for bullet points.

          
  
        • First item
          • 
  
        • Second item
          •

      Tables

      Tables are defined with the

      element, with rows created by , and headers and data cells defined with
      and , respectively.

      
    
      
        Header 1
        Header 2
    
      
    
      
        Data 1
        Data 2

      Forms

      Forms collect data from users, using elements like ,