HTML Tips and Tricks¶
When writing blog posts or folding particular features into your site, you may need to integrate some short snippets of HTML code. We’ve included a few that are commonly used in blogs.
Bold¶
Embolden text using the syntax:
<b> This text is bold </b>
Ex. This text is bold
Italicize¶
Italicize text using the syntax:
<i> This text is italicized </i>
Ex. This text is italicized
Superscript¶
Add superscript using the following syntax:
<p>This is <sup>superscripted</sup> text.</p>
Ex.
This is superscripted text.
Span text¶
Serves as a way to color words in a text block The code you will use to color in your words will look like this:
<span style="color:blue">your words</span>
Ex. your words
Adjust the color after the colon depending on the need.
Ordered lists¶
Ordered lists use the syntax of starting with <ol> and each item uses <li>
For example:
<ol>\
<li>Coffee</li>\
<li>Tea</li>\
<li>Milk</li>\
</ol>
Ex.
- Coffee
- Tea
- Milk
Unordered lists¶
Unordered lists use the syntax of starting with <ul> and each item uses <li>
For example:
<ul>\
<li>Coffee</li>\
<li>Tea</li>\
<li>Milk</li>\
</ul>
Ex.
- Coffee
- Tea
- Milk
Setting external links¶
If you need to link to a specific external page, you will do so by adding a specific line of code similar to the one for span text above. To embed external links, integrate them this way:
<a href="url">link text</a>
Ex. not a real link
NOTE:
- For blog and story posts: the visual text editor can also be used for external links by selecting the link options section and pasting the link to which you want the page to navigate.
Setting internal links¶
For internal links (links to other pages on your site) you will use a forward slash “/” in your syntax Practically, it may look like this:
<a href="/about">check out our about page!</a>
For nested pages, include multiple “/”
<a href="/about/ourstory">check out our story!</a>
Essentially, you are just adding the URL that shows up after the domain name for a page!
NOTES:
- For most purposes on the site you will have the option to choose from the list of internal pages via a dropdown menu. This section largely applies to blog or story posts.
- For blog and story posts: the visual text editor can also be used for internal links by selecting the link options section and choosing the page to which you want to link.
Line breaks¶
These are simple assets that provide a break in your text. This is very similar to pressing “enter” after a paragraph in a document. The syntax for line breaks is:
<br>
Anchor links¶
Anchor links jump the user to a different section of the page that they are currently on. This is helpful if you have a longer page or piece of text that you want the visitor to be able to navigate to quickly.
These can be a bit more complex than standard links as they require setting a landing ID and also the trigger that will cause the action (The link to the ID).
You can also use these HTML custom anchors in conjunction with the anchor blocks included in your site editor.
First, set your ID by adding it after your text qualifier. For example:
<h2 id=”example”> example anchor </h2>
Second, set the activation link in much the same way as standard internal links but by using a # instead:
<a href="/url#example">jump to the example</a>
It is also possible to use the visual editor by typing #example into the URL box under link options
Here is a helpful resource if you are having trouble integrating this particular link type: https://visualcomposer.com/blog/what-is-anchor-link/