What is HTML?

HTML (HyperText Markup Language) is the foundation of web pages. It's a language that tells the browser what elements to display, such as headings, paragraphs, images, links, and buttons. Think of HTML like the framing and drywall of a house, providing the structure for the content.

HTML uses tags to organize content. For example:

• <h1> creates a large heading
• <p> creates a paragraph of text
• <img> embeds an image
• <a> creates a clickable link

Each piece of content or element on a webpage is surrounded by these tags, which give the browser instructions on how to display the content.

What about CSS?

CSS (Cascading Style Sheets) is used alongside HTML, but it focuses on styling the content. While HTML handles what is displayed, CSS defines how it looks — like colors, fonts, spacing, and positioning. If HTML is like the framing of a house, CSS is the paint and decor that gives the house its look and feel. 

While we’ll briefly touch on CSS and styling, the main focus of this course is on building pages with HTML elements.

What are Elements?

In Webflow, Elements are the building blocks of a page. They represent individual pieces of content or layout, such as text, images, buttons, and containers, that you can drag and drop onto your canvas to design and structure a website.

Although you don't need to know HTML to use Webflow, every element you place on a page represents HTML code — Webflow is simply writing it for you behind the scenes. For example, when you add a Paragraph element, <p> tags are created in your site’s code. 

Understanding how HTML is used to build pages in Webflow is crucial for designing in a smart and scalable way. It also helps you conceptualize how to combine these building blocks to create custom layouts.

For example, to create a hero section (the large banner typically seen at the top of a homepage), you might:

1. Start with a Section (<div>) to define the space. 
2. Place a Container (<div>) inside to center the content. 
3. Place a Div Block (<div>) inside to group your content elements.
4. Add a Heading (<h1>) (like “Welcome to Our Site”).
5. Add a Paragraph (<p>) for a short description.
6. Add an Image (<img>) to give it visual impact.
7. Add a Button (<a>) for a call-to-action (e.g., “Sign up now”).

Parent vs. child elements

When elements are placed inside of other elements, it’s called nesting. An element that contains another element is referred to as the parent. An element that’s nested inside another element is referred to as the child.

So in our above example, the Div Block is parent to the Heading, which is its child.

Ready for more?

Click Complete & continue in the Course progress box on the right to keep learning.

Need help finding your way around? Learn how to navigate Webflow University lessons, courses, and learning paths, including how to mark items complete.