Basic HTML Code Snippets

RESULT

This side renders the end-result that you want in your website, email or social media.

This is a an H1 Title

This is an H2 Gray Subtitle

This is an H3 Header that is common in many blog posts

This is a sentence with BOLD, Italic, and Underlined text.

Here is a paragraph with light-gray text link and a link that goes to another website. More HTML code can be found by clicking the button at the bottom of this post.

This is blockquote for text emphasis.

CODE

This side contains the HTML code. Copy each section between the [code] and [/code] tags.

[code]

<h1>This is a an H1 Title</h1>

<h2 style="color: #999; font-size: 40px; font-weight: 600;">This is an H2 Gray Subtitle</h2>
<h3>This is an H3 Header that is common in many blog posts</h3>

<p>This is a sentence with <strong>BOLD</strong>, <em>Italic</em>, and <u>Underlined</u> text.</p>

<p style="color:lightgray;"> Here is a paragraph with light-gray text link and a link that goes to <span style="text-decoration: underline;"><a style="text-decoration: underline;" href="https://blackriflecoffee.com" target="_blank" rel="noopener">another website</a></span>. More HTML code can be found by clicking the button at the bottom of this post.</p>

<blockquote>This is blockquote for text emphasis.</blockquote>

[/code]

RESULT

This side displays a common photo insert for your blog. You WILL need to know your where the image is hosted or uploaded to your website.

A really cool source to use for Placeholder Photos is: https://placeimg.com/

CODE

This side contains the HTML code. Copy each section between the [code] and [/code] tags.

[code]

<img src="https://placeimg.com/640/480/animals" />

[/code]

RESULT

This side displays a common photo insert for your blog. You WILL need to know your where the image is hosted or uploaded to your website.

Manually ADD A PHOTO to your social media text, email, or other online destination.

CODE

This side contains the HTML code. Copy each section between the [code] and [/code] tags.

[code]

<figure align="center">
    <img src="https://yourwordpresswebsitedomain.com/wp-content/uploads/photo-name.jpg" alt="Photo description for SEO" class="img-fluid" style="border:10px solid lightgrey;" title="describe this photo in detail"/>	
    <figcaption align="center">Custom Caption</figcaption>
</figure>

[/code]