I want all of my paragraphs to default to “paragraph (p)” so I set the style called “body” to that HTML tag. But I’ve noticed that while I’m typing the tag randomly changes to “Automatic.” It happens every few words, but not predictably. Does anybody know why it does that, and how to stop it? Thanks.
I don’t think Sitely is randomly assigning a different paragraph style. I think what is happening is Sitley’s style assignment now being applied to individual paragraphs, rather than to the text box as a whole. This was a feature introduced in v5 - allowing you to mix different paragraph styles within a single text box.
What is likely happening is that you may be using the enter key to create additional spacing between individual paragraphs. When that happens, it seems that sitely assumes a new paragraph has been created, but because you haven’t defined a style for the new paragraph, it is assigned “Automatic”, which is Sitely’s way of telling you that you haven’t specifically assigned a tag to that paragraph. You can tell if that is the case by looking at the style selector as you click into various places in your text box - particularly if you place the cursor on any blank line you may have added to create paragraph spacing. In most cases you will see that the blank line changes the tag to Automatic, and the style selector will display Body (*). It may also be that any text following such a blank line will also take on the Automatic tag.
To solve the issue, make sure that your body style has Space After set - to maybe 12, or 15, or maybe 18. This will create line spacing between paragraphs without you having to hit the return key several times to create paragraph spacing.
It should be noted that seeing the Automatic tag assignment isn’t a bad thing - it’s probably all being assigned as p unless you manually change it to something else - its simply a reminder to you that the paragraph hasn’t specifically been assigned a tag. If it is of concern to you, just select the whole text box when you’ve finished typing, If the HTML tag is showing multiple just change it to p and everything within the box will have the same tag.
3 Likes
Sitely Styles vs HTML Tags - How Should We Use Them for SEO?
In relation to the question posed in this thread, I thought it best to clarify the relationship between Styles and HTML tags in Sitely, particularly when building pages with good semantic structure and SEO in mind.
My understanding is that the two serve different purposes:
Styles control appearance
A Sitely Style determines how text looks - font, size, weight, colour, line height, spacing, etc.
For example:
- Title
- Heading
- Body
- Caption
HTML tags control meaning and structure
The HTML tag tells the browser and search engines what the text represents:
<h1>- main heading of the page<h2>- major section<h3>- subsection<p>- normal paragraph<ul>/<ol>- lists
The important point is that a Style and an HTML tag are not the same thing.
A Style can have a default HTML tag associated with it for convenience, but the tag can be overridden for an individual use without changing the visual appearance.
Example
Suppose I have a Title Style which is visually large and bold, with its default HTML tag set to <h1>.
At the top of the page I might use:
Title Style + H1
Discover Our Latest Fashion
Later on the same page I might want another heading to have exactly the same visual appearance:
Order Your New Look Today
But I don’t want a second H1.
I can therefore use:
Title Style + P
The text still looks exactly like the Title style, but the HTML remains semantically appropriate.
A good general page structure would therefore be:
H1 – Main subject of the page
P – Introduction
H2 – Major section
P – Text
H3 – Subsection
P – Text
H3 – Another subsection
P – Text
H2 – Another major section
P – Text
The important principle is:
Don’t choose an HTML tag because of how you want the text to look. Choose the tag according to what the text means, and use the Style to control how it looks.
So an H3 doesn’t have to look smaller than an H2, and a piece of text doesn’t have to be an H1 just because you’ve used your Title Style.
In practical Sitely terms
I would therefore aim for:
| Purpose | HTML tag |
|---|---|
| Main page heading | H1 |
| Major section | H2 |
| Subsection | H3 |
| Further subsection | H4 |
| Normal text | P |
| Lists | UL / OL |
Multiple H2s and H3s on a page are perfectly normal. The key is to maintain a logical hierarchy.
This seems to me to be one of the strengths of Sitely: Styles can control the visual design independently from the semantic HTML structure.
I’d be interested to hear how other Sitely users approach this, particularly whether there are any Sitely-specific considerations or best practices I’ve missed.
3 Likes
Wow, thank you for all this information! I’ve watched the HTML code box while typing to see if I can figure out when it flips to “automatic.” There doesn’t appear to be any pattern. It doesn’t usually happen when I hit the hard return. Rather, it switches in the middle of a word, usually.
I’ve been using HTML tags to run embedded code. For example, I’ve used H3 to run this code.
There’s probably a better way to do this, but I don’t know what it is.
Anyway, when the HTML code randomly switches from paragraph to automatic, for some reason it sometimes thinks H3 should be what it automatically selects. Then I end up with a page that looks like this. It’s easy enough to fix, but I shouldn’t have to fix it.
I’m not sure what it is you are attempting to do with the embed code. From what I can see from your screenshot, the embed code is creating a STYLE which you have named h3. This is the wrong way to go. Styles in Sitely are created through the Style panel - there is no need to define them in a piece of embed code - particularly if the code creates a conflicting style.
Typically, in Sitely the appearance of the text is determined by a class in the CSS style sheet. In the html page a piece of text with an h3 tag may look something like this:
In the above example, the style is defined as a combination of p1 and f1. These are styles created by Sitely from information you set up in the style panel.
The h3 bit of the code is simply a tag telling the system that this piece of text is designated as h3 in the page hierarchy - it has no effect on the styling of the text.
If you want to add a new style to your page through embed code (although I don’t really see why you would want to do that), you shouldn’t use tags as the style name. Typically, you only add styling information into a piece of embed code if the code itself is displaying something that has to be styled in particular way - you wouldn’t simply add the new style on its own because it becomes difficult to apply that style in Sitely unless you manually edit the underlying page code.
To better understand this take a look at the text below:
This shows how a browser typically displays text that has NO styling attributes associated with the tags - the browser just natively applies styling. In sitely, that doesn’t happen - the h3 tag will be accompanied by styling attributes which override the default browser behaviour. So, by adding a piece of style code as an embed object on your page, you’re telling the browser to ignore it’s own native styling and to use your styling option instead on any piece of text that has the tag h3.
This may conflict with Sitely’s built in styling that you’ve set for the text itself which can easily cause the effect you’re seeing.
One of the big advantages of Sitely is that it clearly separates text styling from tags. You establish the styling you want through the style panel, and if you want to add a new style you add it through that same panel. You can then add any tag you like to any piece of text regardless of how its been visually styled. If you additionally add styling to a tag itself, you’re likely to run into the sort of problem you’re seeing.
Not a good idea mixing Sitely font styles and html/CSS font styles?
Place all your text in the one text box and then select the text box and assign the style to it… done!
1 Like
I’m sorry I was unclear about what I was trying to do. I uploaded the screenshot of the H3 tag (which was supposed to format the single line between paragraphs) because that’s the one Sitely usually picks when it goes from “paragraph (p)” to “Automatic.”
What I was trying to do by assigning code to the HTML tags was to format a single paragraph within a text box that contains multiple paragraphs. By assigning code to H4, say, and then tagging that paragraph as H4 it automatically looks like this:
I don’t know any other way to do that besides using separate text boxes for each formatted paragraph, which isn’t worth the effort in my opinion. If you know of some other way to accomplish this, I’d love to hear it! Thank you so much for all the great information you’ve shared!
Hi Gary,
I may be missing what your intention is here, but the way I see it at the moment is that issue may be all about paragraph spacing which may be causing tags to change when extra line breaks are being added to create space between paragraphs. From what I understand, you’re hoping that by adding a style to the tags that get created, you can automatically apply a different style to the subsequent paragraph. However, I see it from a different perspective. From what I understand, you need ALL text in a particular text box to have consistent paragraph spacing without actually adding extra lines to create paragraph separation, which may, in turn, lead to a change in tags.
This is easily achieved by simply updating your Body text style to include the spacing you need. In the screenshot below, i’ve set the Space After to 18, so whenever I add a line break, I get a larger space between paragraphs.
Making this change will result in the Body style displaying an asterisk, and giving me the opportunity of updating the Body style:
By applying that change, all Body text in my document will change to reflect the extra space after each Body paragraph - like this:
All the text will now have the same tag (p).
If I now select one of the paragraphs to make it indented (quote), the text box will look like this:
You will then see in the style panel that the tag for the quote text is still (p).
All you now have to do is add the background box behind your quote to add the background colour and left line. Unfortunately, we don’t yet have an option in Sitely to apply that effect as part of the Quote styling, but it’s easily created using a standard box with a fill and left border. The end result is this:
The important thing to note is that all the text within the box has the (p) tag, and no extra line breaks were needed to create paragraph spacing. If you subsequently decide you want your quote text to have an (h3) tag, simply select the quote and change the tag to (h3). doing so will not change the style of the text in any way - it will just be treated as an (h3) in the page hierarchy when crawled by search engines.
If the Space After setting is too large for blocks of text in other parts of your site, simply create a new style named something like Body Normal and rename the modified style Body Large Spacing.
Thanks, Stephie!
What you suggested was actually the first approach I tried. I created text boxes with the background and border I wanted and I positioned them behind the quoted paragraphs. Unfortunately, I found that what you see on the canvas isn’t always what you get on the page, and aligning the text boxes behind the quotes took a LOT of trial-and-error. And once I aligned them for “laptop” I had to align them again for “smartphone.” After that, if I edited the document I had go and realign all the text boxes again. Every time.
That got to be such a pain (some of my documents have a lot of quotations) that I gave it up until I discovered that I could just apply an HTML code to the quoted paragraph and the embedded code assigned to that HTML code would automatically display the quotes the way I wanted. Editing was a breeze because of course the HTML code moved with the paragraph.
There were still problems, unfortunately. Because of the padding necessary to provide a small gray background margin around the quoted paragraph, sometimes the slightly narrower paragraph would cause a line break and an extra line for that paragraph. That wouldn’t show up on the canvas, of course, but it did show up on the generated page. That made it difficult to align images with the text, and to figure out where the footer would appear on the page.
Eventually, I gave up having any special formatting for quotations. I should probably just go and erase all the embedded code. Then if Sitely switches a paragraph to “Automatic” it won’t make any difference.
@Gary, do you have the developer version of sitely? If so, I can send you a small css file that you can add to your project that will style the blockquotes automatically to look like this;
The styling will move with the text and will stay in place on other devices. The only downside of this option is that ALL block quotes will be styled the same in your project. If you don’t mind that limitation, let me know.
1 Like
I have Sitely Pro. I don’t know if that’s the developer version or not, but I’d sure be interested in that CSS code. Then at least I’d have the option. Thanks!
Paste the code below into a plain text editor and save it as blockquote-style.css.
/*
Sitely blockquote styling
The blockquote's existing Sitely typography and indentation are
left completely unchanged.
The decorative panel is inset 20px from the blockquote's left
and right edges, based on the current 40px Sitely indentation.
*/
blockquote {
position: relative;
background: transparent;
}
blockquote::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 20px;
right: 20px;
background-color: #eae8e5;
z-index: -1;
}
blockquote::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 20px;
width: 5px;
background-color: #54639f;
z-index: -1;
}
In Sitely, go to settings and find the section named Developer (bottom of the list). Click on the css section as shown below and add the css file.
Please note, you will only see the styling in preview. Just add the Quote option to any paragraph of text and it will be styled automatically when previewed. All other styling option such as font and indents will be dealt with by Sitely from the style panel as usual.
1 Like
That’s very cool, thank you!