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