{"id":128322,"date":"2019-03-05T23:03:04","date_gmt":"2019-03-05T22:03:04","guid":{"rendered":"http:\/\/sftarticles.wpenginepowered.com\/en\/?p=128322"},"modified":"2025-07-01T22:16:23","modified_gmt":"2025-07-02T05:16:23","slug":"basic-html-codes","status":"publish","type":"post","link":"https:\/\/cms-articles.softonic.io\/en\/basic-html-codes\/","title":{"rendered":"5 lines of basic HTML that everyone should know"},"content":{"rendered":"<p>We\u2019re more reliant on computers than ever before, whether that\u2019s for work, play, or our latest Netflix binge. That means we should know a little more about how they function, in case anything goes wrong or we just want a better grasp of how things work. If you\u2019re looking to improve your computer knowledge, the following are 5 lines of basic HTML code that you \u2014 and everyone you know \u2014 should learn.<\/p>\n<h2>5 lines of basic HTML that everyone should know<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-131887\" src=\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2021\/05\/code-coding-700.jpg\" alt=\"coding\" width=\"700\" height=\"467\" \/><\/p>\n<h3>1. Add headings for readability<\/h3>\n<p>There are six different heading options to choose from. To create a heading, you pick one of the heading tag options and place it around your text. For example, if you wanted to create a really big heading, you would use the tag &lt;h1&gt;, followed by the text you want to use as a heading, followed by &lt;\/h1&gt;. As the numbers go up, the size of the heading goes down, so H1 is the largest, H2 is smaller, H3 is smaller than that, etc. Knowing how to use various headings is especially important if you\u2019re a content creator or social media manager, because headings play a big role in search engine optimization (SEO).<\/p>\n<h3>2. Text with hyperlinks<\/h3>\n<p>Although Microsoft Word and Google Docs makes this look super easy now, the code for a link is slightly more complicated than\u00a0highlighting your keywords and adding a hyperlink to the text. To add a link to your text with HTML, you\u2019ll want to use the code: &lt;a href=&#8221; &#8220;&gt; &lt;\/a&gt;. For example, the code would look something like this: &lt;a href=&#8221;<strong>[paste URL here]<\/strong>&#8220;&gt;<strong>[Text you want to be linked]<\/strong>&lt;\/a&gt;.<\/p>\n<div class=\"sc-card-starred-link\">\r\n  <div class=\"sc-card-starred-link__body\">\r\n    <div class=\"sc-card-starred-link__row clearfix\">\r\n      <div class=\"sc-card-starred-link__col-logo\">\r\n        <img decoding=\"async\" class=\"sc-card-starred-link__img\" src=\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2018\/11\/code-192.jpg\" width=\"100px\" height=\"100px\">\r\n      <\/div>\r\n      <div class=\"sc-card-starred-link__col-title\">\r\n        <p class=\"sc-card-starred-link__title\">4 free online courses for learning how to code<\/p>\r\n        <a class=\"sc-card-starred-link__button\" href=\"https:\/\/en.softonic.com\/articles\/4-free-online-courses-for-learning-how-to-code\/\" target=\"_blank\" rel=\"noopener noreferrer sponsored\">Read Now \u25ba<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <a class=\"sc-card-starred-link__link\" href=\"https:\/\/en.softonic.com\/articles\/4-free-online-courses-for-learning-how-to-code\/\" target=\"_blank\" rel=\"noopener noreferrer sponsored\"><\/a>\r\n  <\/div>\r\n<\/div>\n<h3>3. Break up text with paragraphs<\/h3>\n<p>This is a simple but useful tag to know. It will help you to quickly structure your page for readability. Here you\u2019ll use the code: &lt;p&gt; &lt;\/p&gt;. Insert the text in between, like this: &lt;p&gt; <strong>[Text for your paragraph]<\/strong> &lt;\/p&gt;.<\/p>\n<h3>4. Make a bullet point list<\/h3>\n<p>Sometimes, you just want to make (and read) a quick, get-to-the-point list. That\u2019s where <a href=\"https:\/\/www.w3schools.com\/html\/html_lists.asp\" target=\"_blank\" rel=\"noopener noreferrer\">bullet points<\/a> come in. To make a list, simply use the code:<\/p>\n<p>&lt;ul&gt;<\/p>\n<p>&lt;li&gt;<strong>[First point]<\/strong>&lt;\/li&gt;<\/p>\n<p>&lt;li&gt;<strong>[Second point]<\/strong>&lt;\/li&gt;<\/p>\n<p>&lt;li&gt;<strong>[Third point]<\/strong>&lt;\/li&gt;<\/p>\n<p>&lt;\/ul&gt;<\/p>\n<div class=\"sc-card-starred-link\">\r\n  <div class=\"sc-card-starred-link__body\">\r\n    <div class=\"sc-card-starred-link__row clearfix\">\r\n      <div class=\"sc-card-starred-link__col-logo\">\r\n        <img decoding=\"async\" class=\"sc-card-starred-link__img\" src=\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2018\/11\/code-coding-192.jpg\" width=\"100px\" height=\"100px\">\r\n      <\/div>\r\n      <div class=\"sc-card-starred-link__col-title\">\r\n        <p class=\"sc-card-starred-link__title\">Best online classes for leveling up your tech skills<\/p>\r\n        <a class=\"sc-card-starred-link__button\" href=\"https:\/\/en.softonic.com\/articles\/best-online-classes-for-leveling-up-your-tech-skills\" target=\"_blank\" rel=\"noopener noreferrer sponsored\">Read Now \u25ba<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <a class=\"sc-card-starred-link__link\" href=\"https:\/\/en.softonic.com\/articles\/best-online-classes-for-leveling-up-your-tech-skills\" target=\"_blank\" rel=\"noopener noreferrer sponsored\"><\/a>\r\n  <\/div>\r\n<\/div>\n<h3>5. Include images for mass appeal<\/h3>\n<p>The most popular blog posts and articles today include images. Although this code is slightly more complicated, the gist of it is: &lt;img src=&#8221; &#8221; alt=&#8221; &#8221; style=&#8221;width:500px;height:600px;&#8221;&gt;. (That code will constrain the image to 500 pixels in width ant 600 pixels in height.)<\/p>\n<p>Next, you\u2019ll add links and texts, or alter the size of the image to fit your needs: &lt;img src=&#8221;<strong>[link to image here]<\/strong>&#8221; alt=<strong>&#8220;[use text to describe image]<\/strong>&#8221; style=&#8221;width:300px;height:300px;&#8221;&gt;. In this case, the width and height numbers would constrain this image to a 300 pixel square.<\/p>\n<p>The \u201calt\u201d section is used for SEO purposes, making this another great piece of code to know for anyone who works online.<\/p>\n<p>If you\u2019re looking to learn more basic code, consider taking a few online classes with <a href=\"https:\/\/www.codecademy.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CodeAcademy<\/a> or <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Udemy<\/a>. It\u2019s guaranteed to come in handy no matter your field \u2014 as long as you use a computer, that is!<\/p>\n<div class=\"sc-card-starred-link\">\r\n  <div class=\"sc-card-starred-link__body\">\r\n    <div class=\"sc-card-starred-link__row clearfix\">\r\n      <div class=\"sc-card-starred-link__col-logo\">\r\n        <img decoding=\"async\" class=\"sc-card-starred-link__img\" src=\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2018\/11\/code-coding-192.jpg\" width=\"100px\" height=\"100px\">\r\n      <\/div>\r\n      <div class=\"sc-card-starred-link__col-title\">\r\n        <p class=\"sc-card-starred-link__title\">Top 3 apps to learn coding<\/p>\r\n        <a class=\"sc-card-starred-link__button\" href=\"https:\/\/en.softonic.com\/articles\/top-3-apps-to-learn-coding\/\" target=\"_blank\" rel=\"noopener noreferrer sponsored\">Read Now \u25ba<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <a class=\"sc-card-starred-link__link\" href=\"https:\/\/en.softonic.com\/articles\/top-3-apps-to-learn-coding\/\" target=\"_blank\" rel=\"noopener noreferrer sponsored\"><\/a>\r\n  <\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A little coding knowledge can really help you online.<\/p>\n","protected":false},"author":9167,"featured_media":128329,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","wpcf-pageviews":1},"categories":[2518,2441],"tags":[1717,1716],"usertag":[],"vertical":[],"content-category":[],"class_list":["post-128322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","category-how-to","tag-coding","tag-html"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/posts\/128322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/users\/9167"}],"replies":[{"embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/comments?post=128322"}],"version-history":[{"count":1,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/posts\/128322\/revisions"}],"predecessor-version":[{"id":326476,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/posts\/128322\/revisions\/326476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/media\/128329"}],"wp:attachment":[{"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/media?parent=128322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/categories?post=128322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/tags?post=128322"},{"taxonomy":"usertag","embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/usertag?post=128322"},{"taxonomy":"vertical","embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/vertical?post=128322"},{"taxonomy":"content-category","embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/content-category?post=128322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}