HTML (HyperText Markup Language) is one of the most important foundations on the web. It’s the markup language that’s used for creating websites. The content and settings of a website can be found in our HTML.

The two primary structural components in HTML are the body and the head. Both of these are used by all  web browsers to render the structure and settings of a webpage.

 

Body

Inside the body is where all content on a website is stored. For example, a heading, paragraph, and image are all written as different tags (element types) in the body, where they get rendered by the browser. 

 

In this example we're hand-coding HTML to demonstrate how it gets rendered by the browser. These tags and all the code you see will get created for you automatically when you're adding this type of content using Webflow.

Head

This is where the page settings are defined—all the information about a website is held here. Here are a few things you can find in the head:

Title tag—the title that appears when a website is shown in Google search results.

Meta tags—the description that will appear below the title in Google search results.

CSS—the markup that gives HTML elements’ their styles (e.g. height, color, font-size, etc). Without CSS we would see all the content stacked vertically with no structure or styling, like in a text document.

Open Graph tags—consists of the image and description that appears when a site is shared (e.g. Twitter, Facebook, etc).

 

In the Webflow UI

In Webflow, settings like the Title, Meta Description, and Open Graph are all editable in the Pages Panel. CSS is created when you select an element on the canvas and use the Style Panel.

We'll use the Webflow interface to preview how this will look and function, so we don't have to worry about scanning HTML or CSS files for ninety minutes only to find that we forgot to close out a tag in line 4722. Instead, we can focus entirely on creating content.