Basic HTML Code for WordPress

If something on a page doesn't appear quite right and you understand the basics of HTML, the easiest solution can be to look for rogue tags in the code.

Using WordPress does not require knowledge of HTML coding, but knowing the basics can help if something goes awry.

We recommend starting with blocks and using HTML only if needed to troubleshoot or add anchor links. WashU Web Theme usage guidelines disallow use of HTML to customize the theme. Furthermore, the WashU Sites Support Team is unable to assist with issues caused by the use of code beyond the basics described below.

Jump to a section below:

Intro to troubleshooting HTML in WordPress

Edit a block’s code by selecting the More options kabob (it looks like three dots) from the top toolbar of the block. Click Edit as HTML.

Screenshot showing where the Edit as HTML option is

You can also view and edit code for the entire page by toggling to the Code Editor in the top right corner of your screen (More tools & options kabob > Code Editor). In most cases, however, editing the HTML of only the block is easier and preferred.

Most HTML commands are placed in <angle brackets> and require two tags: The first turns a command on, and the second uses a forward slash to turn it off.

<strong>For example, “strong” tags are making this sentence bold.</strong>

The styles throughout your website are already set to ensure that all fonts, headings, links, bullet points and other features are consistent. Please use these predefined styles, rather than manually bolding, underlining, changing font colors and text sizes, etc.

Subheadings

  • Heading 2: <h2>Level 2 Header</h2>
  • Heading 3: <h3>Level 3 Header</h3>

Typeface

  • Bold: <strong>bolded text</strong>
  • Italics: <em>italicized text</em>

Extra paragraph spaces (non-breaking space)

Sometimes extra paragraph spaces inexplicably appear on a page, most often between body text and another element like an image, accordion, table or horizontal rule. These extra spaces are called non-breaking spaces, abbreviated &nbsp; in HTML. To get rid of them, simply switch to Edit as HTML, find the &nbsp; and delete it.

  • &nbsp;
  • No brackets or closing tag

Line breaks (soft return)

The easiest way to include a line break, also known as a soft return, is to hold shift + return, which can be done even when in Visual view. In HTML, a line break appears as:

  • <br>
  • No closing tag

Links

  • <a href=”URL“>link text</a>

For example, this code:

A <a href="http://source.wustl.edu/story-title">recent study</a> reports that ...

Displays as:
A recent study reports that …

An anchor link, also called a jump link, takes users to a specific section of a page. For example, many pages on this site — including this page — have anchor links at the top so users can “jump” directly to a section.

If you’re editing a page with blocks, adding anchor links is easy! Just follow these instructions.

However, if you’re editing content that doesn’t use blocks, you’ll need to add those anchors the old-fashioned way, using HTML.

Quick guide to HTML for anchor links

If you know the concept, here are the CliffsNotes. If you’d like more guidance, see the full tutorial below.

1. Set the anchor (code below assumes anchor is a heading 2): 

<h2><a id="section"></a>Section title</h2>

2. Add the link:

  • #section (if on same page)
  • https://website.edu/page/#section (if on a different page)

Why use anchor links

Anchor links can help you avoid adding unnecessary short pages to your site. On this site, they serve as a de facto table of contents for many pages. Anchors are also useful for building glossary or index pages (for example, see the A – Z Index on the School of Medicine site).

Just keep in mind: Jumping to an anchor link can be disorienting for users, especially if the link points to an anchor on a different page.

How to add anchor links and jumps (the long version)

Creating a jump/anchor link is a two-step process.

Step 1: Place the anchor
The “anchor” is the spot on the page you’re linking to.

  • Switch the block to Edit as HTML (see directions above), locate where you need to insert the anchor; ideally, you’ll anchor at a subheading, such as an <h2> (for Heading 2):
    <h2>This is a subheading</h2>
  • Place your cursor inside the heading tag:
    <h2>↘This is a subheading</h2>
  • Add this code, using a descriptive name with no spaces:
    <a id=“anchor-name-here”></a>
  • For example, the anchor for the “Line breaks” subheading on this page is:
    <h2><a id=”line-breaks”></a>Line breaks</h2>

Step 2: Add the jump
After the anchor has been added, you can link to it. This link can be on the same page as the anchor or a different page.

  • Highlight the link text and click the link button, just as you would to add any other link.
  • If the link is on the same page as the anchor, enter the URL as a pound sign followed by the anchor name (no spaces):
    • URL format: #anchor-name-here
    • URL example: #line-breaks
  • If the link is on a different page from the anchor, enter the page URL, followed by the pound sign and the anchor name (no spaces)
  • Apply the link, then preview the page to test that it works.
  • Click Update to save your changes.