{"id":1307,"date":"2019-07-20T09:27:52","date_gmt":"2019-07-20T09:27:52","guid":{"rendered":"https:\/\/www.copahost.com\/blog\/?p=1307"},"modified":"2026-08-12T23:57:42","modified_gmt":"2026-08-12T23:57:42","slug":"what-is-html","status":"publish","type":"post","link":"https:\/\/www.copahost.com\/blog\/what-is-html\/","title":{"rendered":"What is HTML? Explaining the Hyper Text Markup Language"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">HTML (HyperText Markup Language) is the standard language used to structure the content of web pages. Virtually every website on the internet is built on HTML \u2014 it&#8217;s the foundation the entire web is built on. This guide explains what HTML is, how it works, its basic tags, and how it fits together with CSS and JavaScript to create the pages you see in your browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#What_is_HTML_and_how_it_works\" >What is HTML and how it works?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#How_to_write_HTML\" >How to write HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#The_structure_of_an_HTML5_page\" >The structure of an HTML5 page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#Basic_HTML_tags\" >Basic HTML tags<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#HTML_tag\" >HTML tag<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#Head_tag\" >Head tag<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#Body_tag\" >Body tag<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#Img_tag\" >Img tag<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#HTML5_semantic_elements\" >HTML5 semantic elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#CSS_Cascading_style_sheets\" >CSS: Cascading style sheets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#A_brief_history_of_HTML\" >A brief history of HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#From_HTML_file_to_live_website_hosting\" >From HTML file to live website: hosting<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#Frequently_asked_questions_about_HTML\" >Frequently asked questions about HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_HTML_and_how_it_works\"><\/span>What is HTML and how it works?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML (HyperText Markup Language) describes the <strong>structure and content<\/strong> of a web page \u2014 its headings, paragraphs, images, links, lists, and so on. It does <em>not<\/em> control how the page looks; that&#8217;s the job of CSS. A common misconception is that HTML defines the visual appearance of a page, but its real role is to define <em>what<\/em> the content is and how it&#8217;s organized, leaving the styling to CSS and the interactivity to JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML works through <strong>tags<\/strong>: pieces of markup that label each part of the content so the <a href=\"https:\/\/www.copahost.com\/blog\/the-difference-between-web-browser-and-web-server\/\">browser<\/a> knows how to interpret and display it. An HTML file is saved with the <code>.html<\/code> extension, and the browser reads it to render the page you see. On its own, an HTML document is plain and unstyled \u2014 <strong>CSS<\/strong> is added to make it look attractive, and <strong>JavaScript<\/strong> is used for interactivity and user actions. But HTML is the foundation: it defines the structure everything else builds on.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"What is HTML? What is HTML used for?\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/ClSBmCrGSDo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_write_HTML\"><\/span>How to write HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML is one of the easiest web languages to learn, because it&#8217;s a markup language rather than a programming language \u2014 there&#8217;s no complex logic, just tags that label content. A <strong>tag<\/strong> is created by writing the tag name between a less-than sign (<code>&lt;<\/code>) and a greater-than sign (<code>&gt;<\/code>). Most tags come in pairs: an opening tag and a closing tag, where the closing tag includes a slash (<code>\/<\/code>) before the name. Here&#8217;s the most basic example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The first line opens the tag; the second closes it. Tags can also be <strong>nested<\/strong> inside one another \u2014 but a child tag must always be closed before its parent:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;body&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Here the <code>body<\/code> tag sits inside the <code>html<\/code> tag, and it&#8217;s closed before the <code>html<\/code> tag is closed. A few tags have no closing tag at all \u2014 for example, the <code>img<\/code> tag (used to insert an image), which is self-contained:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"photo.jpg\" alt=\"A photo\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">It helps to know three related terms. A <strong>tag<\/strong> is the markup itself, like <code>&lt;p&gt;<\/code>. An <strong>element<\/strong> is the whole thing \u2014 the opening tag, the content, and the closing tag together, like <code>&lt;p&gt;Hello&lt;\/p&gt;<\/code>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And an <strong>attribute<\/strong> is extra information placed inside the opening tag, like <code>src<\/code> or <code>alt<\/code> in <code>&lt;img src=\"photo.jpg\" alt=\"A photo\"&gt;<\/code>. Tags mark up the content, elements are the building blocks, and attributes configure them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_structure_of_an_HTML5_page\"><\/span>The structure of an HTML5 page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every modern HTML page follows a standard skeleton. Here&#8217;s what a complete, minimal HTML5 document looks like:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Page title&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h1&gt;Hello, world!&lt;\/h1&gt;\n  &lt;p&gt;This is my first web page.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result-1024x576.png\" alt=\"An HTML document shown as code on the left and the rendered result on the right, with the title in the head connected to the browser tab and the body content connected to the visible page\" class=\"wp-image-5902\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result-1024x576.png 1024w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result-300x169.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result-768x432.png 768w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result-1536x864.png 1536w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result.png 1672w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Each part has a role: <code>&lt;!DOCTYPE html&gt;<\/code> tells the browser this is HTML5; <code>&lt;html lang=\"en\"&gt;<\/code> wraps the whole document and declares its language; <code>&lt;head&gt;<\/code> holds information <em>about<\/em> the page (not shown in the content); <code>&lt;meta charset=\"UTF-8\"&gt;<\/code> sets the character encoding so text displays correctly; the <code>viewport<\/code> meta tag makes the page responsive on mobile; <code>&lt;title&gt;<\/code> sets the name shown in the browser tab; and <code>&lt;body&gt;<\/code> contains everything the visitor actually sees. This skeleton is the starting point for every web page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Basic_HTML_tags\"><\/span>Basic HTML tags<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML has a large number of tags. It isn&#8217;t necessary to memorize them all \u2014 the basic tags below are the foundation, and understanding them is enough to start building pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"HTML_tag\"><\/span><strong>HTML tag<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The most basic tag is the <code>&lt;html&gt;<\/code> tag. It tells the browser the document is HTML and acts as the root that contains all other tags. A typical document holds two main sections inside it \u2014 the head and the body:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;head&gt;\n..\n&lt;\/head&gt;\n&lt;body&gt;\n..\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Head_tag\"><\/span><strong>Head tag<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>&lt;head&gt;<\/code> tag comes right after the opening <code>&lt;html&gt;<\/code> tag. It holds information about the page that isn&#8217;t displayed directly in the content area \u2014 such as the title, scripts, styles, and links. Common elements placed inside it include <code>&lt;title&gt;<\/code>, <code>&lt;script&gt;<\/code>, <code>&lt;style&gt;<\/code>, and <code>&lt;link&gt;<\/code>. In the example below, the head contains a title and a style block:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt; This is the title of the page &lt;\/title&gt;\n&lt;style&gt;\nbody{\nbackground-color: red\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In the below picture, look at the top left corner. This is the title I specified inside the head tag. Also, I changed the <a href=\"https:\/\/www.copahost.com\/blog\/html-background-color\/\">background color<\/a> to red by using a style tag inside the head.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1918\" height=\"1028\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht3.png\" alt=\"Red screen in HTML\" class=\"wp-image-1315\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht3.png 1918w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht3-300x161.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht3-768x412.png 768w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht3-1024x549.png 1024w\" sizes=\"(max-width: 1918px) 100vw, 1918px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Body_tag\"><\/span><strong>Body tag<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>&lt;body&gt;<\/code> tag holds everything visible on the page \u2014 paragraphs, images, headings, forms, tables, and more. All the actual content a visitor sees goes inside it. The example below shows a body with two paragraphs and two headings of different sizes:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;body&gt;\n&lt;p&gt; this is the first paragraph &lt;\/p&gt;\n&lt;p&gt; this is the second paragraph &lt;\/p&gt;\n&lt;h1&gt; This is a big heading &lt;\/h1&gt;\n&lt;h4&gt; this is a small heading &lt;\/h4&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><img decoding=\"async\" width=\"928\" height=\"227\" class=\"aligncenter size-full wp-image-1314\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht2.png\" alt=\"\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht2.png 928w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht2-300x73.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht2-768x188.png 768w\" sizes=\"(max-width: 928px) 100vw, 928px\" \/><\/h4>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Img_tag\"><\/span><strong>Img tag<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>img<\/code> tag inserts an image into an HTML document. It uses the <code>src<\/code> attribute to point to the image&#8217;s path or URL, and the <code>alt<\/code> attribute to provide alternative text that&#8217;s shown if the image fails to load (and read by screen readers, which is important for accessibility). You can set dimensions with the <code>width<\/code> and <code>height<\/code> attributes:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;body&gt;\n&lt;img src=\"room.jpg\" width=\"700px\" height=\"400px\" alt=\"Image description\"&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The result:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"858\" height=\"499\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/image-html-tag.png\" alt=\"html page showing the image\" class=\"wp-image-4936\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/image-html-tag.png 858w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/image-html-tag-300x174.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/image-html-tag-768x447.png 768w\" sizes=\"(max-width: 858px) 100vw, 858px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Note that the <code>img<\/code> tag has no closing tag. <a id=\"topic4\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"HTML5_semantic_elements\"><\/span>HTML5 semantic elements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Older HTML used generic <code>&lt;div&gt;<\/code> tags for everything. HTML5 introduced <strong>semantic elements<\/strong> that describe the <em>meaning<\/em> of each part of the page, which helps both browsers and search engines understand your content (and improves accessibility). The most common ones:<\/p>\n\n\n\n<div style=\"display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin:24px 0; font-family:inherit;\">\n  <div style=\"background:#FFF4ED; border:1px solid #FBD9C0; border-left:4px solid #F26C21; border-radius:10px; padding:14px 16px;\"><strong style=\"color:#1A2238;\">&lt;header&gt;<\/strong><div style=\"color:#475569; line-height:1.55;\">The top section of a page or article, often holding the logo and navigation.<\/div><\/div>\n  <div style=\"background:#FFF4ED; border:1px solid #FBD9C0; border-left:4px solid #F26C21; border-radius:10px; padding:14px 16px;\"><strong style=\"color:#1A2238;\">&lt;nav&gt;<\/strong><div style=\"color:#475569; line-height:1.55;\">A block of navigation links.<\/div><\/div>\n  <div style=\"background:#FFF4ED; border:1px solid #FBD9C0; border-left:4px solid #F26C21; border-radius:10px; padding:14px 16px;\"><strong style=\"color:#1A2238;\">&lt;main&gt;<\/strong><div style=\"color:#475569; line-height:1.55;\">The main, unique content of the page.<\/div><\/div>\n  <div style=\"background:#FFF4ED; border:1px solid #FBD9C0; border-left:4px solid #F26C21; border-radius:10px; padding:14px 16px;\"><strong style=\"color:#1A2238;\">&lt;article&gt;<\/strong><div style=\"color:#475569; line-height:1.55;\">A self-contained piece of content, like a blog post.<\/div><\/div>\n  <div style=\"background:#FFF4ED; border:1px solid #FBD9C0; border-left:4px solid #F26C21; border-radius:10px; padding:14px 16px;\"><strong style=\"color:#1A2238;\">&lt;section&gt;<\/strong><div style=\"color:#475569; line-height:1.55;\">A thematic grouping of content.<\/div><\/div>\n  <div style=\"background:#FFF4ED; border:1px solid #FBD9C0; border-left:4px solid #F26C21; border-radius:10px; padding:14px 16px;\"><strong style=\"color:#1A2238;\">&lt;footer&gt;<\/strong><div style=\"color:#475569; line-height:1.55;\">The bottom section, often with copyright and links.<\/div><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Using semantic elements instead of generic <code>&lt;div&gt;<\/code>s makes your HTML cleaner, easier to maintain, more accessible, and better understood by search engines \u2014 which is why they&#8217;re standard practice in modern web development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_Cascading_style_sheets\"><\/span>CSS: Cascading style sheets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML creates the structure of a page, but on its own a page looks plain \u2014 black text on a white background. <strong>CSS (Cascading Style Sheets)<\/strong> is what makes pages attractive: it controls colors, fonts, sizes, spacing, positioning, borders, and much more. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"1024\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-css-javascript-three-layers-683x1024.png\" alt=\"The same web page shown in three stacked layers: HTML as the bare structure, CSS adding colors and typography, and JavaScript adding interaction\" class=\"wp-image-5903\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-css-javascript-three-layers-683x1024.png 683w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-css-javascript-three-layers-200x300.png 200w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-css-javascript-three-layers-768x1152.png 768w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-css-javascript-three-layers.png 1024w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">There are three ways to apply CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>External style sheets:<\/strong> CSS written in a separate <code>.css<\/code> file and linked to the page. This is the recommended approach for real websites, because it keeps styling separate from content and can be reused across many pages.<\/li>\n\n\n\n<li><strong>Internal style sheets:<\/strong> CSS placed inside a <code>&lt;style&gt;<\/code> tag in the page&#8217;s <code>&lt;head&gt;<\/code>. Useful for a single page.<\/li>\n\n\n\n<li><strong>Inline styles:<\/strong> CSS written directly on an element with the <code>style<\/code> attribute. It works, but it&#8217;s generally discouraged for anything beyond quick tests, since it mixes styling into the content and is hard to maintain.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s an example using inline styles to illustrate a few common properties:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;body&gt;\n&lt;p style=\"font-size: 40px\"&gt; this is the first paragraph &lt;\/p&gt; \n&lt;p style=\"color: red\"&gt; this is the second paragraph &lt;\/p&gt;\n&lt;h1 style=\"text-align: center\"&gt; This is a big heading &lt;\/h1&gt; \n&lt;h4 style=\"background-color: blue\"&gt; this is a small heading &lt;\/h4&gt; &lt;\/body&gt; &lt;\/html&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, the <code>font-size<\/code> property enlarges the first paragraph, the <code>color<\/code> property turns the second one red, <code>text-align<\/code> centers the main heading, and <code>background-color<\/code> gives the last heading a blue background. These are just a few of the many properties CSS offers.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"939\" height=\"389\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht1.png\" alt=\"Headings in HTML\" class=\"wp-image-1311\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht1.png 939w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht1-300x124.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht1-768x318.png 768w\" sizes=\"(max-width: 939px) 100vw, 939px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The example below moves the styling into a <code>&lt;style&gt;<\/code> block inside the <code>&lt;head&gt;<\/code>, changing the whole page&#8217;s background to yellow. This approach is called an internal style sheet.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\nbody {\nbackground-color: yellow\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;p style=\"font-size: 40px\"&gt; this is the first paragraph &lt;\/p&gt; \n&lt;p style=\"color: red\"&gt; this is the second paragraph &lt;\/p&gt;\n&lt;h1 style=\"text-align: center\"&gt; This is a big heading &lt;\/h1&gt; \n&lt;h4 style=\"background-color: blue\"&gt; this is a small heading &lt;\/h4&gt; &lt;\/body&gt; &lt;\/html&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"935\" height=\"402\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht-1.png\" alt=\"Headings and paragraphs\" class=\"wp-image-1312\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht-1.png 935w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht-1-300x129.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/ht-1-768x330.png 768w\" sizes=\"(max-width: 935px) 100vw, 935px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">External style sheets are not much different. We use an external file with a .css extension to make CSS changes. Click <a href=\"https:\/\/www.copahost.com\/blog\/font-color-html\/#topic1\">here<\/a> to learn more about external style sheets.<br>\n<a id=\"topic5\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_brief_history_of_HTML\"><\/span>A brief history of HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML was created by <strong>Tim Berners-Lee<\/strong> in 1991, originally with just 18 elements. The first website, built at CERN, went online on August 6, 1991. HTML 2.0 followed in 1995, then HTML 3.2 in 1997, and HTML 4.01 later that year, which expanded support for style sheets, scripting, and embedded objects. HTML 4.01 remained the standard for years until <strong>HTML5<\/strong> arrived in 2014. HTML5 was a major leap forward, introducing semantic elements, native audio and video, and many features that power the modern web \u2014 and it remains the version in use today, maintained as a &#8220;living standard&#8221; that evolves continuously.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/evolution-of-html-timeline-1024x576.png\" alt=\"Timeline of HTML from 1991, when Tim Berners-Lee created it with 18 elements at CERN, through HTML 2.0, 3.2, 4.01, XHTML and the founding of WHATWG, to HTML5 in 2014 and the living standard\" class=\"wp-image-5904\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/evolution-of-html-timeline-1024x576.png 1024w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/evolution-of-html-timeline-300x169.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/evolution-of-html-timeline-768x432.png 768w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/evolution-of-html-timeline-1536x864.png 1536w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/evolution-of-html-timeline.png 1672w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"From_HTML_file_to_live_website_hosting\"><\/span>From HTML file to live website: hosting<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Writing an HTML file on your computer is only half the story \u2014 to make it visible to the world, that file needs to live on a <strong>web server<\/strong> that&#8217;s connected to the internet 24\/7. That&#8217;s what <strong>web hosting<\/strong> provides: space on a server where your HTML, CSS, images, and other files are stored and served to visitors who type your address. When someone visits your site, their browser requests those files from the server and renders the page. So once you&#8217;ve built your page in HTML, hosting is what actually puts it online. You can learn more in our guide on <a href=\"https:\/\/www.copahost.com\/blog\/what-is-web-hosting\/\">what web hosting is<\/a>.<\/p>\n\n\n\n<div style=\"max-width:760px; margin:32px auto; background:linear-gradient(135deg,#1A2238 0%,#F26C21 100%); border-radius:16px; padding:32px 28px; font-family:inherit; color:#fff; box-shadow:0 10px 30px rgba(242,108,33,.25);\">\n  <div style=\"display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;\">\n    <div style=\"flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:12px; background:rgba(255,255,255,.18);\">\n      <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"><\/polyline><polyline points=\"8 6 2 12 8 18\"><\/polyline><\/svg>\n    <\/div>\n    <div style=\"flex:1 1 320px; min-width:260px;\">\n      <div style=\"font-weight:800; line-height:1.25; margin-bottom:8px;\">Ready to put your HTML site online?<\/div>\n      <p style=\"margin:0 0 18px; line-height:1.6; color:#FFE9D9;\">Copahost makes it easy to host your website \u2014 upload your HTML files and your site is live, with free SSL, a fast control panel, NVMe storage, and real support included.<\/p>\n      <a href=\"https:\/\/www.copahost.com\/web-hosting\" style=\"display:inline-flex; align-items:center; gap:8px; background:#fff; color:#F26C21; font-weight:700; text-decoration:none; padding:13px 26px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.15);\">\n        Explore hosting plans\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F26C21\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n      <\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\"@type\":\"Question\",\"name\":\"Is HTML a programming language?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Not exactly. HTML is a markup language \u2014 it structures and labels content, but it doesn't have logic, variables, or functions like programming languages such as JavaScript or Python. It's often the first language people learn for the web, but technically it's markup, not programming.\"}},\n    {\"@type\":\"Question\",\"name\":\"Is HTML hard to learn?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"No, HTML is one of the easiest web languages to start with. It's based on simple tags that label content, with no complex logic. Most people grasp the basics in a few hours and can build a simple page quickly.\"}},\n    {\"@type\":\"Question\",\"name\":\"What is HTML used for?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"HTML is used to structure the content of web pages \u2014 headings, paragraphs, images, links, forms, and more. Every website uses it as its foundation, combined with CSS for styling and JavaScript for interactivity.\"}},\n    {\"@type\":\"Question\",\"name\":\"What's the difference between HTML and CSS?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"HTML defines the structure and content of a page (what's there); CSS defines how it looks (colors, fonts, layout). They work together: HTML builds the skeleton, CSS dresses it up.\"}},\n    {\"@type\":\"Question\",\"name\":\"Do I need to know HTML to have a website?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Not necessarily. Website builders and CMS platforms like WordPress let you create sites without writing HTML directly. But understanding HTML basics helps you customize and troubleshoot your site.\"}}\n  ]\n}\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Frequently_asked_questions_about_HTML\"><\/span>Frequently asked questions about HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Is HTML a programming language?<\/strong> Not exactly. HTML is a <em>markup<\/em> language \u2014 it structures and labels content, but it doesn&#8217;t have logic, variables, or functions like programming languages such as JavaScript or Python. It&#8217;s often the first language people learn for the web, but technically it&#8217;s markup, not programming.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Is HTML hard to learn?<\/strong> No, HTML is one of the easiest web languages to start with. It&#8217;s based on simple tags that label content, with no complex logic. Most people grasp the basics in a few hours and can build a simple page quickly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What is HTML used for?<\/strong> HTML is used to structure the content of web pages \u2014 headings, paragraphs, images, links, forms, and more. Every website uses it as its foundation, combined with CSS for styling and JavaScript for interactivity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>What&#8217;s the difference between HTML and CSS?<\/strong> HTML defines the structure and content of a page (what&#8217;s there); CSS defines how it looks (colors, fonts, layout). They work together: HTML builds the skeleton, CSS dresses it up.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Do I need to know HTML to have a website?<\/strong> Not necessarily. Website builders and CMS platforms like WordPress let you create sites without writing HTML directly. But understanding HTML basics helps you customize and troubleshoot your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><a id=\"topic6\"><\/a>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML is the foundation of every web page \u2014 the language that structures content so browsers can display it. It&#8217;s defined by tags, it&#8217;s straightforward to learn, and it&#8217;s the first thing anyone building for the web should understand. On its own, HTML handles structure; paired with CSS for styling and JavaScript for interactivity, it forms the three core technologies of the World Wide Web. Whether you&#8217;re learning to code or just want to understand how the web works, HTML is where it starts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML (HyperText Markup Language) is the standard language used to structure the content of web pages. Virtually every website on the internet is built on HTML \u2014 it&#8217;s the foundation the entire web is built on. This guide explains what HTML is, how it works, its basic tags, and how it fits together with CSS [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[196],"tags":[],"class_list":["post-1307","post","type-post","status-publish","format-standard","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What is HTML? Explaining the Hyper Text Markup Language - Copahost<\/title>\n<meta name=\"description\" content=\"HTML is the language that structures every web page. What it is, how tags work, the HTML5 skeleton, semantic elements, and how it fits with CSS and JavaScript.\" \/>\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.copahost.com\/blog\/what-is-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is HTML? Explaining the Hyper Text Markup Language - Copahost\" \/>\n<meta property=\"og:description\" content=\"HTML is the language that structures every web page. What it is, how tags work, the HTML5 skeleton, semantic elements, and how it fits with CSS and JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.copahost.com\/blog\/what-is-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Copahost\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-20T09:27:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-12T23:57:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1672\" \/>\n\t<meta property=\"og:image:height\" content=\"941\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Gustavo Gallas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gustavo Gallas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/\"},\"author\":{\"name\":\"Gustavo Gallas\",\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/#\\\/schema\\\/person\\\/386b3f1f79299d43f4ceb33d26428246\"},\"headline\":\"What is HTML? Explaining the Hyper Text Markup Language\",\"datePublished\":\"2019-07-20T09:27:52+00:00\",\"dateModified\":\"2026-08-12T23:57:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/\"},\"wordCount\":1764,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html-document-structure-code-and-result-1024x576.png\",\"articleSection\":[\"Web development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/\",\"url\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/\",\"name\":\"What is HTML? Explaining the Hyper Text Markup Language - Copahost\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html-document-structure-code-and-result-1024x576.png\",\"datePublished\":\"2019-07-20T09:27:52+00:00\",\"dateModified\":\"2026-08-12T23:57:42+00:00\",\"description\":\"HTML is the language that structures every web page. What it is, how tags work, the HTML5 skeleton, semantic elements, and how it fits with CSS and JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html-document-structure-code-and-result.png\",\"contentUrl\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html-document-structure-code-and-result.png\",\"width\":1672,\"height\":941},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/what-is-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is HTML? Explaining the Hyper Text Markup Language\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/\",\"name\":\"Copahost\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/#organization\",\"name\":\"Copahost\",\"url\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/copahostlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/copahostlogo.png\",\"width\":223,\"height\":40,\"caption\":\"Copahost\"},\"image\":{\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/#\\\/schema\\\/person\\\/386b3f1f79299d43f4ceb33d26428246\",\"name\":\"Gustavo Gallas\",\"description\":\"Graduated in Computing at PUC-Rio, Brazil. Specialized in IT, networking, systems administration and human and organizational development\u200b. Also have brewing skills.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/gustavo-gallas-107926196\\\/\"],\"url\":\"https:\\\/\\\/www.copahost.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is HTML? Explaining the Hyper Text Markup Language - Copahost","description":"HTML is the language that structures every web page. What it is, how tags work, the HTML5 skeleton, semantic elements, and how it fits with CSS and JavaScript.","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:\/\/www.copahost.com\/blog\/what-is-html\/","og_locale":"en_US","og_type":"article","og_title":"What is HTML? Explaining the Hyper Text Markup Language - Copahost","og_description":"HTML is the language that structures every web page. What it is, how tags work, the HTML5 skeleton, semantic elements, and how it fits with CSS and JavaScript.","og_url":"https:\/\/www.copahost.com\/blog\/what-is-html\/","og_site_name":"Copahost","article_published_time":"2019-07-20T09:27:52+00:00","article_modified_time":"2026-08-12T23:57:42+00:00","og_image":[{"width":1672,"height":941,"url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result.png","type":"image\/png"}],"author":"Gustavo Gallas","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gustavo Gallas","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.copahost.com\/blog\/what-is-html\/#article","isPartOf":{"@id":"https:\/\/www.copahost.com\/blog\/what-is-html\/"},"author":{"name":"Gustavo Gallas","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246"},"headline":"What is HTML? Explaining the Hyper Text Markup Language","datePublished":"2019-07-20T09:27:52+00:00","dateModified":"2026-08-12T23:57:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.copahost.com\/blog\/what-is-html\/"},"wordCount":1764,"commentCount":0,"publisher":{"@id":"https:\/\/www.copahost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/what-is-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result-1024x576.png","articleSection":["Web development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.copahost.com\/blog\/what-is-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.copahost.com\/blog\/what-is-html\/","url":"https:\/\/www.copahost.com\/blog\/what-is-html\/","name":"What is HTML? Explaining the Hyper Text Markup Language - Copahost","isPartOf":{"@id":"https:\/\/www.copahost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.copahost.com\/blog\/what-is-html\/#primaryimage"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/what-is-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result-1024x576.png","datePublished":"2019-07-20T09:27:52+00:00","dateModified":"2026-08-12T23:57:42+00:00","description":"HTML is the language that structures every web page. What it is, how tags work, the HTML5 skeleton, semantic elements, and how it fits with CSS and JavaScript.","breadcrumb":{"@id":"https:\/\/www.copahost.com\/blog\/what-is-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.copahost.com\/blog\/what-is-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copahost.com\/blog\/what-is-html\/#primaryimage","url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result.png","contentUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-document-structure-code-and-result.png","width":1672,"height":941},{"@type":"BreadcrumbList","@id":"https:\/\/www.copahost.com\/blog\/what-is-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.copahost.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is HTML? Explaining the Hyper Text Markup Language"}]},{"@type":"WebSite","@id":"https:\/\/www.copahost.com\/blog\/#website","url":"https:\/\/www.copahost.com\/blog\/","name":"Copahost","description":"","publisher":{"@id":"https:\/\/www.copahost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.copahost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.copahost.com\/blog\/#organization","name":"Copahost","url":"https:\/\/www.copahost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png","contentUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png","width":223,"height":40,"caption":"Copahost"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246","name":"Gustavo Gallas","description":"Graduated in Computing at PUC-Rio, Brazil. Specialized in IT, networking, systems administration and human and organizational development\u200b. Also have brewing skills.","sameAs":["https:\/\/www.linkedin.com\/in\/gustavo-gallas-107926196\/"],"url":"https:\/\/www.copahost.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/comments?post=1307"}],"version-history":[{"count":20,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1307\/revisions"}],"predecessor-version":[{"id":5905,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1307\/revisions\/5905"}],"wp:attachment":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/media?parent=1307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/categories?post=1307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/tags?post=1307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}