html

When you have a name like Code Workun, there are inevitably a lot of puns and jokes at your expense.

 

While my name has been abused by a lot of bad puns over the years, today I’m embracing it for the fourth annual National Learn to Code Day (September 24).

While I can’t pretend to be a programmer, all marketers increasingly need to know at least a little HTML. So, in honor of this special day, here are some beginner tips to get your HTML code workun (sorry!).

 

Headings

 

There are six different HTML headings, but you will likely only use the first 3-4. They each have a closing and opening tag that wraps around your desired text. Headings help organize your content for easy readability and skimmability for your users. Additionally, search engines will use headings to index the structure of your pages.

 

HTML Code Preview
<h1>Heading 1</h1>

Heading 1

<h2>Heading 2</h2>

Heading 2

<h3>Heading 3</h3>

Heading 3

<h4>Heading 4</h4>

Heading 4

<h5>Heading 5</h5>
Heading 5
<h6>Heading 6</h6>
Heading 6

Paragraphs

Individual paragraphs are wrapped in between <p> </p> tags. Paragraphs are also used to organize your thoughts and make them easier for users to read. Each paragraph will require its own set of tags. The resulting paragraphs will have a small margin above and below them. It may look something like this:

 

HTML Code Preview
<p>Hello world! This is my first paragraph. Happy National Learn to Code Day.</p> <p>And here is my second paragraph. I hope you’re having a great day.</p> Hello world! This is my first paragraph. Happy National Learn to Code Day.

And here is my second paragraph. I hope you’re having a great day.

Bold and italics

Need to emphasize the text within your paragraph? You can do that by bolding your text using the <strong> </strong> tags, or italicize with the <em> </em> tags.

HTML Code Preview
<p>Hello world! This is my <em>first</em> paragraph. Happy <strong>National Learn to Code Day</strong>.</p> <p>And here is my second paragraph. I hope you’re having a great day.</p> Hello world! This is my first paragraph. Happy National Learn to Code Day.

And here is my second paragraph. I hope you’re having a great day.

Images

Image tags are a little more complicated. Unlike the previous tags, image tags, <img>, do not have a closing tag. SCR, short for “source,” is an HTML attribute. Attributes provide additional information about HTML elements. In this case, SRC contains the image URL.

HTML Code Preview
<img src=”https://www.constant-content.com/blog/wp-content/uploads/2016/08/flower.jpg>

 

The code above will display the image, but there’s still a couple more steps to get your image just right – like specifying width and height. Specifying the dimensions of your image is good coding practice because it reserves page space during page loading. In this case, the original image size is 100×100 pixels but you can also customize the width and height to be whatever size you want.

Tip: Avoid upsizing your images too much. Depending on the quality of your image, it may appear pixelated.

HTML Code Preview
<img src=”https://www.constant-content.com/blog/wp-content/uploads/2016/08/flower.jpg” height=”100” width=”100>
<img src=”https://www.constant-content.com/blog/wp-content/uploads/2016/08/flower.jpg” height=”75” width=”75>
<img src=”https://www.constant-content.com/blog/wp-content/uploads/2016/08/flower.jpg” height=”150” width=”150>

 

Your image can be optimized further with an ALT attribute, also known as alternative attribute. The ALT attribute provides a short description of an image, which helps describe it to users who are using screen readers to access your website, like those that are visually impaired. It also helps boost your SEO by providing a description to search engine crawlers.

HTML Code Preview
<img src=”https://www.constant-content.com/blog/wp-content/uploads/2016/08/flower.jpg” height=”100″ width=”100″ alt=”Cartoon drawing of an orange flower.> Cartoon drawing of an orange flower.

Hyperlinks – Creating Links in Your Text

Hyperlinks have both opening and closing tags, <a></a>, and require an attribute (HREF). The opening and closing tags wrap around the text you want to link and the HREF attribute will specify the desired URL.

HTML Code Preview
<a href=”http://constant-content.com/>Constant-Content</a> Constant-Content

 

This is basic hyperlink code. An additional attribute you may want to consider using is the TARGET attribute. This dictates how the URL will be opened. Target=“_blank” is the most common one which forces hyperlinks to open as new tabs/windows. This is a highly recommended practice for hyperlinks that link to external websites, so you don’t lose web traffic.

HTML Code Preview
<a href=”http://constant-content.com/” target=”_blank>Constant-Content</a> Constant-Content

 

Hyperlinks can be combined to link images, bold and italicized text, headings and entire paragraphs too.

HTML Code Preview
<a href=”http://constant-content.com/” target=”_blank”><img src=”https://www.constant-content.com/blog/wp-content/uploads/2016/08/flower.jpg” height=”100″ width=”100″ alt=”Cartoon drawing of an orange flower.”></a> Cartoon drawing of an orange flower.
<p>Hello world! This is my <a href=”http://constant-content.com/” target=”_blank”><em>first</em></a> paragraph. Happy <a href=”http://constant-content.com/” target=”_blank”><strong>National Learn to Code Day</strong></a>.</p> <a href=”http://constant-content.com/” target=”_blank”><p>And here is my second paragraph. I hope you’re having a great day.</p></a> Hello world! This is my first paragraph. Happy National Learn to Code Day.

And here is my second paragraph. I hope you’re having a great day.

HTML is an Essential Skill

HTML is one of the easiest, most forgiving and fun coding languages to learn. Understanding a little bit of HTML can help when troubleshooting formatting errors within your online content, whether you’re working with WordPress, Blogger, newsletter tools or even your own website. So the next time you upload a piece of content, be sure to switch over to the code editor to take a peek at what goes on behind the scenes.

Anything specific you want to learn about HTML? I’m always looking for new ideas to write about so drop me a line!