{"id":1035,"date":"2019-06-17T10:28:37","date_gmt":"2019-06-17T07:28:37","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=1035"},"modified":"2026-04-01T15:53:38","modified_gmt":"2026-04-01T12:53:38","slug":"mistake","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/mistake\/","title":{"rendered":"11 Popular CSS &#038; HTML Mistakes People Still Make"},"content":{"rendered":"<p><strong>Let\u2019s start with the quote by Douglas Engelbart, an early computer and web space pioneer known for his work on founding the human-computer interaction field. It says that &#8220;the digital revolution is far more significant than the invention of writing or even printing&#8221;. You may or may not believe these words, but let\u2019s be honest! The impact the technical progress has on our lives is impressive. With it, each part of the user\u2019s everyday routine became easier, quicker, and simpler. <a href=\"\/html-editor\/\">The online HTML editor<\/a> will guarantee that your markup is always clean and error-free.<\/strong><\/p>\n<p><!--more--><\/p>\n<p>You can see the results of the digital revolution literally everywhere! Just take a closer look at the modern world. All the products are easy-to-get when all the services are wholly customer-oriented. Business people all over the globe put a lot of effort to make their companies as prospect-friendly as possible. Now, you can buy whatever you need and find any information without a hitch. Actually, a handy gadget and Internet connection are all you will need.<\/p>\n<p>There is no business niche which was able to avoid the changes the innovations brought. It looks like, in 2019, the digital progress reached its peak. What used to be complicated and expensive becomes affordable and easy-to-use. Do you remember the days when you had to pay big money and hire a developer to build a primitive landing page? Today, you can choose from multiple <a href=\"https:\/\/www.templatemonster.com\/best-selling-website-templates\/?aff=html-online\" target=\"_blank\" rel=\"nofollow noopener\">best-selling website templates<\/a>, and voila!<\/p>\n<p>So, if you are on this page, you are most likely going to run a website. No wonder, in 2019, it is a #1 must-have for business and even personal promotions. Latest technologies allow people to design groundbreaking projects in a painless way. However, when it comes to HTML and CSS, many beginners still make the same mistakes. According to the <a href=\"https:\/\/www.sitepoint.com\/study-errors-beginners-make-learning-html-css\/\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">study<\/a>, there are 3 main kinds of errors:<\/p>\n<ul>\n<li>70.9% of them belongs to skill-based mistakes,<\/li>\n<li>16.9% are rule-based ones,<\/li>\n<li>and 12.1% are knowledge-based errors.<\/li>\n<\/ul>\n<p>In case working with website templates made you feel hooped, don\u2019t panic so fast! In this post, I\u2019ll teach you how to avoid the repeating HTML- &amp; CSS-related mistakes.<\/p>\n<h3>#1 Messy CSS Organization<\/h3>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/css-organization.jpg\" alt=\"css styling mess\"><\/p>\n<p>One of the common mistakes users make when writing <a href=\"https:\/\/html-css-js.com\/css\/editor\/\">CSS is weak structuring<\/a>. They mostly focus on content and website visual elements instead of organising styles in a logical way. Usually, beginners write up their CSS in the order they think of them. As a result, users can\u2019t find a style declaration when it is time to change it.<\/p>\n<p>So, here is my #1 tip for those who are about to write CSS: always organise your code! Such a step will save time and facilitate the working process. How should you do that? I recommend you to structure CSS according to the organization of HTML you work on. For example:<\/p>\n<ul>\n<li>header,<\/li>\n<li>body,<\/li>\n<li>sidebar,<\/li>\n<li>and footer.<\/li>\n<\/ul>\n<h3>#2 Wrong Block Elements Placing<\/h3>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/placing-blocks.jpg\" alt=\"inline blocks\"><\/p>\n<p>This widespread HTML website building mistake also relates to the organisation. Long story short, by default, an HTML element will be displayed as Block or Inline. And that\u2019s the problem! Although we live in the age of smart technologies, a lot of users place block elements inside the inline ones.<\/p>\n<p>To avoid the mistake, note that:<\/p>\n<ul>\n<li>block elements make up the structure of your document, e.g. paragraphs or divs,<\/li>\n<li>inline elements belong to the blocks, e.g. tags and anchors.<\/li>\n<\/ul>\n<p>Inline elements reside in blocks, but they are not the same. You should never put blocks within inline components.<\/p>\n<h3>#3 Missing DOCTYPE<\/h3>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/missing-doctype.jpg\" alt=\"missing doctype\"><\/p>\n<p>For starters, DOCTYPE shows different browsers your current version of HTML. Without it, you can\u2019t be sure the code is valid. When there\u2019s no DOCTYPE, the browser starts making assumptions. In this case, the result of your work can be not so lucrative you have imagined.<\/p>\n<p>To avoid it, you need to follow the next tips.<\/p>\n<ol>\n<li>Use DOCTYPE, no matter which kind of HTML you have.<\/li>\n<li>Always place it in the first line of the code source.<\/li>\n<li>Be careful because DOCTYPE is case-sensitive.<\/li>\n<li>Create a blank doc template to save your DOCTYPE so that it will be close at hand.<\/li>\n<li>Get use of some <a href=\"https:\/\/badhtml.com\/html-validation\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML validators<\/a> and <a href=\"https:\/\/html-css-js.com\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS tools<\/a> to find possible loopholes.<\/li>\n<\/ol>\n<h3>#4 Missing ALT Text<\/h3>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/missing-alt.jpg\" alt=\"no alt\"><\/p>\n<p>As you can see, DOCTYPE is not the only thing people regularly miss when working with HTML website building. It comes for ALT attribute as well! Keep in mind, any image you add to site content must have ALT text. Why?<\/p>\n<ol>\n<li>ALT text is meant to describe what is on your picture, like &lt;img src=&#8221;image.png&#8221; alt= &#8220;image description &#8221; class=&#8221;&#8221;&gt;.<\/li>\n<li>IMG tags require these attributes.<\/li>\n<li>Users but mostly screen readers use ALTs to understand if the image is vital.<\/li>\n<li>When appropriately used, ALT text lets spiderbots better index your content.<\/li>\n<\/ol>\n<h3>#5 Forgetting About Print Stylesheet<\/h3>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/forgetting-about-print-stylesheet.jpg\" alt=\"print styles\"><\/p>\n<p>Although it\u2019s easy to include a print stylesheet in website code, users often miss this step. You need it to style the online project on printed pages. Here is how it looks: &lt;link rel =&#8221;stylesheet&#8221; href =&#8221;print.css&#8221; media =&#8221;print&#8221; \/&gt;.<\/p>\n<p>Basically, with the help of print stylesheet, you can:<\/p>\n<ul>\n<li>hide elements you don\u2019t want printed,<\/li>\n<li>reset the background colour to white,<\/li>\n<li>provide alternative fonts for paragraphs to make them fit the paper format, and much more.<\/li>\n<\/ul>\n<h3>#6 Code Tables Carefully<\/h3>\n<p class=\"aligncenter\"><a href=\"https:\/\/divtable.com\/\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/code-tables-carefully.jpg\" alt=\"div html tables\"><\/a><\/p>\n<p>The best is to avoid table tags and use <a href=\"https:\/\/divtable.com\/table-styler\/\">structured divs instead<\/a>. Among the common culprits of the wrong HTML, I want to highlight tables. People think browsers turn a blind eye to it. Yet, when it comes to assistive technologies, the incorrectly coded tables can ruin your reputation. Here are the most popular table mistakes users make in 2019:<\/p>\n<ul>\n<li>they don\u2019t close th and other tags,<br \/>\n<table><\/table>\n<\/li>\n<li>place tables within the inline elements,<\/li>\n<li>insert &lt;td&gt;\u2019s outside of &lt;tr&gt;,<\/li>\n<li>and create tables with various numbers of cells in a row.<\/li>\n<\/ul>\n<h3>#7 Neglecting Character Encoding<\/h3>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/character-encoding.jpg\" alt=\"character codes\"><\/p>\n<p>As the name of the point says, the next popular HTML mistake refers to missing <a href=\"https:\/\/html-css-js.com\/html\/character-codes\/\">character encoding<\/a>. To put it briefly, no matter what your website was made for, any web page must define its current character set. The thing is that these sets show browsers which characters you use in the page.<\/p>\n<p>Needless to say, character sets vary, depending on the language of the website. With it, the English-languaged pages and the ones with Chinese characters will have completely different sets. Seeing that, you can\u2019t miss character encoding! It explains to browsers and assistive devices which kind of data they should read and display.<\/p>\n<h3>#8 Styling Content Before Choosing Default Fonts And Colors<\/h3>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/styling-content-before-choosing-default-fonts.jpg\" alt=\"default fonts\"><\/p>\n<p>This mistake is popular among the owners of online portfolios, galleries, and other websites based on visual content. Such projects always have numerous illustrations with the creator\u2019s name in the middle of the screen. Also, they come with supporting text.<\/p>\n<p>Would you like to get it? There is nothing complicated. Here is your HTML:<\/p>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/image10.jpg\" alt=\"fonts and colors\"><\/p>\n<p>Once you are through it, you will want to add different classes or writing selectors. Does it sound familiar? In this case, I want you to stop right now because here is another common coding mistake. You should never style content before you <a href=\"\/articles\/what-is-typography-and-its-role-in-html\/\">have chosen typography<\/a> it will come with. By the way, before adding new content to the site, you need to set up <a href=\"https:\/\/rgbcolorcode.com\/\">default colours<\/a> too!<\/p>\n<p>Here are a few recommendations for you:<\/p>\n<ul>\n<li>default size of your fonts should be 16px &#8211; 20px,<\/li>\n<li>1.5 &#8211; 1.85 would be a nice default line-height,<\/li>\n<li>avoid full black #000000 when it comes to colours (you can replace it with dark grey),<\/li>\n<li>for the page background, white #ffffff is a conventional choice,<\/li>\n<li>to turn down the contrast for the page background, use slightly-off-white colours, like #f9f9f9.<\/li>\n<\/ul>\n<h3>#9 Missing Basic Tags<\/h3>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/missing-basic-tags.jpg\" alt=\"basic tags\"><\/p>\n<p>Keep in mind that all head content (e.g. &lt;title&gt;, &lt;meta&gt;, &lt;style&gt;) requires these basic tags:<\/p>\n<ul>\n<li>&lt;head&gt;<\/li>\n<li>&lt;\/head&gt;<\/li>\n<\/ul>\n<h3>#10 Missing Close Tags<\/h3>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/missing-close-tags.jpg\" alt=\"close html tags\"><\/p>\n<p>So, here is one more common HTML trouble. When some beginners forget about all basic tags, others miss the close ones, like:<\/p>\n<ul>\n<li>&lt;\/ body&gt;,<\/li>\n<li>&lt;\/ p&gt;,<\/li>\n<li>&lt;\/ html&gt;.<\/li>\n<\/ul>\n<h3>#11 Using The Wrong HTML Extension For Image Tags<\/h3>\n<p class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/wrong-extension-for-image-tags.jpg\" alt=\"image extensions\"><\/p>\n<p>To finish with, let\u2019s pay attention to this popular HTML extension &#8211; align=absmiddle. Yep, it\u2019s commonly used all around the globe. Nevertheless, it doesn\u2019t make the attribute suitable for all purposes. Note, align=absmiddle is not what you need to create a proper HTML for the image tag!<\/p>\n<p>Can you see something like &lt;img src = &#8220;image.gif&#8221; align = &#8220;absmiddle&#8221;&gt;in your code? Well, it should be fixed tho! Although many browsers support the extension, with it, your HTML becomes incorrect. I recommend you to use <strong>align=middle<\/strong> instead.<\/p>\n<h3>Final Thought<\/h3>\n<p>As you can see, there are many repeating mistakes HTML users make in 2019. Some of them are not as critical as others. And some can ruin your site in a drop of a hat. All in all, to get success, you should have a clean, valid, and semantic code. With the named points, it won\u2019t be possible, even if your mistakes are the small ones.<\/p>\n<p>By tradition, I saved a couple of tips for last. Here are additional HTML and CSS recommendations to check out.<\/p>\n<ul>\n<li>Never use &lt;blink&gt;and &lt;marquee&gt;.<\/li>\n<li>Don\u2019t use multiple breaks to show a list.<\/li>\n<li>Besides, don\u2019t use multiple line breaks at all.<\/li>\n<li>For bolding, use &lt;strong&gt;, not &lt;b&gt;.<\/li>\n<li>Stop adding\/removing the border attribute in HTML.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Let\u2019s start with the quote by Douglas Engelbart, an early computer and web space pioneer known for his work on founding the human-computer interaction field. It says that &#8220;the digital revolution is far more significant than the invention of writing or even printing&#8221;. You may or may not believe these words, but let\u2019s be honest! &hellip; <a href=\"https:\/\/html-online.com\/articles\/mistake\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;11 Popular CSS &#038; HTML Mistakes People Still Make&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,4],"tags":[],"class_list":["post-1035","post","type-post","status-publish","format-standard","hentry","category-css","category-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>11 Popular CSS &amp; HTML Mistakes People Still Make + Tips To Avoid Them<\/title>\n<meta name=\"description\" content=\"each part of the user\u2019s everyday routine became easier, quicker, and simpler. The online HTML editor will guarantee that your markup is always clean\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/mistake\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"11 Popular CSS &amp; HTML Mistakes People Still Make + Tips To Avoid Them\" \/>\n<meta property=\"og:description\" content=\"each part of the user\u2019s everyday routine became easier, quicker, and simpler. The online HTML editor will guarantee that your markup is always clean\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/mistake\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-17T07:28:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-01T12:53:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/css-organization.jpg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/mistake\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/mistake\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"11 Popular CSS &#038; HTML Mistakes People Still Make\",\"datePublished\":\"2019-06-17T07:28:37+00:00\",\"dateModified\":\"2026-04-01T12:53:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/mistake\/\"},\"wordCount\":1582,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/mistake\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/css-organization.jpg\",\"articleSection\":[\"CSS\",\"HTML\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/mistake\/\",\"url\":\"https:\/\/html-online.com\/articles\/mistake\/\",\"name\":\"11 Popular CSS & HTML Mistakes People Still Make + Tips To Avoid Them\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/mistake\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/mistake\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/css-organization.jpg\",\"datePublished\":\"2019-06-17T07:28:37+00:00\",\"dateModified\":\"2026-04-01T12:53:38+00:00\",\"description\":\"each part of the user\u2019s everyday routine became easier, quicker, and simpler. The online HTML editor will guarantee that your markup is always clean\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/mistake\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/mistake\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/mistake\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/css-organization.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/css-organization.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/mistake\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"11 Popular CSS &#038; HTML Mistakes People Still Make\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"11 Popular CSS & HTML Mistakes People Still Make + Tips To Avoid Them","description":"each part of the user\u2019s everyday routine became easier, quicker, and simpler. The online HTML editor will guarantee that your markup is always clean","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html-online.com\/articles\/mistake\/","og_locale":"en_GB","og_type":"article","og_title":"11 Popular CSS & HTML Mistakes People Still Make + Tips To Avoid Them","og_description":"each part of the user\u2019s everyday routine became easier, quicker, and simpler. The online HTML editor will guarantee that your markup is always clean","og_url":"https:\/\/html-online.com\/articles\/mistake\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2019-06-17T07:28:37+00:00","article_modified_time":"2026-04-01T12:53:38+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/css-organization.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/mistake\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/mistake\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"11 Popular CSS &#038; HTML Mistakes People Still Make","datePublished":"2019-06-17T07:28:37+00:00","dateModified":"2026-04-01T12:53:38+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/mistake\/"},"wordCount":1582,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/mistake\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/css-organization.jpg","articleSection":["CSS","HTML"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/mistake\/","url":"https:\/\/html-online.com\/articles\/mistake\/","name":"11 Popular CSS & HTML Mistakes People Still Make + Tips To Avoid Them","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/mistake\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/mistake\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/css-organization.jpg","datePublished":"2019-06-17T07:28:37+00:00","dateModified":"2026-04-01T12:53:38+00:00","description":"each part of the user\u2019s everyday routine became easier, quicker, and simpler. The online HTML editor will guarantee that your markup is always clean","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/mistake\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/mistake\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/mistake\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/css-organization.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2019\/06\/css-organization.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/mistake\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"11 Popular CSS &#038; HTML Mistakes People Still Make"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/1035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=1035"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/1035\/revisions"}],"predecessor-version":[{"id":2603,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/1035\/revisions\/2603"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=1035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=1035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=1035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}