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.



Intro to troubleshooting HTML in WordPress

Edit a page’s code by toggling from the Visual view to Text view at the top right of the text editor.

visual-text-toggle

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, headers, 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 Text view, 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>
  • Example: A recent <a href=”http://stltoday.com/story-title“> St. Louis Post-Dispatch article</a> reports that….

Anchor links (links within a page)

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

  • Anchor code (assumes heading 2): <h2><a name=”section”></a>Section title</h2>
  • Link code (if on same page): #section
  • See full tutorial below (the long version)

Why use anchors

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 anchors 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.

  • In text view (see above for help switching to text view), 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 name=“anchor-name-here”></a>
  • For example, the anchor for the “Line breaks” subheading on this page is:
    <h2><a name=”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)
    • URL format: http://yoursite.wustl.edu/page-url/#anchor-name-here
    • URL example: https://webtheme.med.wustl.edu/user-guide/wordpress-tutorials/basic-html-codes/#line-breaks
  • Apply the link, then preview the page to test that it works
  • Click Update to save your changes