{"id":6133,"date":"2016-09-23T04:00:54","date_gmt":"2016-09-23T11:00:54","guid":{"rendered":"https:\/\/www.constant-content.com\/blog\/?p=6133"},"modified":"2023-12-04T14:55:20","modified_gmt":"2023-12-04T22:55:20","slug":"learn-to-code-with-code-basic-html-for-content-creators","status":"publish","type":"post","link":"https:\/\/www.constant-content.com\/content-writing-service\/2016\/09\/learn-to-code-with-code-basic-html-for-content-creators\/","title":{"rendered":"Learn to Code with Code: Basic HTML for Content Creators"},"content":{"rendered":"

When you have a name like Code Workun, there are inevitably a lot of puns and jokes at your expense.<\/p>\n

While my name has been abused by a lot of bad puns over the years, today I\u2019m embracing it for the fourth annual National Learn to Code Day (September 24).<\/p>\n

While I can\u2019t 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!).<\/p>\n

Headings<\/span><\/h3>\n

There are six different HTML headings<\/a>, 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<\/a> for your users. Additionally, search engines will use headings to index the structure of your pages.<\/p>\n\n\n\n\n\n\n\n\n\n
HTML Code<\/strong><\/td>\nPreview<\/strong><\/td>\n<\/tr>\n
<h1<\/span>><\/span>Heading 1<\/span><\/h1<\/span>><\/span><\/td>\n\n

Heading 1<\/span><\/h2>\n<\/td>\n<\/tr>\n

<h2<\/span>>Heading 2<\/span><\/h2<\/span>><\/span><\/td>\n\n

Heading 2<\/span><\/h2>\n<\/td>\n<\/tr>\n

<h3<\/span>>Heading 3<\/span><\/h3<\/span>><\/span><\/td>\n\n

Heading 3<\/span><\/h3>\n<\/td>\n<\/tr>\n

<h4<\/span>>Heading 4<\/span><\/h4<\/span>><\/span><\/td>\n\n

Heading 4<\/span><\/h4>\n<\/td>\n<\/tr>\n

<h5<\/span>>Heading 5<\/span><\/h5<\/span>><\/span><\/td>\n\n
Heading 5<\/span><\/h5>\n<\/td>\n<\/tr>\n
<h6<\/span>>Heading 6<\/span><\/h6<\/span>><\/span><\/td>\n\n
Heading 6<\/span><\/h6>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/span><\/h3>\n

Paragraphs<\/span><\/h3>\n

Individual paragraphs are wrapped in between <p<\/span>> <\/p<\/span>><\/span> 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:<\/p>\n\n\n\n\n
HTML Code<\/strong><\/td>\nPreview<\/strong><\/td>\n<\/tr>\n
<p<\/span>>Hello world! This is my first paragraph. Happy National Learn to Code Day.<\/span><\/p<\/span>> <p<\/span>>And here is my second paragraph. I hope you\u2019re having a great day.<\/span><\/p<\/span>><\/span><\/td>\nHello world! This is my first paragraph. Happy National Learn to Code Day.<\/p>\n

And here is my second paragraph. I hope you\u2019re having a great day.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/span><\/h3>\n

Bold and italics<\/span><\/h3>\n

Need to emphasize the text within your paragraph? You can do that by bolding your text using the <strong<\/span>> <\/strong<\/span>><\/span> tags, or italicize with the <em<\/span>> <\/em<\/span>><\/span> tags.<\/p>\n\n\n\n\n
HTML Code<\/strong><\/td>\nPreview<\/strong><\/td>\n<\/tr>\n
<p<\/span>>Hello world! This is my<\/span> <em<\/span>>first<\/span><\/em<\/span>> paragraph. Happy<\/span> <strong<\/span>>National Learn to Code Day<\/span><\/strong<\/span>>.<\/span><\/p<\/span>> <p<\/span>>And here is my second paragraph. I hope you\u2019re having a great day.<\/span><\/p<\/span>><\/span><\/td>\nHello world! This is my first<\/em> paragraph. Happy National Learn to Code Day<\/strong>.<\/p>\n

And here is my second paragraph. I hope you\u2019re having a great day.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/span><\/h3>\n

Images<\/span><\/h3>\n

Image tags are a little more complicated. Unlike the previous tags, image tags, <img>, do not have a closing tag. SCR, short for \u201csource,\u201d is an HTML attribute. Attributes provide additional information about HTML elements. In this case, SRC contains the image URL.<\/p>\n\n\n\n\n
HTML Code<\/strong><\/td>\nPreview<\/strong><\/td>\n<\/tr>\n
<img<\/span> src=”<\/span>https:\/\/cc-west-blog-assets.s3.amazonaws.com\/uploads\/2016\/08\/flower.jpg<\/span>“<\/span>><\/span><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The code above will display the image, but there\u2019s 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.<\/p>\n

Tip<\/strong>: Avoid upsizing your images too much. Depending on the quality of your image, it may appear pixelated.<\/p>\n\n\n\n\n\n\n
HTML Code<\/strong><\/td>\nPreview<\/strong><\/td>\n<\/tr>\n
<img src=”https:\/\/cc-west-blog-assets.s3.amazonaws.com\/uploads\/2016\/08\/flower.jpg” height=”100<\/span>” width=”100<\/span>“<\/span>><\/span><\/td>\n<\/td>\n<\/tr>\n
<img src=”https:\/\/cc-west-blog-assets.s3.amazonaws.com\/uploads\/2016\/08\/flower.jpg” height=”75<\/span>” width=”75<\/span>“<\/span>><\/span><\/td>\n<\/td>\n<\/tr>\n
<img src=”https:\/\/cc-west-blog-assets.s3.amazonaws.com\/uploads\/2016\/08\/flower.jpg” height=”150<\/span>” width=”150<\/span>“<\/span>><\/span><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Your image can be optimized further with an ALT attribute<\/a>, 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<\/a>.<\/p>\n\n\n\n\n
HTML Code<\/strong><\/td>\nPreview<\/strong><\/td>\n<\/tr>\n
<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.<\/span>“<\/span>><\/span><\/td>\n\"Cartoon<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/span><\/h3>\n

Hyperlinks \u2013 Creating Links in Your Text<\/span><\/h3>\n

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.<\/p>\n\n\n\n\n
HTML Code<\/strong><\/td>\nPreview<\/strong><\/td>\n<\/tr>\n
<a<\/span> href=”<\/span>https:\/\/constant-content.com\/<\/span>“<\/span>>Constant-Content<\/span><\/a<\/span>><\/span><\/td>\nConstant-Content<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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=\u201c_blank\u201d 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\u2019t lose web traffic.<\/p>\n\n\n\n\n
HTML Code<\/strong><\/td>\nPreview<\/strong><\/td>\n<\/tr>\n
<a href=”https:\/\/constant-content.com\/” target=”_blank<\/span>“<\/span>>Constant-Content<\/a><\/span><\/td>\nConstant-Content<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Hyperlinks can be combined to link images, bold and italicized text, headings and entire paragraphs too.<\/p>\n\n\n\n\n\n
HTML Code<\/strong><\/td>\nPreview<\/strong><\/td>\n<\/tr>\n
<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.”><\/span><\/a><\/span><\/td>\n\"Cartoon<\/a><\/td>\n<\/tr>\n
<p>Hello world! This is my<\/span> <a href=”https:\/\/constant-content.com\/” target=”_blank”><em>first<\/em><\/a> paragraph. Happy<\/span> <a href=”https:\/\/constant-content.com\/” target=”_blank”><strong>National Learn to Code Day<\/strong><\/a><\/span>.<\/p><\/span> <a href=”https:\/\/constant-content.com\/” target=”_blank”><p>And here is my second paragraph. I hope you\u2019re having a great day.<\/p><\/span><\/a><\/span><\/td>\nHello world! This is my first<\/em><\/a> paragraph. Happy National Learn to Code Day<\/strong><\/a>.<\/p>\n

And here is my second paragraph. I hope you\u2019re having a great day.<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/span><\/h3>\n

HTML is an Essential Skill<\/span><\/h3>\n

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\u2019re 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.<\/p>\n

Anything specific you want to learn about HTML? I\u2019m always looking for new ideas to write about so drop me a line!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

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\u2019m embracing it for the fourth annual National Learn to Code Day (September 24).<\/p>\n","protected":false},"author":26,"featured_media":6135,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[255,54],"tags":[196,180,54,140],"yoast_head":"\nLearn to Code with Code: Basic HTML for Content Creators - Constant Content<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.constant-content.com\/content-writing-service\/2016\/09\/learn-to-code-with-code-basic-html-for-content-creators\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn to Code with Code: Basic HTML for Content Creators - Constant Content\" \/>\n<meta property=\"og:description\" content=\"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\u2019m embracing it for the fourth annual National Learn to Code Day (September 24).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.constant-content.com\/content-writing-service\/2016\/09\/learn-to-code-with-code-basic-html-for-content-creators\/\" \/>\n<meta property=\"og:site_name\" content=\"Constant Content\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-23T11:00:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-04T22:55:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cc-west-blog-assets.s3.amazonaws.com\/uploads\/2016\/09\/html.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.constant-content.com\/content-writing-service\/#website\",\"url\":\"https:\/\/www.constant-content.com\/content-writing-service\/\",\"name\":\"Constant Content\",\"description\":\"The Constant Content Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.constant-content.com\/content-writing-service\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.constant-content.com\/content-writing-service\/2016\/09\/learn-to-code-with-code-basic-html-for-content-creators\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/cc-west-blog-assets.s3.amazonaws.com\/uploads\/2016\/09\/html.jpg\",\"width\":1200,\"height\":700},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.constant-content.com\/content-writing-service\/2016\/09\/learn-to-code-with-code-basic-html-for-content-creators\/#webpage\",\"url\":\"https:\/\/www.constant-content.com\/content-writing-service\/2016\/09\/learn-to-code-with-code-basic-html-for-content-creators\/\",\"name\":\"Learn to Code with Code: Basic HTML for Content Creators - Constant Content\",\"isPartOf\":{\"@id\":\"https:\/\/www.constant-content.com\/content-writing-service\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.constant-content.com\/content-writing-service\/2016\/09\/learn-to-code-with-code-basic-html-for-content-creators\/#primaryimage\"},\"datePublished\":\"2016-09-23T11:00:54+00:00\",\"dateModified\":\"2023-12-04T22:55:20+00:00\",\"author\":{\"@id\":\"https:\/\/www.constant-content.com\/content-writing-service\/#\/schema\/person\/d67b56bd15c15efb7f8e6bbe5c0d7ec1\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.constant-content.com\/content-writing-service\/2016\/09\/learn-to-code-with-code-basic-html-for-content-creators\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.constant-content.com\/content-writing-service\/#\/schema\/person\/d67b56bd15c15efb7f8e6bbe5c0d7ec1\",\"name\":\"Constant Content\",\"sameAs\":[\"https:\/\/www.constant-content.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.constant-content.com\/content-writing-service\/wp-json\/wp\/v2\/posts\/6133"}],"collection":[{"href":"https:\/\/www.constant-content.com\/content-writing-service\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.constant-content.com\/content-writing-service\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.constant-content.com\/content-writing-service\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.constant-content.com\/content-writing-service\/wp-json\/wp\/v2\/comments?post=6133"}],"version-history":[{"count":6,"href":"https:\/\/www.constant-content.com\/content-writing-service\/wp-json\/wp\/v2\/posts\/6133\/revisions"}],"predecessor-version":[{"id":79613,"href":"https:\/\/www.constant-content.com\/content-writing-service\/wp-json\/wp\/v2\/posts\/6133\/revisions\/79613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.constant-content.com\/content-writing-service\/wp-json\/wp\/v2\/media\/6135"}],"wp:attachment":[{"href":"https:\/\/www.constant-content.com\/content-writing-service\/wp-json\/wp\/v2\/media?parent=6133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.constant-content.com\/content-writing-service\/wp-json\/wp\/v2\/categories?post=6133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.constant-content.com\/content-writing-service\/wp-json\/wp\/v2\/tags?post=6133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}