Request-Response

The Full-Stack Blog

HTML Cheatsheet

February 06, 2024
Disponible en español

What Is HTML?

Hypertext Markup Language (HTML) is one of the three cornerstone languages used to develop webpages.

HTML handles the standard markup of a page. Using HTML, we define the basic framework for the page and the elements we want to appear on it.

Here are some of the things we define using HTML:

  • Text elements on the page

  • Images on the page

  • The order in which the elements appear on the page

  • Which text elements are the primary and secondary headings

While HTML decides the framework for a page, HTML does not determine the styling or specific layout. Styling rules are set using CSS. Likewise, HTML does not make the page interactive. That task is handled with JavaScript.

HTML's role in web development is to define the framework for the page.

The following image shows an example of a webpage that uses only HTML:

A screenshot illustrates a basic HTML webpage that features only text without styling.

Note that while all the elements are there, the page lacks styling and interactivity.

HTML Elements

An element is a part of a webpage that holds content or performs a specific task. In HTML, elements often contain information that is visible on the page, such as an image or text. However, not all elements are visible. Some elements contain information that the browser needs to render the page or are used to divide the content on the page in a logical, readable way.

HTML Tags

HTML elements are usually composed of an opening and closing tag. Everything inside the tags is considered part of the element.

Refer to the following code for an example:

<p> This is a paragraph element. </p>

Some elements, though, do not require both opening and closing tags. These special cases are known as void elements, or self-closing tags. Self-closing tags do not contain additional content but might have attributes.

A common void element is the image element <img>.

Another common void element is <br>, which adds a break between other elements.

The HTML Document

All HTML documents follow a similar format, composed of an <html> element that contains a <head> and <body> element. The <head> element contains the metadata on the page. Elements placed inside the <head> are not visible on the page and are meant to provide the information needed for the browser to render the page properly. The <body> contains the elements viewed on the page.

The following code shows an example of <header> and <body> elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


  <header>
      <h1>Sample Webpage</h1>
  </header>


  <section>
      <h2>My List</h2>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
  </section>


  <section>
      <h2>My Paragraph</h2>
         <p>This is my paragraph text.</p>  
  </section>
    
</body>
</html>

Head Elements

The following elements are included in the <head> element:

  • The <title> element is required in every HTML document. The title element provides a metadata name for the page.

  • The <style> element is used to embed CSS and contains the CSS rules needed to style the page.

  • The <link> element defines the relationship between the current page and an external source.

  • The <meta> element defines metadata for the page.

  • The <script> element is used to embed JavaScript on the page.

  • The <noscript> element defines the content to be displayed if scripts are disabled.

Body Elements

The following elements are commonly used in the <body> to create the visible page:

  • The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> elements represent the level of heading that a given text block represents. Headings are exactly what they sound like: larger or more prominent elements of text on a page -- like topic sentences in a paper.

  • The <p> element represents paragraphs or blocks of text. You'll use this element extensively to wrap most of the text on your webpages.

  • The <strong> and <em> elements can respectively bold or italicize a given text element.

  • The <br> element creates a line of empty space between two blocks of content.

  • The <img> element displays images on a page. The syntax differs slightly (refer to the next section) for this element.

  • The <a> element (or anchor element) creates links to the same webpage or to other webpages. Again, the syntax differs slightly.

  • The <ul>, <ol>, and <li> elements represent unordered lists, ordered lists, and list items. In essence, these HTML elements represent bulleted lists of symbols or numbers.

Semantic Elements

Semantic elements are often used to divide a page. Semantic elements have names that describe the section. It is important to use semantic elements when possible, to help make your code more readable. In addition, using structural, semantic HTML is key to making your page accessible to users that use an assistive device to access the page.

The following are common semantic elements:

  • The <article> element is used to contain an independent piece of content, such as a blog post or widget.

  • The <aside> element is used to contain content that often appears to one side and provides extra information about the page's topic.

  • The <details> element is used for additional details that the user can open or hide on demand.

  • The <figcaption> element is used to define a caption for a figure or image.

  • The <figure> element is used to define an image. It is often used with <figcaption>.

  • The <footer> element is used to define the footer on the page.

  • The <header> element is used to define the page's header.

  • The <main> element is used to define the primary content and is often used with <aside> to define primary and secondary content.

  • The <nav> element is used to define the area of the page with navigation links.

  • The <section> element is used to group content that can stand on its own in its own section.

Attributes

HTML attributes are used to provide additional information about an element. All elements -- including void elements -- can accept attributes.

Global Attributes

Global attributes are attributes that can be used on any element, although they might not have an impact on or change some elements.

The following are common global attributes:

  • The data-* forms a class of attributes that allows the element to interact with the DOM. When using the data-* the placeholder * is replaced by the name of class you want to create. For example, to create a data class named columns, data-columns would be used.

  • The dir attribute determines the direction of the attribute. Often used with languages that are read from left to right.

  • The lang attribute determines the language for the element.

  • The style attribute contains CSS styling declarations that will apply to that element.

  • The class attribute groups one or more elements.

  • The id attribute identifies a single element.

Non-Global Attributes

Other elements can be used only with specific elements. Here is a list of some of the common element-specific attributes:

  • The alt attribute identifies text to be shown if the element cannot be displayed. Primarily used with images.

  • The href attribute is used primarily with <link> and <a> to define the URL of a linked resource.

  • The placeholder attribute is used primarily with <input> and <textarea> to provide a hint suggesting that information should be entered.

  • The src attribute is primarily used with <audio>, <img>, <input>, and <script> to define URLs of embeddable content.

  • The value attribute is used primarily with <button>, <data>, <input>, and <li> to assign a value to the element.

Resources

The elements and attributes listed above are just some of tools you can use to build a page using HTML. For more information about HTML, elements, and attributes, you can refer to the following resources:

This page was updated 6 months ago
© 2022 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved.

Category: HTML

Tagged under: html, elements, cheatsheet, HTML attributes, HTML template, Semantic elements,

All Posts