UW Brand

HTML and shortcode cheat sheet

This page contains commonly used basic HTML codes used for custom features in the WordPress CMS.

Headers

<h1> ... </h1>
This heading should be used for the title of the page.
<h2> ... </h2>
Secondary header used to signify a lower level of grouped text.
<h3> ... </h3>
Tertiary header used to signify the lowest level of grouped text.

Dividing content

<br>
Add to create extra space in between content.
<hr />
Inserts a line to visualize content division.

Insert image (w/ alignment)

<img class="Assign image alignment"
src="Image source/link to display"
alt="Image description (for accessibility)"/>
Insert an image using the <img> tag. Include the source of the image, the alignment, and the alt text (for accessibility).
class="alignleft"
Left-align image by marking class as “alignleft” in the image tag.
class="alignright"
Right-align image by marking class as “alignright” in the image tag.

Link text and image

<a href="insert URL">Text
that's linked</a>
Link any text to other site pages, documents, or external sites.
<a href="URL when image is clicked">
<img class="Assign image alignment"
src="Image source/link to display"
alt="Image description (for accessibility)"/>
</a>
Link images to site pages, documents, or external sites, by providing the image source and the url linked to the image. Note to add in image description for accessibility!

More about hyperlinks

Tiles

[box]
[tile]
...
[/box]
[/tile]
The [box] ... [/box] creates a row to add in tiles, with each set of [tile] ... [/tile] indicating the number of tiles to be added in each row.
<div><img="Image link to display"
alt="Description of image"/></div>
Use this line of code inside [tile] ... [tile] to add images inside a tile. Note that including <div> ... </div> is crucial in order to have the image width stretch into the tile.

Button

[button url="leading link when button
is clicked"]button label[/button]
Insert buttons by including the URL linking other pages and the button title. This is one way to engage users to learn more of a topic.

More about buttons

Accordion

[accordion]
[section title='section name']
...
[/section]
[/accordion]
Organize large loads of information by categorizing them into sections. Create an accordion using [accordion] ... [/accordion], then add in a set of [section title='section name'] ... [/section] for each section and its respective contents in the accordion.

Anchor tags

<h2 id="anchorTagName">
header title</h2>
The first method to attach anchor tags is to label headers (H1, H2, H3) to automatically navigate users to a specific part of a page, as highlighted.
<a name="anchorTagName">
anchored text</a>
Another method is to tag non-header texts in the <a> ... </a> tag, as highlighted.
www.sitename.com/path/#anchorTagName
To distribute site pages containing anchor tags, follow and share this template URL.