HyperText Markup Language (HTML)

Introduction

HTML is the standard markup language for creating Web pages. HTML (HyperText Markup Language) is used to give content to a web page and instructs web browsers on how to structure that content.

What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

HTML Elements

HTML (Hypertext Markup Language) elements are the building blocks of web pages. They are used to structure and present content on the web.

Each HTML element is represented by a tag enclosed in angle brackets (<>) and typically consists of an opening tag, content, and a closing tag. The opening tag indicates the beginning of the element, and the closing tag signifies the end. The content placed between these tags can include text, images, links, and other media, and it is formatted and displayed by web browsers according to the element's purpose and attributes.

HTML elements are essential for defining the structure and layout of web pages, making them the foundation of web development.

Document Metadata

Metadata contains information about the page. This includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or linked to another file that has the information.

Element Description
<base> Specifies the base URL to use for all relative URLs in a document. There can be only one such element in a document.
<head> Contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
<link> Specifies relationships between the current document and an external resource. This element is most commonly used to link to CSS but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
<meta> Represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> and <title>.
<style> Contains style information for a document or part of a document. It contains CSS, which is applied to the contents of the document containing this element.
<title> Defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored.

Content Sectioning

Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.

Element Description
<address> Indicates that the enclosed HTML provides contact information for a person or people, or for an organization.
<article> Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include a forum post, a magazine or newspaper article, a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
<aside> Represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.
<footer> Represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data, or links to related documents.
<header> Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
<hgroup> Represents a heading grouped with any secondary content, such as subheadings, an alternative title, or a tagline.
<main> Represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
<nav> Represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
<section> Represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
<search> Represents a part that contains a set of form controls or other content related to performing a search or filtering operation.

Image and Multimedia

HTML supports various multimedia resources such as images, audio, and video.

Element Description
<area> Defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hyperlink.
<audio> Used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the source element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.
<img> Embeds an image into the document.
<map> Used with <area> elements to define an image map (a clickable link area).
<track> Used as a child of the media elements, audio and video. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles.
<video> Embeds a media player which supports video playback into the document. You can also use <video> for audio content, but the audio element may provide a more appropriate user experience.

Table Content

The elements here are used to create and handle tabular data.

Element Description
<caption> Specifies the caption (or title) of a table.
<col> Defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.
<colgroup> Defines a group of columns within a table.
<table> Represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
<tbody> Encapsulates a set of table rows ( <tr> elements), indicating that they comprise the body of the table (<table>).
<td> Defines a cell of a table that contains data. It participates in the table model.
<tfoot> Defines a set of rows summarizing the columns of the table.
<th> Defines a cell as a header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.
<thead> Defines a set of rows defining the head of the columns of the table.
<tr> Defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.

Forms

HTML provides several elements that can be used together to create forms that the user can fill out and submit to the website or application.

Element Description
<button> An interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it performs an action, such as submitting a form or opening a dialog.
<datalist> Contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
<fieldset> Used to group several controls as well as labels (<label>) within a web form.
<form> Represents a document section containing interactive controls for submitting information.
<input> Used to create interactive controls for web-based forms to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
<label> Represents a caption for an item in a user interface.
<legend> Represents a caption for the content of its parent <fieldset>.
<meter> Represents either a scalar value within a known range or a fractional value.
<progress> Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
<select> Represents a control that provides a menu of options.
<textarea> Represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example, a comment on a review or feedback form.