home
No code to 
<know code>

Basic HTML for Webflow

Hypertext markup language is how documents are displayed in web browsers.

"Hyper" means "over" or "beyond" and is used here in the mathematical idea of a 4 dimensional analogy of a 3 dimensional object. A hypercube is a 4 dimensional cube, for example. So, relating this to text (which is probably 2 dimensional), hypertext is about overcoming the linear restraints of written text. In other words - links. As we know, the web is all about the links.

What about "markup"? Well, that's just a way of saying "putting the code around the text to make it display how you want". You want a big heading? We've got an <h1> for you. You want a quotation to stand out on the page? We've got <blockquote> for you.

A simple HTML example

Here is some very simple HTML

<body>
<h1> A simple HTML example</h1>
<p> Here is some very simple HTML</p>
<body>

We need to learn 2 words, tag and element.
Tags are the code that changes the look of the content or performs an action.
Elements include the opening tag, the content and the closing tag. Almost all elements need an opening <> and a closing </> tag.

The <body> element contains all the contents of an HTML document.
The <h1> tag contains the heading. Without the closing tag, the whole document would be styled as a heading. The <p> tag is for paragraph styles.

The great thing about Webflow is that all the code happens automatically.
You can create a new page and Webflow creates a <body> tag.
Add an Element (A) > Heading and you get the <h1> tag.
Add an Element (A) > Paragraph and there it is, a <p> tag.

You think and work in natural language, and Webflow writes the HTML code for you.

Why do I need to know about HTML?

Because you don't want your page to look like this

Basic HTML for Webflow Hypertext markup language is how documents are displayed in web browsers. "Hyper" means "over" or "beyond" and is used here in the mathematical idea of a 4 dimensional analogy of a 3 dimensional object. A hypercube is a 4 dimensional cube, for example. So, relating this to text (which is probably 2 dimensional), hypertext is about overcoming the linear restraints of written text. In other words - links. As we know, the web is all about the links. What about "markup"? Well, that's just a way of saying "putting the code around the text to make it display how you want". You want a big heading? We've got an <h1> for you. You want a quotation to stand out on the page? We've got <blockquote> for you. A simple HTML example Here is some very simple HTML <body><h1> A simple HTML example</h1><p> Here is some very simple HTML</p><body> We need to learn 2 words, tag and element. Tags are the code that changes the look of the content or performs an action. Elements include the opening tag, the content and the closing tag. Almost all elements need an opening <> and a closing </> tag. The <body> element contains all the contents of an HTML document. The <h1> tag contains the heading. Without the closing tag, the whole document would be styled as a heading. The <p> tag is for paragraph styles.  The great thing about Webflow is that all the code happens automatically. You can create a new page and Webflow creates a <body> tag. Add an Element (A) > Heading and you get the <h1> tag.Add an Element (A) > Paragraph and there it is, a <p> tag.You think and work in natural language, and Webflow writes the HTML code for you.

Without the HTML there is no formatting. When you, or a Google search bot, or a screen reader tries to understand the page, it's very hard to know what's important.

Having clear headings, paragraphs, tables and blockquotes helps turn the data into information. Use Webflow well and you'll get great HTML. But it's quite easy to get things wrong too.

Next time you drag something from the Elements (A), remember you are writing code. Check out the page on this website to give you ideas on the best way to do that.