Hello everyone, I’m Al Carmona. I’m with Useractiv, which is a HubSpot website UX design and development company. We help companies get the most out of the HubSpot CMS. So what today’s tip is going to be is this is an intro to HTML markup for non-developers. So just some simple tags that you’re going to see when you’re editing if you’re in charge of editing content in pages in the HubSpot CMS, you may be able to dig a little bit deeper and maybe use some of these tags or know when you shouldn’t be using any tags in your pages. So just to give you an example, I’m going to go into this page right here in the page editor. And this is pretty user friendly, you can just go in here and click on an area, and then it’s going to bring up on the left-hand side an editor, here are your options for this section and you see the copies there. So whenever you change here, you’re going to want to hit apply changes, and then it’ll be reflected in the preview here.
If you make a change then you could hit publish, and then it’ll be live on the site, but otherwise it’s auto saved, whatever changes you make. So what we want to do here is take a peek at what the source code for this section looks like. So this course corresponds to that, and if we click on advanced and we look at the source code here, we’re going to see that it’s that whole big paragraph. And this is called a paragraph tag, and whatever is between the opening and the end tag and if you notice here that this has bracket P and then another bracket, closed bracket, and at the end it’s got the same thing except for one difference. It’s got this forward slash and that just tells the browser that, hey, this paragraph is ending, this formatting or styling is ending, so this is very common.
What a lot of developers will do is that they’ll use this in the style sheet, they’ll make a style for P and maybe a class for that particular module, so that whatever you put in here, it’s already going to be styled the way that you want, or the way the developer was told to do it on the backend. So this is the best-case scenario. So you’re not really screwing up any text by just going in here and just making changes. You see it reflected real-time there and if you click apply then it’s applied and it auto-saves. So what happens if you want to maybe change this and maybe highlight? You could always hover over that and here and the WYSIWYG, which is what you see is what you get, you could click on this and make it bold. Now, if you see in the advanced source code, you see that section has strong. Strong open tag, strong close tag. That really just means to bold whatever’s between the start tag and the end tag.
So what I see a lot, what a lot of content editors do is that they try to style within this editor here, and that could be a mistake because what you have is you have an inconsistency of style throughout pages. If you don’t put it in the style sheet and you try and style each page independently, let’s take this for instance, say we highlight this, right? And this gives you the ability to do it, but I don’t really recommend it. So you could see in this dropdown for more, you could change the font, let’s make it to some really cooky font like Terminal, and then let’s make it like a much bigger thing and then let’s make it a crazy color. Let’s try this and then let’s make it bold. So you could see it here. This is going to be completely different than your style guide or what you have on your site, and it may actually be what’s part of the style guide. If you’re an editor, you may be trying to change it, but what’s going to happen is that you’re going to have to do this for every page.
And if you redesign this page, you’ve got to go in and change this manually instead of just automatically having it changed because it’s changed the style sheet in the backend. So if we go into the source code, this is where you see that change and this is the span. And this is what’s used a lot of the times for developers to front end developers too, change what a particular text block is going to look like. So you see span open tag, and this is the close tag, and then style equals that’s defining how you want this text right here to look. So it says font-family Terminal Monico. Font-size 20 picks, color and then this is the hex value, which translates to a particular color. So this is a no-no styling within paragraphs, you don’t really want to do this. You want to be able to, if anything, if you have the chops, come in here and remove this.
And then ideally from your developer, you’ll have a list of classes that you could use and these classes are in a style sheet that is attached to the template that this page is based on. And hopefully we’ll have more videos about that, but you could have say maybe a class that’s defined by your developer that says paragraph new color, right? And by doing that, it’s much easier if you were to migrate the design of this page and or change the template. As long as this is still the same, you could just change it and it’ll change it for everywhere that it says it’s class, span class. So I’m not going to change it because that class hasn’t been created. But if that were created, that class would just say the same thing it says here.
So instead of having to define it on every single page implicitly, you just use a class and that’s really what CSS or cascading style sheets are for and that’s why you have a developer to make this easier so you have this consistency throughout your website and it’s much easier to change things. So that’s a quick intro, hope that helped about if you are a HubSpot content editor, how to take care of what you’re putting in here. Got a good post there on our blog, which is talking about how to copy-paste, which is a big deal, because a lot of times people will take stuff from word and paste it straight into here, and it copies over a lot of those stylings that you don’t necessarily want in there. So probably we’ll make another video just on that, because that seems to be a pretty big issue for content editors that are using the HubSpot CMS. But hope that helps again and until next time, thanks.