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://cc-west-blog-assets.s3.amazonaws.com/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://cc-west-blog-assets.s3.amazonaws.com/uploads/2016/08/flower.jpg” height=”100” width=”100“> | |
| <img src=”https://cc-west-blog-assets.s3.amazonaws.com/uploads/2016/08/flower.jpg” height=”75” width=”75“> | |
| <img src=”https://cc-west-blog-assets.s3.amazonaws.com/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://cc-west-blog-assets.s3.amazonaws.com/uploads/2016/08/flower.jpg” height=”100″ width=”100″ alt=”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=”https://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=”https://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=”https://constant-content.com/” target=”_blank”><img src=”https://cc-west-blog-assets.s3.amazonaws.com/uploads/2016/08/flower.jpg” height=”100″ width=”100″ alt=”Cartoon drawing of an orange flower.”></a> | |
| <p>Hello world! This is my <a href=”https://constant-content.com/” target=”_blank”><em>first</em></a> paragraph. Happy <a href=”https://constant-content.com/” target=”_blank”><strong>National Learn to Code Day</strong></a>.</p> <a href=”https://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!