new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Understand the two major structural elements of HTML — the body and the head — and how they work together to display the content of web pages and tell both browsers and visitors about the page and its topic. Plus find out how Webflow handles these two aspects and gives you control over them.

Clone this projectDownload project assetsDownload lesson assets

Transcript

As we already know, HTML is one of the most important foundations on the web. And when you look at a webpage, most of the time the content… and the settings on that page…can be found in our HTML.

And there are two primary structural components in our HTML. We have the body (which contains our content) and we have the head (which contains our page settings).

In the body, we can store content like headings. Anything we put inside a heading? That becomes a heading. If we put in a paragraph, that becomes a paragraph. Same with images—if  we add an image to our body? That gets rendered by the browser, too.

Now...it's important to note here that while we're hand-coding this to demonstrate how the HTML gets rendered by the browser, these tags and all this the code you see in this video will get created for you automatically when you're adding this type of content using Webflow.

But that's the body. Contains our content.

Up next, let's talk about the head. This is where our page settings go. It's where we bring in all the information about the webpage we're on. Things like the title tag. If you make a change in the title tag, it can make its way over to Google.

   

We also have some pretty common meta tags like description. Which is often used by Google in our search results.

The head also gives us the flexibility to bring in additional content— like custom HTML, CSS, or some of the more specific Open Graph tags.

So. We have the body, which contains the content for our page, and we have the head, which contains the settings for our page.

These two structural components apply to all web browsers when they're loading up your webpage: Chrome or Firefox or Edge or Safari or Internet Explorer 3.0 on Windows 95.

What we're doing in Webflow is visually creating and manipulating the content in our body and the settings in our head. And we'll use the Webflow interface to preview how this will look and function, so we don't have to worry about scanning our code 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.