HTML tags

In Webflow, HTML tags give us an easy way to control the default styling for a particular element.

In Webflow, HTML tags give us an easy way to control the default styling for a particular element, without creating a unique class. For example, you can define the default styles for all paragraphs by editing the All Paragraphs tag. Adding a class with styles will override these default styles.

HTML tags are an extraordinary way to make changes to common elements like headings, paragraphs, text links, images, et cetera (which is Latin for "and the rest"). As we already know, with any paragraph selected, we can go in and modify the default way paragraphs are styled in a project by opening up the All Paragraphs tag. Simply make a change — like the default paragraph line height, or maybe something like margin. And this will apply — this change will affect all paragraphs in the project by default.

What we want to do in this video is show off this project. It's a simple project. With one page. And on that one page is a section. In that section is a ton of content. A bunch of elements.

But there's one more thing about this page: none of the elements have classes. (There aren't any classes to add styling.) And this is on purpose. What we'll do is select the section, and copy it.

Over on another project, we have this blank page.

And we'll simply paste in the section. Now. Why are we doing this? What benefit do we have? Well, we now have at least one of each common element that has a tag we can style. So we can get all our tags that we plan to use in this project set up — this saves us a ton of work so we don't have to create separate classes each and every time we want to set something. Like this All Paragraphs tag we're styling now.

Now that we've styled our All Paragraphs tag, let's go to another page in the project and have a look. Let's drop a few paragraphs in. We can simply place in one paragraph, then copy and  paste it a couple times. And as we can see, it looks great. Because the line height, the margin — everything we changed before in the tag? It's being inherited. Of course, it's being inherited from the All Paragraphs tag.

And that's it! One quick, final note: the only tag we're not showing here is the Body (All Pages) tag. Since you can't copy/paste a page's body, we can simply make changes there from any page in the project by going over to the page's body then selecting the Body (All Pages) tag. These are top-level changes that will be inherited by any children of the body, unless they have styling that overrides this. The Body (All Pages) tag, among other things, is amazing for changing the default font.

But that's using copy/paste and HTML tags to set the default styling for all sorts of elements in a project.