Consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.
Here are some guidelines and tips for creating good HTML code.
Always Declare Document Type
Always declare the document type as the first line in your document.
The correct document type for HTML is:
<!DOCTYPE html>
Use Lowercase Element Names
HTML allows mixing uppercase and lowercase letters in element names.
However, we recommend using lowercase element names, because:
- Mixing uppercase and lowercase names looks bad
- Developers normally use lowercase names
- Lowercase looks cleaner
- Lowercase is easier to type
Good:
<body>
<p>This is a paragraph.</p>
</body>
Bad:
<BODY>
<P>This is a paragraph.</P>
</BODY>
Close All HTML Elements
In HTML, you do not have to close all elements (for example the <p> element).
However, we strongly recommend closing all HTML elements, like this:
Good:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Bad:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Use Lowercase Attribute Names
HTML allows mixing uppercase and lowercase letters in attribute names.
However, we recommend using lowercase attribute names, because:
- Mixing uppercase and lowercase names looks bad
- Developers normally use lowercase names
- Lowercase looks cleaner
- Lowercase is easier to type
Good:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Bad:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Always Quote Attribute Values
HTML allows attribute values without quotes.
However, we recommend quoting attribute values, because:
- Developers normally quote attribute values
- Quoted values are easier to read
- You MUST use quotes if the value contains spaces
Good:
<table
class="striped">
Bad:
<table class=striped>
Very bad:
<table class=table striped>
Always Specify alt, width, and height for Images
Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.
Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.
Good:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Bad:
<img
src="html5.gif">
Spaces and Equal Signs
HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.
Good:
<link rel="stylesheet" href="styles.css">
Bad:
<link
rel = "stylesheet" href = "styles.css">
Avoid Long Code Lines
When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code.
Try to avoid too long code lines.
Blank Lines and Indentation
Do not add blank lines, spaces, or indentations without a reason.
For readability, add blank lines to separate large or logical code blocks.
For readability, add two spaces of indentation. Do not use the tab key.
Good:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the
center of the Greater Tokyo Area, and the most
populous metropolitan area in the world.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city
in the United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the
largest population centers in Europe.</p>
</body>
Bad:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the
center of the Greater Tokyo Area, and the most
populous metropolitan area in the world.</p>
<h2>London</h2><p>London
is the capital city of England. It is the most populous city in the United
Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital
of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
Good Table Example:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Good List Example:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Never Skip the Element</h2>
<p>The <code><title></code> element is required in HTML.</p>
<p>The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.</p>
<p>The <code><title></code> element:</p>
<ul>
<li>defines a title in the browser toolbar</li>
<li>provides a title for the page when it is added to favorites</li>
<li>displays a title for the page in search-engine results</li>
</ul>
<p>So, try to make the title as accurate and meaningful as possible:</p>
<pre><code class="language-html"><title>HTML
Style Guide and Coding Conventions</title>
</code></pre>
<hr>
<h2 id="omitting-and">Omitting <html> and <body>?</h2>
<p>An HTML page will validate without the <code><html></code> and <code><body></code> tags:</p>
<h3>Example</h3>
<pre><code class="language-html"> <!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</code></pre>
<p>However, we strongly recommend to always add the <code><html></code> and <code><body></code> tags!</p>
<p>Omitting <code><body></code> can produce errors in older browsers.</p>
<p>Omitting <code><html></code> and <code><body></code> can also crash DOM and XML software.</p>
<hr>
<h2 id="omitting">Omitting <head>?</h2>
<p>The HTML <head> tag can also be omitted.</p>
<p>Browsers will add all elements before <code><body></code>, to a default <code><head></code> element.</p>
<h3>Example</h3>
<pre><code class="language-html"> <!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
</code></pre>
<p>However, we recommend using the <code><head></code> tag.</p>
<hr>
<h2 id="close-empty-html-elements">Close Empty HTML Elements?</h2>
<p>In HTML, it is optional to close empty elements.</p>
<h3>Allowed:</h3>
<pre><code class="language-html"><meta
charset="utf-8">
</code></pre>
<h3>Also Allowed:</h3>
<pre><code class="language-html"><meta charset="utf-8" />
</code></pre>
<p>If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.</p>
<hr>
<h2 id="add-the-lang-attribute">Add the lang Attribute</h2>
<p>You should always include the <code>lang</code> attribute inside the <code><html></code> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.</p>
<h3>Example</h3>
<pre><code class="language-html"> <!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
</code></pre>
<hr>
<h2 id="meta-data">Meta Data</h2>
<p>To ensure proper interpretation and correct search engine indexing, both the language and the character encoding <code><meta charset="charset"></code> should be defined as early as possible in an HTML document:</p>
<pre><code class="language-html"> <!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
</code></pre>
<hr>
<h2 id="setting-the-viewport">Setting The Viewport</h2>
<p>The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.</p>
<p>You should include the following <code><meta></code> element in all your web pages:</p>
<pre><code class="language-html"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</code></pre>
<p>This gives the browser instructions on how to control the page's dimensions and scaling.</p>
<p>The <code>width=device-width</code> part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).</p>
<p>The <code>initial-scale=1.0</code> part sets the initial zoom level when the page is first loaded by the browser.</p>
<p>Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:</p>
<blockquote>
<p><strong>Tip:</strong> If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.</p>
</blockquote>
<hr>
<h2 id="html-comments">HTML Comments</h2>
<p>Short comments should be written on one line, like this:</p>
<pre><code class="language-html"><!-- This is a comment -->
</code></pre>
<p>Comments that span more than one line, should be written like this:</p>
<pre><code class="language-html"><!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
</code></pre>
<p>Long comments are easier to observe if they are indented with two spaces.</p>
<hr>
<h2 id="using-style-sheets">Using Style Sheets</h2>
<p>Use simple syntax for linking to style sheets (the <code> type</code> attribute is not necessary):</p>
<pre><code class="language-html"><link rel="stylesheet" href="styles.css">
</code></pre>
<p>Short CSS rules can be written compressed, like this:</p>
<pre><code class="language-css">p.intro {font-family:Verdana;font-size:16em;}
</code></pre>
<p>Long CSS rules should be written over multiple lines:</p>
<pre><code class="language-css">body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
</code></pre>
<ul>
<li>Place the opening bracket on the same line as the selector</li>
<li>Use one space before the opening bracket</li>
<li>Use two spaces of indentation</li>
<li>Use semicolon after each property-value pair, including the last</li>
<li>Only use quotes around values if the value contains spaces</li>
<li>Place the closing bracket on a new line, without leading spaces</li>
</ul>
<hr>
<h2 id="loading-javascript-in-html">Loading JavaScript in HTML</h2>
<p>Use simple syntax for loading external scripts (the <code> type</code> attribute is not necessary):</p>
<pre><code class="language-html"><script src="myscript.js">
</code></pre>
<hr>
<h2 id="accessing-html-elements-with-javascript">Accessing HTML Elements with JavaScript</h2>
<p>Using "untidy" HTML code can result in JavaScript errors.</p>
<p>These two JavaScript statements will produce different results:</p>
<h3>Example</h3>
<pre><code class="language-javascript"> getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
</code></pre>
<p>Visit the JavaScript Style Guide.</p>
<hr>
<h2 id="use-lower-case-file-names">Use Lower Case File Names</h2>
<p>Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".</p>
<p>Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".</p>
<p>If you use a mix of uppercase and lowercase, you have to be aware of this.</p>
<p>If you move from a case-insensitive to a case-sensitive server, even small errors will break your website!</p>
<p>To avoid these problems, always use lowercase file names!</p>
<hr>
<h2 id="file-extensions">File Extensions</h2>
<p>HTML files should have a .html extension (.htm is allowed).</p>
<p>CSS files should have a .css extension.</p>
<p>JavaScript files should have a .js extension.</p>
<hr>
<h2 id="differences-between-htm-and-html">Differences Between .htm and .html?</h2>
<p>There is no difference between the .htm and .html file extensions!</p>
<p>Both will be treated as HTML by any web browser and web server.</p>
<hr>
<h2 id="default-filenames">Default Filenames</h2>
<p>When a URL does not specify a filename at the end (like "<a href="https://www.w3schools.com/">https://www.w3schools.com/</a>"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".</p>
<p>If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".</p>
<p>However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.</p>
</div><div class="share-bar"><strong>Share:</strong><a href="https://wa.me/?text=HTML%20Style%20Guide%20https%3A%2F%2Fcodingnowai.com%2Fnotes%2Fhtml%2Fhtml-style-guide" target="_blank" rel="noopener" class="share-btn s-wa"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg> WhatsApp</a><a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fcodingnowai.com%2Fnotes%2Fhtml%2Fhtml-style-guide&title=HTML%20Style%20Guide" target="_blank" rel="noopener" class="share-btn s-li"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg> LinkedIn</a><a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fcodingnowai.com%2Fnotes%2Fhtml%2Fhtml-style-guide&text=HTML%20Style%20Guide" target="_blank" rel="noopener" class="share-btn s-cp"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg> Copy / Share</a></div></div><div class="prevnext"><a class="pn-btn pn-prev" href="/notes/html/html-semantics/"><span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg> Previous</span><strong>HTML Semantics</strong></a><a class="pn-btn pn-next" href="/notes/html/html-entities/"><span class="inline-flex items-center gap-1">Next <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span><strong>HTML Entities</strong></a></div><div class="note-cta"><h3>Want to go beyond the notes?</h3><p>Join CodingNow 2.0's <!-- -->HTML<!-- --> course — live mentorship, real projects, and 100% placement support.</p><a href="/enroll-now/">Enroll Now — Free Demo Available</a></div></div><aside class="topics-side"><h4>HTML<!-- --> Notes — All Topics</h4><div class="ts-group"><div class="ts-group-label">HTML Tutorial</div><a class="ts-item " href="/notes/html/html-home/"><span class="ts-num">1</span><span class="ts-title">HTML HOME</span></a><a class="ts-item " href="/notes/html/html-introduction/"><span class="ts-num">2</span><span class="ts-title">HTML Introduction</span></a><a class="ts-item " href="/notes/html/html-editors/"><span class="ts-num">3</span><span class="ts-title">HTML Editors</span></a><a class="ts-item " href="/notes/html/html-basic/"><span class="ts-num">4</span><span class="ts-title">HTML Basic</span></a><a class="ts-item " href="/notes/html/html-elements/"><span class="ts-num">5</span><span class="ts-title">HTML Elements</span></a><a class="ts-item " href="/notes/html/html-attributes/"><span class="ts-num">6</span><span class="ts-title">HTML Attributes</span></a><a class="ts-item " href="/notes/html/html-headings/"><span class="ts-num">7</span><span class="ts-title">HTML Headings</span></a><a class="ts-item " href="/notes/html/html-paragraphs/"><span class="ts-num">8</span><span class="ts-title">HTML Paragraphs</span></a><a class="ts-item " href="/notes/html/html-styles/"><span class="ts-num">9</span><span class="ts-title">HTML Styles</span></a><a class="ts-item " href="/notes/html/html-formatting/"><span class="ts-num">10</span><span class="ts-title">HTML Formatting</span></a><a class="ts-item " href="/notes/html/html-quotations/"><span class="ts-num">11</span><span class="ts-title">HTML Quotations</span></a><a class="ts-item " href="/notes/html/html-comments/"><span class="ts-num">12</span><span class="ts-title">HTML Comments</span></a><a class="ts-item " href="/notes/html/html-colors/"><span class="ts-num">13</span><span class="ts-title">HTML Colors</span></a><a class="ts-item " href="/notes/html/rgb/"><span class="ts-num">14</span><span class="ts-title">RGB</span></a><a class="ts-item " href="/notes/html/hex/"><span class="ts-num">15</span><span class="ts-title">HEX</span></a><a class="ts-item " href="/notes/html/hsl/"><span class="ts-num">16</span><span class="ts-title">HSL</span></a><a class="ts-item " href="/notes/html/html-css/"><span class="ts-num">17</span><span class="ts-title">HTML CSS</span></a><a class="ts-item " href="/notes/html/html-links/"><span class="ts-num">18</span><span class="ts-title">HTML Links</span></a><a class="ts-item " href="/notes/html/link-colors/"><span class="ts-num">19</span><span class="ts-title">Link Colors</span></a><a class="ts-item " href="/notes/html/link-bookmarks/"><span class="ts-num">20</span><span class="ts-title">Link Bookmarks</span></a><a class="ts-item " href="/notes/html/html-images/"><span class="ts-num">21</span><span class="ts-title">HTML Images</span></a><a class="ts-item " href="/notes/html/image-map/"><span class="ts-num">22</span><span class="ts-title">Image Map</span></a><a class="ts-item " href="/notes/html/background-images/"><span class="ts-num">23</span><span class="ts-title">Background Images</span></a><a class="ts-item " href="/notes/html/the-picture-element/"><span class="ts-num">24</span><span class="ts-title">The Picture Element</span></a><a class="ts-item " href="/notes/html/html-project/"><span class="ts-num">25</span><span class="ts-title">HTML Project</span></a><a class="ts-item " href="/notes/html/html-favicon/"><span class="ts-num">26</span><span class="ts-title">HTML Favicon</span></a><a class="ts-item " href="/notes/html/html-page-title/"><span class="ts-num">27</span><span class="ts-title">HTML Page Title</span></a><a class="ts-item " href="/notes/html/html-tables/"><span class="ts-num">28</span><span class="ts-title">HTML Tables</span></a><a class="ts-item " href="/notes/html/table-borders/"><span class="ts-num">29</span><span class="ts-title">Table Borders</span></a><a class="ts-item " href="/notes/html/table-sizes/"><span class="ts-num">30</span><span class="ts-title">Table Sizes</span></a><a class="ts-item " href="/notes/html/table-headers/"><span class="ts-num">31</span><span class="ts-title">Table Headers</span></a><a class="ts-item " href="/notes/html/padding-spacing/"><span class="ts-num">32</span><span class="ts-title">Padding & Spacing</span></a><a class="ts-item " href="/notes/html/colspan-rowspan/"><span class="ts-num">33</span><span class="ts-title">Colspan & Rowspan</span></a><a class="ts-item " href="/notes/html/table-styling/"><span class="ts-num">34</span><span class="ts-title">Table Styling</span></a><a class="ts-item " href="/notes/html/table-colgroup/"><span class="ts-num">35</span><span class="ts-title">Table Colgroup</span></a><a class="ts-item " href="/notes/html/html-lists/"><span class="ts-num">36</span><span class="ts-title">HTML Lists</span></a><a class="ts-item " href="/notes/html/unordered-lists/"><span class="ts-num">37</span><span class="ts-title">Unordered Lists</span></a><a class="ts-item " href="/notes/html/ordered-lists/"><span class="ts-num">38</span><span class="ts-title">Ordered Lists</span></a><a class="ts-item " href="/notes/html/other-lists/"><span class="ts-num">39</span><span class="ts-title">Other Lists</span></a><a class="ts-item " href="/notes/html/html-block-inline/"><span class="ts-num">40</span><span class="ts-title">HTML Block & Inline</span></a><a class="ts-item " href="/notes/html/html-div/"><span class="ts-num">41</span><span class="ts-title">HTML Div</span></a><a class="ts-item " href="/notes/html/html-classes/"><span class="ts-num">42</span><span class="ts-title">HTML Classes</span></a><a class="ts-item " href="/notes/html/html-id/"><span class="ts-num">43</span><span class="ts-title">HTML Id</span></a><a class="ts-item " href="/notes/html/html-buttons/"><span class="ts-num">44</span><span class="ts-title">HTML Buttons</span></a><a class="ts-item " href="/notes/html/html-iframes/"><span class="ts-num">45</span><span class="ts-title">HTML Iframes</span></a><a class="ts-item " href="/notes/html/html-javascript/"><span class="ts-num">46</span><span class="ts-title">HTML JavaScript</span></a><a class="ts-item " href="/notes/html/html-file-paths/"><span class="ts-num">47</span><span class="ts-title">HTML File Paths</span></a><a class="ts-item " href="/notes/html/html-head/"><span class="ts-num">48</span><span class="ts-title">HTML Head</span></a><a class="ts-item " href="/notes/html/html-layout/"><span class="ts-num">49</span><span class="ts-title">HTML Layout</span></a><a class="ts-item " href="/notes/html/html-responsive/"><span class="ts-num">50</span><span class="ts-title">HTML Responsive</span></a><a class="ts-item " href="/notes/html/html-computercode/"><span class="ts-num">51</span><span class="ts-title">HTML Computercode</span></a><a class="ts-item " href="/notes/html/html-semantics/"><span class="ts-num">52</span><span class="ts-title">HTML Semantics</span></a><a class="ts-item active" href="/notes/html/html-style-guide/"><span class="ts-num">53</span><span class="ts-title">HTML Style Guide</span></a><a class="ts-item " href="/notes/html/html-entities/"><span class="ts-num">54</span><span class="ts-title">HTML Entities</span></a><a class="ts-item " href="/notes/html/html-symbols/"><span class="ts-num">55</span><span class="ts-title">HTML Symbols</span></a><a class="ts-item " href="/notes/html/html-emojis/"><span class="ts-num">56</span><span class="ts-title">HTML Emojis</span></a><a class="ts-item " href="/notes/html/html-charsets/"><span class="ts-num">57</span><span class="ts-title">HTML Charsets</span></a><a class="ts-item " href="/notes/html/html-url-encode/"><span class="ts-num">58</span><span class="ts-title">HTML URL Encode</span></a><a class="ts-item " href="/notes/html/html-vs-xhtml/"><span class="ts-num">59</span><span class="ts-title">HTML vs. XHTML</span></a></div><div class="ts-group"><div class="ts-group-label">HTML Forms</div><a class="ts-item " href="/notes/html/html-forms/"><span class="ts-num">60</span><span class="ts-title">HTML Forms</span></a><a class="ts-item " href="/notes/html/html-form-attributes/"><span class="ts-num">61</span><span class="ts-title">HTML Form Attributes</span></a><a class="ts-item " href="/notes/html/html-form-elements/"><span class="ts-num">62</span><span class="ts-title">HTML Form Elements</span></a><a class="ts-item " href="/notes/html/html-input-types/"><span class="ts-num">63</span><span class="ts-title">HTML Input Types</span></a><a class="ts-item " href="/notes/html/html-input-attributes/"><span class="ts-num">64</span><span class="ts-title">HTML Input Attributes</span></a><a class="ts-item " href="/notes/html/input-form-attributes/"><span class="ts-num">65</span><span class="ts-title">Input Form Attributes</span></a></div><div class="ts-group"><div class="ts-group-label">HTML Graphics</div><a class="ts-item " href="/notes/html/html-canvas/"><span class="ts-num">66</span><span class="ts-title">HTML Canvas</span></a><a class="ts-item " href="/notes/html/html-svg/"><span class="ts-num">67</span><span class="ts-title">HTML SVG</span></a></div><div class="ts-group"><div class="ts-group-label">HTML Media</div><a class="ts-item " href="/notes/html/html-media/"><span class="ts-num">68</span><span class="ts-title">HTML Media</span></a><a class="ts-item " href="/notes/html/html-video/"><span class="ts-num">69</span><span class="ts-title">HTML Video</span></a><a class="ts-item " href="/notes/html/html-audio/"><span class="ts-num">70</span><span class="ts-title">HTML Audio</span></a><a class="ts-item " href="/notes/html/html-plug-ins/"><span class="ts-num">71</span><span class="ts-title">HTML Plug-ins</span></a><a class="ts-item " href="/notes/html/html-youtube/"><span class="ts-num">72</span><span class="ts-title">HTML YouTube</span></a></div><div class="ts-group"><div class="ts-group-label">HTML APIs</div><a class="ts-item " href="/notes/html/html-web-apis/"><span class="ts-num">73</span><span class="ts-title">HTML Web APIs</span></a><a class="ts-item " href="/notes/html/html-geolocation/"><span class="ts-num">74</span><span class="ts-title">HTML Geolocation</span></a><a class="ts-item " href="/notes/html/html-drag-and-drop/"><span class="ts-num">75</span><span class="ts-title">HTML Drag and Drop</span></a><a class="ts-item " href="/notes/html/html-web-storage/"><span class="ts-num">76</span><span class="ts-title">HTML Web Storage</span></a><a class="ts-item " href="/notes/html/html-web-workers/"><span class="ts-num">77</span><span class="ts-title">HTML Web Workers</span></a><a class="ts-item " href="/notes/html/html-sse/"><span class="ts-num">78</span><span class="ts-title">HTML SSE</span></a></div></aside></div><section class="cn-faq-section" aria-label="HTML Style Guide – FAQs"><script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What does this HTML Style Guide note cover?","acceptedAnswer":{"@type":"Answer","text":"This free note from CodingNow 2.0 explains HTML Style Guide in HTML — concept, syntax and worked code examples you can copy, run and revise before interviews."}},{"@type":"Question","name":"Is this HTML Style Guide tutorial free?","acceptedAnswer":{"@type":"Answer","text":"Yes. Every HTML topic on CodingNow 2.0, including HTML Style Guide, is 100% free with no signup required."}},{"@type":"Question","name":"How long does it take to learn HTML Style Guide?","acceptedAnswer":{"@type":"Answer","text":"With focused practice, most students grasp HTML Style Guide in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster."}},{"@type":"Question","name":"Where can I practise HTML Style Guide after reading?","acceptedAnswer":{"@type":"Answer","text":"Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours."}}]}</script><div class="cn-faq-inner"><h2 class="cn-faq-title">HTML Style Guide – FAQs</h2><p class="cn-faq-sub">Quick answers about learning HTML Style Guide in HTML.</p><div class="cn-faq-list"><div class="cn-faq-item "><button type="button" class="cn-faq-q" aria-expanded="false"><span>What does this HTML Style Guide note cover?</span><span class="cn-faq-icon" aria-hidden="true">+</span></button><div class="cn-faq-a">This free note from CodingNow 2.0 explains HTML Style Guide in HTML — concept, syntax and worked code examples you can copy, run and revise before interviews.</div></div><div class="cn-faq-item "><button type="button" class="cn-faq-q" aria-expanded="false"><span>Is this HTML Style Guide tutorial free?</span><span class="cn-faq-icon" aria-hidden="true">+</span></button><div class="cn-faq-a">Yes. Every HTML topic on CodingNow 2.0, including HTML Style Guide, is 100% free with no signup required.</div></div><div class="cn-faq-item "><button type="button" class="cn-faq-q" aria-expanded="false"><span>How long does it take to learn HTML Style Guide?</span><span class="cn-faq-icon" aria-hidden="true">+</span></button><div class="cn-faq-a">With focused practice, most students grasp HTML Style Guide in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.</div></div><div class="cn-faq-item "><button type="button" class="cn-faq-q" aria-expanded="false"><span>Where can I practise HTML Style Guide after reading?</span><span class="cn-faq-icon" aria-hidden="true">+</span></button><div class="cn-faq-a">Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.</div></div></div></div></section></main><!--$--><!--/$--></div><footer class="footer-pro"><div class="site-container"><div class="footer-pro-wrapper"><div class="footer-brand"><div class="footer-logo-wrap"><img alt="CodingNow 2.0 Logo" loading="lazy" width="50" height="50" decoding="async" data-nimg="1" style="color:transparent" src="/images/logo.jpeg"/><h2>CodingNow 2.0 <span>Gurukul of AI</span></h2></div><p>India's premier AI & Full Stack training institute — bridging the gap between education and industry with hands-on mentorship and 100% placement support.</p><div class="footer-address"><div class="addr-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin mt-0.5 shrink-0 text-amber-400" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><span>2nd Floor, Kapil Vihar, (Opp. Metro Pillar No.354)<br/>Pitampura, New Delhi – 110034</span></div><div class="addr-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone mt-0.5 shrink-0 text-amber-400" aria-hidden="true"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path></svg><span><a href="tel:+919667708830">+91 9667708830</a></span></div><div class="addr-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail mt-0.5 shrink-0 text-amber-400" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg><span><a href="mailto:info@codingnowai.com">info@codingnowai.com</a></span></div><div class="addr-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock mt-0.5 shrink-0 text-amber-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg><span>Mon – Sat: 9:00 AM – 7:00 PM</span></div></div><div class="footer-map"><h5>Find Us Here</h5><div class="map-wrapper" style="position:relative"><a href="https://www.google.com/maps?cid=8721177965519775187" target="_blank" rel="noopener noreferrer" style="position:absolute;inset:0;z-index:1" aria-label="Open CodingNow 2.0 on Google Maps"></a><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3499.5!2d77.1366043!3d28.699913!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d03f5a6f7e8b1%3A0x790b8e5e5f3e4b53!2sCoding%20Now%20-%20Gurukul%20of%20AI!5e0!3m2!1sen!2sin!4v1700000000000!5m2!1sen!2sin" allowFullScreen="" loading="lazy" referrerPolicy="no-referrer-when-downgrade" title="CodingNow 2.0 Office Location Map" style="pointer-events:none"></iframe></div></div><div class="footer-social"><a href="https://www.linkedin.com/company/codingnowai-in" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg></a><a href="https://www.instagram.com/codingnowai" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"></path></svg></a><a href="https://www.facebook.com/codingnow" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"></path></svg></a><a href="https://wa.me/919667708830" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"></path></svg></a><a href="https://www.youtube.com/@codingnowai" target="_blank" rel="noopener noreferrer" aria-label="YouTube"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg></a></div></div><div class="footer-links"><h4>AI & Data</h4><a href="/courses/generative-ai/">Generative AI</a><a href="/courses/prompt-engineering/">Prompt Engineering</a><a href="/courses/ai-engineering-diploma/">AI Engineering Diploma</a><a href="/courses/data-science/">Data Science</a><a href="/courses/data-analytics/">Data Analytics</a></div><div class="footer-links"><h4>Full Stack</h4><a href="/courses/ai-integrated-full-stack/">AI-Integrated Full Stack</a><a href="/courses/python-full-stack/">Python Full Stack</a><a href="/courses/mern-stack/">MERN Stack</a><a href="/courses/mean-stack/">MEAN Stack</a><a href="/courses/react-full-stack/">React Full Stack</a><a href="/courses/dot-net-full-stack/">.NET Full Stack</a></div><div class="footer-links"><h4>Cloud & Cyber</h4><a href="/courses/aws-developer-associate/">AWS Developer Associate</a><a href="/courses/aws-solutions-architect/">AWS Solutions Architect</a><a href="/courses/azure-administrator/">Azure Administrator</a><a href="/courses/google-cloud/">Google Cloud</a><a href="/courses/ethical-hacker/">Ethical Hacker (C|EH)</a><a href="/courses/cissp/">CISSP</a></div><div class="footer-newsletter"><h4>Stay Updated</h4><p>Get latest course updates, offers & career tips directly in your inbox.</p><div class="newsletter-box"><input type="email" placeholder="Your email" aria-label="Email for newsletter"/><button aria-label="Subscribe">→</button></div><p class="newsletter-note">No spam. Unsubscribe anytime.</p><div class="footer-links" style="margin-top:24px"><h4>Company</h4><a href="/about/">About Us</a><a href="/instructors/">Our Instructors</a><a href="/our-mission/">Our Mission</a><a href="/success-stories/">Success Stories</a><a href="/enroll-now/">Contact Us</a></div></div></div></div><hr class="footer-divider"/><div class="site-container"><div class="footer-bottom-pro"><p>© 2026 Coding Now Tech Institute Gurukul of AI. All rights reserved.</p><div class="footer-bottom-links" style="gap:12px;flex-wrap:wrap;justify-content:center"><a href="/privacy-policy">Privacy Policy</a><a href="/terms">Terms of Use</a><a href="/refund-policy">Refund Policy</a><a href="/enroll-now/">Contact</a></div></div></div></footer><a href="https://wa.me/919667708830?text=Hi%20Coding%20Now%2C%20I%20want%20to%20know%20more%20about%20your%20courses" class="floating-whatsapp" target="_blank" rel="noopener noreferrer" aria-label="Chat on WhatsApp"><img alt="WhatsApp" loading="lazy" width="48" height="48" decoding="async" data-nimg="1" style="color:transparent" src="https://cdn-icons-png.flaticon.com/512/733/733585.png"/></a><button type="button" aria-label="Open chat with advisor" aria-expanded="false" style="background:linear-gradient(135deg,#0B1F3A,#123D7A)" class="jsx-2a4304bf3e3f23e1 advisor-bubble fixed right-6 bottom-[90px] z-[99980] flex items-center gap-2 rounded-full px-5 py-3 text-white shadow-[0_8px_28px_rgba(11,31,58,0.35)] transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_14px_36px_rgba(11,31,58,0.45)] max-md:right-3 max-md:bottom-20"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><span class="jsx-2a4304bf3e3f23e1 font-poppins text-[0.85rem] font-semibold whitespace-nowrap">Talk to Advisor</span></button><div class="fixed inset-x-0 bottom-0 z-[9999] flex md:hidden border-t border-slate-200 bg-white shadow-[0_-4px_20px_rgba(0,0,0,0.1)]"><a href="tel:+919667708830" class="flex flex-1 items-center justify-center gap-2 py-3.5 font-poppins text-[0.9rem] font-bold text-[#0B1F3A] transition-colors active:bg-slate-50"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone" aria-hidden="true"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path></svg>Call Now</a><a class="flex flex-1 items-center justify-center gap-2 py-3.5 font-poppins text-[0.9rem] font-bold text-white" style="background:linear-gradient(135deg,#F59E0B,#FFB800)" href="/enroll-now/">Enroll Now</a></div><script src="/_next/static/chunks/0t1et0tty8o9s.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\na:I[68027,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/0v~7rxgfuk8kg.css\",\"style\"]\n:HL[\"/_next/static/chunks/0qwzd7-54lblh.css\",\"style\"]\n:HL[\"/_next/static/chunks/0-s~8.4pfv-up.css\",\"style\"]\n:HL[\"/_next/static/media/47fe1b7cd6e6ed85-s.p.0~mcdl10zdfb3.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/829ba4228c966254-s.p.0ub.k0om~_-xi.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/8e6fa89aa22d24ec-s.p.0uvzar8hswo3p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/a218039a3287bcfd-s.p.17-1enzs_j91b.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/e2334d715941921e-s.p.12skym0rqknxy.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:Tf6a,"])</script><script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@context\":\"https://schema.org\",\"@type\":\"EducationalOrganization\",\"name\":\"Coding Now Tech Institute Gurukul of AI\",\"alternateName\":[\"CodingNow 2.0\",\"CodingNow 2.0\",\"Gurukul of AI\",\"Coding Now Tech Institute Gurukul of AI\",\"Coding Now Tech Institute Gurukul of AI\"],\"url\":\"https://codingnowai.com\",\"logo\":\"https://codingnowai.com/images/logo.jpeg\",\"description\":\"CodingNow 2.0 offers industry-ready courses in AI, Data Science, Full Stack Development, Cloud Computing \u0026 Data Analytics with placement support.\",\"address\":{\"@type\":\"PostalAddress\",\"streetAddress\":\"2nd Floor, Kapil Vihar, Opp. Metro Pillar No.354, Pitampura\",\"addressLocality\":\"New Delhi\",\"addressRegion\":\"Delhi\",\"postalCode\":\"110034\",\"addressCountry\":\"IN\"},\"contactPoint\":{\"@type\":\"ContactPoint\",\"telephone\":\"+91-9667708830\",\"contactType\":\"customer service\",\"email\":\"info@codingnowai.com\",\"availableLanguage\":[\"English\",\"Hindi\"]},\"sameAs\":[\"https://www.linkedin.com/company/codingnow-in\",\"https://www.instagram.com/codingnow\",\"https://www.facebook.com/codingnow\",\"https://www.youtube.com/@codingnowai\",\"https://twitter.com/codingnow\"],\"aggregateRating\":{\"@type\":\"AggregateRating\",\"ratingValue\":\"4.8\",\"reviewCount\":\"3200\",\"bestRating\":\"5\"}},{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Coding Now Tech Institute Gurukul of AI\",\"alternateName\":[\"CodingNow 2.0\",\"CodingNow 2.0\",\"Gurukul of AI\",\"Coding Now Tech Institute Gurukul of AI\"],\"url\":\"https://codingnowai.com\",\"inLanguage\":\"en-IN\",\"publisher\":{\"@id\":\"https://codingnowai.com/#organization\"},\"potentialAction\":{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://codingnowai.com/community/search?q={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}},{\"@context\":\"https://schema.org\",\"@type\":[\"LocalBusiness\",\"EducationalOrganization\"],\"@id\":\"https://codingnowai.com/#organization\",\"name\":\"Coding Now Tech Institute Gurukul of AI\",\"alternateName\":[\"CodingNow 2.0\",\"CodingNow 2.0\",\"Gurukul of AI\",\"CodingNow 2.0 Delhi\",\"Coding Now Tech Institute Gurukul of AI\"],\"description\":\"CodingNow 2.0 is a top-rated coding institute in Delhi offering AI, Full Stack, Data Science, Cloud Computing \u0026 Cybersecurity courses with 100% placement support. Rated 4.8★ by 3200+ students.\",\"image\":\"https://codingnowai.com/images/logo.jpeg\",\"url\":\"https://codingnowai.com\",\"telephone\":\"+91-9667708830\",\"email\":\"info@codingnowai.com\",\"address\":{\"@type\":\"PostalAddress\",\"streetAddress\":\"2nd Floor, Kapil Vihar, Opp. Metro Pillar No.354, Pitampura\",\"addressLocality\":\"New Delhi\",\"addressRegion\":\"Delhi\",\"postalCode\":\"110034\",\"addressCountry\":\"IN\"},\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":28.699913,\"longitude\":77.1366043},\"hasMap\":\"https://www.google.com/maps?cid=8721177965519775187\",\"openingHoursSpecification\":{\"@type\":\"OpeningHoursSpecification\",\"dayOfWeek\":[\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\"],\"opens\":\"09:00\",\"closes\":\"19:00\"},\"aggregateRating\":{\"@type\":\"AggregateRating\",\"ratingValue\":\"4.8\",\"bestRating\":\"5\",\"ratingCount\":\"3200\",\"reviewCount\":\"3200\"},\"review\":[{\"@type\":\"Review\",\"author\":{\"@type\":\"Person\",\"name\":\"Rahul Sharma\"},\"datePublished\":\"2025-12-10\",\"reviewRating\":{\"@type\":\"Rating\",\"ratingValue\":\"5\",\"bestRating\":\"5\"},\"reviewBody\":\"Best coding institute in Delhi. Got placed at TCS after completing the Data Science course. Highly recommend CodingNow 2.0!\"},{\"@type\":\"Review\",\"author\":{\"@type\":\"Person\",\"name\":\"Priya Verma\"},\"datePublished\":\"2026-01-15\",\"reviewRating\":{\"@type\":\"Rating\",\"ratingValue\":\"5\",\"bestRating\":\"5\"},\"reviewBody\":\"Amazing faculty and placement support. CodingNow 2.0 Delhi helped me transition into AI engineering with a great package.\"}],\"priceRange\":\"₹₹\",\"areaServed\":[{\"@type\":\"City\",\"name\":\"Delhi\"},{\"@type\":\"AdministrativeArea\",\"name\":\"Delhi NCR\"}],\"keywords\":\"CodingNow 2.0 Delhi reviews, best coding institute Delhi, AI courses Delhi, placement guarantee Delhi\"}]}"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"notes\",\"html\",\"html-style-guide\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"notes\",{\"children\":[[\"slug\",\"html\",\"d\",null],{\"children\":[[\"topic\",\"html-style-guide\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0v~7rxgfuk8kg.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0qwzd7-54lblh.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/063f_5235lgpz.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/0z87z0wssf5~3.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"poppins_2e4530c2-module__1Mn2RG__variable\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"if(location.hostname===\\\"www.codingnowai.com\\\"){location.replace(\\\"https://codingnowai.com\\\"+location.pathname+location.search)}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2\"}}]]}],\"$L3\"]}]]}],{\"children\":[\"$L4\",{\"children\":[\"$L5\",{\"children\":[\"$L6\",{\"children\":[\"$L7\",{},null,false,null]},null,false,\"$@8\"]},null,false,\"$@8\"]},null,false,null]},null,false,null],\"$L9\",false]],\"m\":\"$undefined\",\"G\":[\"$a\",[\"$Lb\",\"$Lc\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"yCGwSt23I1m49qIDrsJon\"}\n"])</script><script>self.__next_f.push([1,"d:I[42364,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\"],\"SiteHeader\"]\ne:I[39756,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\"],\"default\"]\nf:I[37457,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\"],\"default\"]\n10:I[22016,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\",\"/_next/static/chunks/1582pnnvs.4wi.js\"],\"\"]\n11:I[5014,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\",\"/_next/static/chunks/1582pnnvs.4wi.js\"],\"default\"]\n12:I[42364,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\"],\"SiteFooter\"]\n13:I[42364,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\"],\"SiteOverlays\"]\n14:I[79520,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\"],\"\"]\n16:I[97367,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\"],\"OutletBoundary\"]\n17:\"$Sreact.suspense\"\n1a:I[97367,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\"],\"ViewportBoundary\"]\n1c:I[97367,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\"],\"MetadataBoundary\"]\n"])</script><script>self.__next_f.push([1,"3:[\"$\",\"body\",null,{\"children\":[[\"$\",\"$Ld\",null,{}],[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen flex items-center justify-center bg-gradient-to-br from-[#0B1F3A] via-[#1E3A8A] to-[#0B1F3A] px-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-center max-w-md\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-[120px] md:text-[160px] font-black text-white/10 leading-none select-none\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"text-2xl md:text-3xl font-bold text-white -mt-8 mb-3\",\"children\":\"Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-300 text-sm md:text-base mb-8\",\"children\":\"The page you're looking for doesn't exist or has been moved. Let's get you back on track.\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col sm:flex-row items-center justify-center gap-4\",\"children\":[[\"$\",\"$L10\",null,{\"href\":\"/\",\"className\":\"flex items-center gap-2 bg-white text-[#0B1F3A] font-semibold px-6 py-3 rounded-lg hover:bg-gray-100 transition-colors\",\"children\":[[\"$\",\"$L11\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\",\"key\":\"5wwlr5\"}],[\"path\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\",\"key\":\"r6nss1\"}]],\"className\":\"lucide-house\",\"size\":18}],\" Go Home\"]}],[\"$\",\"$L10\",null,{\"href\":\"/courses\",\"className\":\"flex items-center gap-2 border border-white/30 text-white font-semibold px-6 py-3 rounded-lg hover:bg-white/10 transition-colors\",\"children\":[[\"$\",\"$L11\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m12 19-7-7 7-7\",\"key\":\"1l729n\"}],[\"path\",{\"d\":\"M19 12H5\",\"key\":\"x3x0zl\"}]],\"className\":\"lucide-arrow-left\",\"size\":18}],\" Browse Courses\"]}],[\"$\",\"$L10\",null,{\"href\":\"/blog\",\"className\":\"flex items-center gap-2 border border-white/30 text-white font-semibold px-6 py-3 rounded-lg hover:bg-white/10 transition-colors\",\"children\":[[\"$\",\"$L11\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$3:props:children:1:props:notFound:0:props:children:props:children:3:props:children:1:props:children:0:props:iconNode\",\"className\":\"lucide-arrow-left\",\"size\":18}],\" Read the Blog\"]}]]}]]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L12\",null,{}],[\"$\",\"$L13\",null,{}],[\"$\",\"$L14\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=AW-623989731\",\"strategy\":\"lazyOnload\"}],[\"$\",\"$L14\",null,{\"id\":\"gtag-init\",\"strategy\":\"lazyOnload\",\"children\":\"window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','AW-623989731');gtag('event','conversion',{'send_to':'AW-623989731/w1_-CJuGm64cEOOnxakC','value':1.0,'currency':'INR'});\"}]]}]\n"])</script><script>self.__next_f.push([1,"4:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0-s~8.4pfv-up.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"div\",null,{\"className\":\"cn-notes\",\"children\":[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]\n5:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n6:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[\"$L15\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/1582pnnvs.4wi.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@18\"}]}]]}]\n19:[]\n8:\"$W19\"\n9:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L1a\",null,{\"children\":\"$L1b\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L1c\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L1d\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\nb:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0v~7rxgfuk8kg.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\nc:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0qwzd7-54lblh.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script><script>self.__next_f.push([1,"1f:I[5500,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\",\"/_next/static/chunks/1582pnnvs.4wi.js\"],\"Image\"]\n1e:T587,"])</script><script>self.__next_f.push([1,"[{\"@context\":\"https://schema.org\",\"@type\":\"TechArticle\",\"@id\":\"https://codingnowai.com/notes/html/html-style-guide#article\",\"headline\":\"HTML Style Guide\",\"description\":\"Consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.\",\"author\":{\"@type\":\"Organization\",\"name\":\"Coding Now Tech Institute Gurukul of AI\",\"url\":\"https://codingnowai.com\"},\"publisher\":{\"@type\":\"Organization\",\"name\":\"Coding Now Tech Institute Gurukul of AI\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://codingnowai.com/images/logo.jpeg\"}},\"url\":\"https://codingnowai.com/notes/html/html-style-guide\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://codingnowai.com/notes/html/html-style-guide\"},\"inLanguage\":\"en-IN\",\"wordCount\":1504,\"isPartOf\":{\"@type\":\"CreativeWorkSeries\",\"name\":\"HTML Notes\",\"url\":\"https://codingnowai.com/notes/html\"},\"speakable\":{\"@type\":\"SpeakableSpecification\",\"cssSelector\":[\"h1\",\"h2\",\".post-body \u003e p:first-of-type\"]},\"profiling\":{\"@type\":\"Text\",\"name\":\"code-example\"}},{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://codingnowai.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Notes\",\"item\":\"https://codingnowai.com/notes\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML Notes\",\"item\":\"https://codingnowai.com/notes/html\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"HTML Style Guide\"}]}]"])</script><script>self.__next_f.push([1,"15:[\"$\",\"main\",null,{\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$1e\"}}],[\"$\",\"section\",null,{\"className\":\"post-hero\",\"children\":[\"$\",\"div\",null,{\"className\":\"container\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"crumb\",\"aria-label\":\"Breadcrumb\",\"children\":[[\"$\",\"$L10\",null,{\"href\":\"/\",\"children\":\"Home\"}],[\"$\",\"span\",null,{\"className\":\"sep\",\"children\":\"/\"}],[\"$\",\"$L10\",null,{\"href\":\"/notes\",\"children\":\"Notes\"}],[\"$\",\"span\",null,{\"className\":\"sep\",\"children\":\"/\"}],[\"$\",\"$L10\",null,{\"href\":\"/notes/html\",\"children\":\"HTML\"}],[\"$\",\"span\",null,{\"className\":\"sep\",\"children\":\"/\"}],[[\"$\",\"$L10\",null,{\"href\":\"/notes/html#cat-html-tutorial\",\"children\":\"HTML Tutorial\"}],[\"$\",\"span\",null,{\"className\":\"sep\",\"children\":\"/\"}]],[\"$\",\"span\",null,{\"className\":\"cur\",\"children\":\"HTML Style Guide\"}]]}],[\"$\",\"$L10\",null,{\"href\":\"/notes/html\",\"className\":\"post-back\",\"children\":[[\"$\",\"$L11\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$3:props:children:1:props:notFound:0:props:children:props:children:3:props:children:1:props:children:0:props:iconNode\",\"className\":\"lucide-arrow-left\",\"size\":14}],\" Back to \",\"HTML\",\" Notes\"]}],[\"$\",\"br\",null,{}],[\"$\",\"$L1f\",null,{\"src\":\"/svgs/HTML.svg\",\"alt\":\"\",\"width\":40,\"height\":40,\"unoptimized\":true,\"className\":\"hero-icon\"}],[\"$\",\"span\",null,{\"className\":\"post-cat-badge\",\"children\":[\"Topic #\",53]}],[\"$\",\"h1\",null,{\"className\":\"post-title\",\"children\":\"HTML Style Guide\"}],[\"$\",\"div\",null,{\"className\":\"post-meta\",\"children\":[[\"$\",\"span\",null,{\"children\":[\"HTML\",\" Notes · CodingNow 2.0\"]}],[\"$\",\"span\",null,{\"children\":[8,\" min read\"]}],false,[\"$\",\"a\",null,{\"href\":\"https://www.w3schools.com/html/html5_syntax.asp\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"style\":{\"color\":\"inherit\",\"textDecoration\":\"underline\"},\"children\":\"Source\"}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"note-layout\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"nav\",null,{\"className\":\"lesson-outline\",\"aria-label\":\"In this lesson\",\"children\":[[\"$\",\"strong\",null,{\"children\":\"In this lesson\"}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"a\",\"always-declare-document-type\",{\"href\":\"#always-declare-document-type\",\"children\":\"Always Declare Document Type\"}],[\"$\",\"a\",\"use-lowercase-element-names\",{\"href\":\"#use-lowercase-element-names\",\"children\":\"Use Lowercase Element Names\"}],[\"$\",\"a\",\"close-all-html-elements\",{\"href\":\"#close-all-html-elements\",\"children\":\"Close All HTML Elements\"}],[\"$\",\"a\",\"use-lowercase-attribute-names\",{\"href\":\"#use-lowercase-attribute-names\",\"children\":\"Use Lowercase Attribute Names\"}],[\"$\",\"a\",\"always-quote-attribute-values\",{\"href\":\"#always-quote-attribute-values\",\"children\":\"Always Quote Attribute Values\"}],[\"$\",\"a\",\"always-specify-alt-width-and-height-for-images\",{\"href\":\"#always-specify-alt-width-and-height-for-images\",\"children\":\"Always Specify alt, width, and height for Images\"}],\"$L20\",\"$L21\",\"$L22\",\"$L23\",\"$L24\",\"$L25\",\"$L26\",\"$L27\",\"$L28\",\"$L29\",\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\"]}]]}],\"$L32\",\"$L33\",\"$L34\"]}],\"$L35\"]}],\"$L36\"]}]\n"])</script><script>self.__next_f.push([1,"64:I[46042,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\",\"/_next/static/chunks/1582pnnvs.4wi.js\"],\"default\"]\n20:[\"$\",\"a\",\"spaces-and-equal-signs\",{\"href\":\"#spaces-and-equal-signs\",\"children\":\"Spaces and Equal Signs\"}]\n21:[\"$\",\"a\",\"avoid-long-code-lines\",{\"href\":\"#avoid-long-code-lines\",\"children\":\"Avoid Long Code Lines\"}]\n22:[\"$\",\"a\",\"blank-lines-and-indentation\",{\"href\":\"#blank-lines-and-indentation\",\"children\":\"Blank Lines and Indentation\"}]\n23:[\"$\",\"a\",\"never-skip-the-element\",{\"href\":\"#never-skip-the-element\",\"children\":\"Never Skip the Element\"}]\n24:[\"$\",\"a\",\"omitting-and\",{\"href\":\"#omitting-and\",\"children\":\"Omitting and ?\"}]\n25:[\"$\",\"a\",\"omitting\",{\"href\":\"#omitting\",\"children\":\"Omitting ?\"}]\n26:[\"$\",\"a\",\"close-empty-html-elements\",{\"href\":\"#close-empty-html-elements\",\"children\":\"Close Empty HTML Elements?\"}]\n27:[\"$\",\"a\",\"add-the-lang-attribute\",{\"href\":\"#add-the-lang-attribute\",\"children\":\"Add the lang Attribute\"}]\n28:[\"$\",\"a\",\"meta-data\",{\"href\":\"#meta-data\",\"children\":\"Meta Data\"}]\n29:[\"$\",\"a\",\"setting-the-viewport\",{\"href\":\"#setting-the-viewport\",\"children\":\"Setting The Viewport\"}]\n2a:[\"$\",\"a\",\"html-comments\",{\"href\":\"#html-comments\",\"children\":\"HTML Comments\"}]\n2b:[\"$\",\"a\",\"using-style-sheets\",{\"href\":\"#using-style-sheets\",\"children\":\"Using Style Sheets\"}]\n2c:[\"$\",\"a\",\"loading-javascript-in-html\",{\"href\":\"#loading-javascript-in-html\",\"children\":\"Loading JavaScript in HTML\"}]\n2d:[\"$\",\"a\",\"accessing-html-elements-with-javascript\",{\"href\":\"#accessing-html-elements-with-javascript\",\"children\":\"Accessing HTML Elements with JavaScript\"}]\n2e:[\"$\",\"a\",\"use-lower-case-file-names\",{\"href\":\"#use-lower-case-file-names\",\"children\":\"Use Lower Case File Names\"}]\n2f:[\"$\",\"a\",\"file-extensions\",{\"href\":\"#file-extensions\",\"children\":\"File Extensions\"}]\n30:[\"$\",\"a\",\"differences-between-htm-and-html\",{\"href\":\"#differences-between-htm-and-html\",\"children\":\"Differences Between .htm and .html?\"}]\n31:[\"$\",\"a\",\"default-filenames\",{\"href\":\"#default-filenames\",\"children\":\"Default Filenames\"}]\n37:T39c6,"])</script><script>self.__next_f.push([1,"\u003chr\u003e\n\u003cp\u003eConsistent, clean, and tidy HTML code makes it easier for others to read and understand your code.\u003c/p\u003e\n\u003cp\u003eHere are some guidelines and tips for creating good HTML code.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"always-declare-document-type\"\u003eAlways Declare Document Type\u003c/h2\u003e\n\u003cp\u003eAlways declare the document type as the first line in your document.\u003c/p\u003e\n\u003cp\u003eThe correct document type for HTML is:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;!DOCTYPE html\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"use-lowercase-element-names\"\u003eUse Lowercase Element Names\u003c/h2\u003e\n\u003cp\u003eHTML allows mixing uppercase and lowercase letters in element names.\u003c/p\u003e\n\u003cp\u003eHowever, we recommend using lowercase element names, because:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eMixing uppercase and lowercase names looks bad\u003c/li\u003e\n\u003cli\u003eDevelopers normally use lowercase names\u003c/li\u003e\n\u003cli\u003eLowercase looks cleaner\u003c/li\u003e\n\u003cli\u003eLowercase is easier to type\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003eGood:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;body\u003e\n\n\u0026#x3C;p\u003eThis is a paragraph.\u0026#x3C;/p\u003e\n\n\u0026#x3C;/body\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eBad:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;BODY\u003e\n\n\u0026#x3C;P\u003eThis is a paragraph.\u0026#x3C;/P\u003e\n\n\u0026#x3C;/BODY\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"close-all-html-elements\"\u003eClose All HTML Elements\u003c/h2\u003e\n\u003cp\u003eIn HTML, you do not have to close all elements (for example the \u003ccode\u003e\u0026#x3C;p\u003e\u003c/code\u003e element).\u003c/p\u003e\n\u003cp\u003eHowever, we strongly recommend closing all HTML elements, like this:\u003c/p\u003e\n\u003ch3\u003eGood:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;section\u003e\n \u0026#x3C;p\u003eThis is a paragraph.\u0026#x3C;/p\u003e\n \u0026#x3C;p\u003eThis is a paragraph.\u0026#x3C;/p\u003e\n\n \u0026#x3C;/section\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eBad:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;section\u003e\n \u0026#x3C;p\u003eThis is a paragraph.\n \u0026#x3C;p\u003eThis is a paragraph.\n\n \u0026#x3C;/section\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"use-lowercase-attribute-names\"\u003eUse Lowercase Attribute Names\u003c/h2\u003e\n\u003cp\u003eHTML allows mixing uppercase and lowercase letters in attribute names.\u003c/p\u003e\n\u003cp\u003eHowever, we recommend using lowercase attribute names, because:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eMixing uppercase and lowercase names looks bad\u003c/li\u003e\n\u003cli\u003eDevelopers normally use lowercase names\u003c/li\u003e\n\u003cli\u003eLowercase looks cleaner\u003c/li\u003e\n\u003cli\u003eLowercase is easier to type\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003eGood:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;a href=\"https://www.w3schools.com/html/\"\u003eVisit our HTML tutorial\u0026#x3C;/a\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eBad:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;a HREF=\"https://www.w3schools.com/html/\"\u003eVisit our HTML tutorial\u0026#x3C;/a\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"always-quote-attribute-values\"\u003eAlways Quote Attribute Values\u003c/h2\u003e\n\u003cp\u003eHTML allows attribute values without quotes.\u003c/p\u003e\n\u003cp\u003eHowever, we recommend quoting attribute values, because:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eDevelopers normally quote attribute values\u003c/li\u003e\n\u003cli\u003eQuoted values are easier to read\u003c/li\u003e\n\u003cli\u003eYou MUST use quotes if the value contains spaces\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003eGood:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;table\n class=\"striped\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eBad:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;table class=striped\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eVery bad:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;table class=table striped\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"always-specify-alt-width-and-height-for-images\"\u003eAlways Specify alt, width, and height for Images\u003c/h2\u003e\n\u003cp\u003eAlways specify the \u003ccode\u003ealt\u003c/code\u003e attribute for images. This attribute is important if the image for some reason cannot be displayed.\u003c/p\u003e\n\u003cp\u003eAlso, always define the \u003ccode\u003ewidth\u003c/code\u003e and \u003ccode\u003e height\u003c/code\u003e of images. This reduces flickering, because the browser can reserve space for the image before loading.\u003c/p\u003e\n\u003ch3\u003eGood:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;img\n src=\"html5.gif\" alt=\"HTML5\" style=\"width:128px;height:128px\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eBad:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;img\n src=\"html5.gif\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"spaces-and-equal-signs\"\u003eSpaces and Equal Signs\u003c/h2\u003e\n\u003cp\u003eHTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.\u003c/p\u003e\n\u003ch3\u003eGood:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;link rel=\"stylesheet\" href=\"styles.css\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eBad:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;link\n rel = \"stylesheet\" href = \"styles.css\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"avoid-long-code-lines\"\u003eAvoid Long Code Lines\u003c/h2\u003e\n\u003cp\u003eWhen using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code.\u003c/p\u003e\n\u003cp\u003eTry to avoid too long code lines.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"blank-lines-and-indentation\"\u003eBlank Lines and Indentation\u003c/h2\u003e\n\u003cp\u003eDo not add blank lines, spaces, or indentations without a reason.\u003c/p\u003e\n\u003cp\u003eFor readability, add blank lines to separate large or logical code blocks.\u003c/p\u003e\n\u003cp\u003eFor readability, add two spaces of indentation. Do not use the tab key.\u003c/p\u003e\n\u003ch3\u003eGood:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;body\u003e\n\n\u0026#x3C;h1\u003eFamous Cities\u0026#x3C;/h1\u003e\n\n\u0026#x3C;h2\u003eTokyo\u0026#x3C;/h2\u003e\n\n \u0026#x3C;p\u003eTokyo is the capital of Japan, the\n center of the Greater Tokyo Area, and the most\n populous metropolitan area in the world.\u0026#x3C;/p\u003e\n\n\u0026#x3C;h2\u003eLondon\u0026#x3C;/h2\u003e\n\n \u0026#x3C;p\u003eLondon is the capital city of England. It is the most populous city\n in the United Kingdom.\u0026#x3C;/p\u003e\n\n\u0026#x3C;h2\u003eParis\u0026#x3C;/h2\u003e\n\n \u0026#x3C;p\u003eParis is the capital of France. The Paris area is one of the\n largest population centers in Europe.\u0026#x3C;/p\u003e\n\n\u0026#x3C;/body\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eBad:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;body\u003e\n\u0026#x3C;h1\u003eFamous Cities\u0026#x3C;/h1\u003e\n\u0026#x3C;h2\u003eTokyo\u0026#x3C;/h2\u003e\u0026#x3C;p\u003eTokyo is the capital of Japan, the\n center of the Greater Tokyo Area, and the most\n populous metropolitan area in the world.\u0026#x3C;/p\u003e\n\u0026#x3C;h2\u003eLondon\u0026#x3C;/h2\u003e\u0026#x3C;p\u003eLondon\n is the capital city of England. It is the most populous city in the United\n Kingdom.\u0026#x3C;/p\u003e\n\u0026#x3C;h2\u003eParis\u0026#x3C;/h2\u003e\u0026#x3C;p\u003eParis is the capital\n of France. The Paris area is one of the largest population centers in Europe.\u0026#x3C;/p\u003e\n\u0026#x3C;/body\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eGood Table Example:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;table\u003e\n \u0026#x3C;tr\u003e\n \u0026#x3C;th\u003eName\u0026#x3C;/th\u003e\n\n \u0026#x3C;th\u003eDescription\u0026#x3C;/th\u003e\n\n \u0026#x3C;/tr\u003e\n \u0026#x3C;tr\u003e\n \u0026#x3C;td\u003eA\u0026#x3C;/td\u003e\n\n \u0026#x3C;td\u003eDescription of A\u0026#x3C;/td\u003e\n\n \u0026#x3C;/tr\u003e\n \u0026#x3C;tr\u003e\n \u0026#x3C;td\u003eB\u0026#x3C;/td\u003e\n\n \u0026#x3C;td\u003eDescription of B\u0026#x3C;/td\u003e\n \u0026#x3C;/tr\u003e\n\u0026#x3C;/table\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eGood List Example:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;ul\u003e\n \u0026#x3C;li\u003eLondon\u0026#x3C;/li\u003e\n \u0026#x3C;li\u003eParis\u0026#x3C;/li\u003e\n\n \u0026#x3C;li\u003eTokyo\u0026#x3C;/li\u003e\n\u0026#x3C;/ul\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"never-skip-the-element\"\u003eNever Skip the \u003ctitle\u003e Element\u003c/h2\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;title\u003e\u003c/code\u003e element is required in HTML.\u003c/p\u003e\n\u003cp\u003eThe contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026#x3C;title\u003e\u003c/code\u003e element:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003edefines a title in the browser toolbar\u003c/li\u003e\n\u003cli\u003eprovides a title for the page when it is added to favorites\u003c/li\u003e\n\u003cli\u003edisplays a title for the page in search-engine results\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eSo, try to make the title as accurate and meaningful as possible:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;title\u003eHTML\n Style Guide and Coding Conventions\u0026#x3C;/title\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"omitting-and\"\u003eOmitting \u003chtml\u003e and \u003cbody\u003e?\u003c/h2\u003e\n\u003cp\u003eAn HTML page will validate without the \u003ccode\u003e\u0026#x3C;html\u003e\u003c/code\u003e and \u003ccode\u003e\u0026#x3C;body\u003e\u003c/code\u003e tags:\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;!DOCTYPE html\u003e\n\u0026#x3C;head\u003e\n \u0026#x3C;title\u003ePage Title\u0026#x3C;/title\u003e\n\n \u0026#x3C;/head\u003e\n\n \u0026#x3C;h1\u003eThis is a heading\u0026#x3C;/h1\u003e\n\u0026#x3C;p\u003eThis is a paragraph.\u0026#x3C;/p\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eHowever, we strongly recommend to always add the \u003ccode\u003e\u0026#x3C;html\u003e\u003c/code\u003e and \u003ccode\u003e\u0026#x3C;body\u003e\u003c/code\u003e tags!\u003c/p\u003e\n\u003cp\u003eOmitting \u003ccode\u003e\u0026#x3C;body\u003e\u003c/code\u003e can produce errors in older browsers.\u003c/p\u003e\n\u003cp\u003eOmitting \u003ccode\u003e\u0026#x3C;html\u003e\u003c/code\u003e and \u003ccode\u003e\u0026#x3C;body\u003e\u003c/code\u003e can also crash DOM and XML software.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"omitting\"\u003eOmitting \u003chead\u003e?\u003c/h2\u003e\n\u003cp\u003eThe HTML \u003chead\u003e tag can also be omitted.\u003c/p\u003e\n\u003cp\u003eBrowsers will add all elements before \u003ccode\u003e\u0026#x3C;body\u003e\u003c/code\u003e, to a default \u003ccode\u003e\u0026#x3C;head\u003e\u003c/code\u003e element.\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;!DOCTYPE html\u003e\n\u0026#x3C;html\u003e\n\u0026#x3C;title\u003ePage Title\u0026#x3C;/title\u003e\n\n \u0026#x3C;body\u003e\n\n\u0026#x3C;h1\u003eThis is a heading\u0026#x3C;/h1\u003e\n\u0026#x3C;p\u003eThis is a paragraph.\u0026#x3C;/p\u003e\n\n\u0026#x3C;/body\u003e\n\u0026#x3C;/html\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eHowever, we recommend using the \u003ccode\u003e\u0026#x3C;head\u003e\u003c/code\u003e tag.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"close-empty-html-elements\"\u003eClose Empty HTML Elements?\u003c/h2\u003e\n\u003cp\u003eIn HTML, it is optional to close empty elements.\u003c/p\u003e\n\u003ch3\u003eAllowed:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;meta\n charset=\"utf-8\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch3\u003eAlso Allowed:\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;meta charset=\"utf-8\" /\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eIf you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"add-the-lang-attribute\"\u003eAdd the lang Attribute\u003c/h2\u003e\n\u003cp\u003eYou should always include the \u003ccode\u003elang\u003c/code\u003e attribute inside the \u003ccode\u003e\u0026#x3C;html\u003e\u003c/code\u003e tag, to declare the language of the Web page. This is meant to assist search engines and browsers.\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;!DOCTYPE html\u003e\n\u0026#x3C;html lang=\"en-us\"\u003e\n\u0026#x3C;head\u003e\n \u0026#x3C;title\u003ePage Title\u0026#x3C;/title\u003e\n\n \u0026#x3C;/head\u003e\n\u0026#x3C;body\u003e\n\n\u0026#x3C;h1\u003eThis is a\n heading\u0026#x3C;/h1\u003e\n\u0026#x3C;p\u003eThis is a paragraph.\u0026#x3C;/p\u003e\n\n\u0026#x3C;/body\u003e\n\u0026#x3C;/html\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"meta-data\"\u003eMeta Data\u003c/h2\u003e\n\u003cp\u003eTo ensure proper interpretation and correct search engine indexing, both the language and the character encoding \u003ccode\u003e\u0026#x3C;meta charset=\"charset\"\u003e\u003c/code\u003e should be defined as early as possible in an HTML document:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e \u0026#x3C;!DOCTYPE html\u003e\n\u0026#x3C;html\n lang=\"en-us\"\u003e\n\u0026#x3C;head\u003e\n \u0026#x3C;meta charset=\"UTF-8\"\u003e\n\n \u0026#x3C;title\u003ePage Title\u0026#x3C;/title\u003e\n\u0026#x3C;/head\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"setting-the-viewport\"\u003eSetting The Viewport\u003c/h2\u003e\n\u003cp\u003eThe viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.\u003c/p\u003e\n\u003cp\u003eYou should include the following \u003ccode\u003e\u0026#x3C;meta\u003e\u003c/code\u003e element in all your web pages:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis gives the browser instructions on how to control the page's dimensions and scaling.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003ewidth=device-width\u003c/code\u003e part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003einitial-scale=1.0\u003c/code\u003e part sets the initial zoom level when the page is first loaded by the browser.\u003c/p\u003e\n\u003cp\u003eHere is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e\u003cstrong\u003eTip:\u003c/strong\u003e If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003chr\u003e\n\u003ch2 id=\"html-comments\"\u003eHTML Comments\u003c/h2\u003e\n\u003cp\u003eShort comments should be written on one line, like this:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;!-- This is a comment --\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eComments that span more than one line, should be written like this:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;!--\n This is a long comment example. This is\n a long comment example.\n This is a\n long comment example. This is a long comment example.\n--\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eLong comments are easier to observe if they are indented with two spaces.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"using-style-sheets\"\u003eUsing Style Sheets\u003c/h2\u003e\n\u003cp\u003eUse simple syntax for linking to style sheets (the \u003ccode\u003e type\u003c/code\u003e attribute is not necessary):\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;link rel=\"stylesheet\" href=\"styles.css\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eShort CSS rules can be written compressed, like this:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-css\"\u003ep.intro {font-family:Verdana;font-size:16em;}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eLong CSS rules should be written over multiple lines:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-css\"\u003ebody {\n background-color: lightgrey;\n font-family: \"Arial\nBlack\", Helvetica, sans-serif;\n font-size: 16em;\n color:\nblack;\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cul\u003e\n\u003cli\u003ePlace the opening bracket on the same line as the selector\u003c/li\u003e\n\u003cli\u003eUse one space before the opening bracket\u003c/li\u003e\n\u003cli\u003eUse two spaces of indentation\u003c/li\u003e\n\u003cli\u003eUse semicolon after each property-value pair, including the last\u003c/li\u003e\n\u003cli\u003eOnly use quotes around values if the value contains spaces\u003c/li\u003e\n\u003cli\u003ePlace the closing bracket on a new line, without leading spaces\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003ch2 id=\"loading-javascript-in-html\"\u003eLoading JavaScript in HTML\u003c/h2\u003e\n\u003cp\u003eUse simple syntax for loading external scripts (the \u003ccode\u003e type\u003c/code\u003e attribute is not necessary):\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026#x3C;script src=\"myscript.js\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"accessing-html-elements-with-javascript\"\u003eAccessing HTML Elements with JavaScript\u003c/h2\u003e\n\u003cp\u003eUsing \"untidy\" HTML code can result in JavaScript errors.\u003c/p\u003e\n\u003cp\u003eThese two JavaScript statements will produce different results:\u003c/p\u003e\n\u003ch3\u003eExample\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003e getElementById(\"Demo\").innerHTML = \"Hello\";\n\ngetElementById(\"demo\").innerHTML\n = \"Hello\";\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eVisit the JavaScript Style Guide.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"use-lower-case-file-names\"\u003eUse Lower Case File Names\u003c/h2\u003e\n\u003cp\u003eSome web servers (Apache, Unix) are case sensitive about file names: \"london.jpg\" cannot be accessed as \"London.jpg\".\u003c/p\u003e\n\u003cp\u003eOther web servers (Microsoft, IIS) are not case sensitive: \"london.jpg\" can be accessed as \"London.jpg\".\u003c/p\u003e\n\u003cp\u003eIf you use a mix of uppercase and lowercase, you have to be aware of this.\u003c/p\u003e\n\u003cp\u003eIf you move from a case-insensitive to a case-sensitive server, even small errors will break your website!\u003c/p\u003e\n\u003cp\u003eTo avoid these problems, always use lowercase file names!\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"file-extensions\"\u003eFile Extensions\u003c/h2\u003e\n\u003cp\u003eHTML files should have a .html extension (.htm is allowed).\u003c/p\u003e\n\u003cp\u003eCSS files should have a .css extension.\u003c/p\u003e\n\u003cp\u003eJavaScript files should have a .js extension.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"differences-between-htm-and-html\"\u003eDifferences Between .htm and .html?\u003c/h2\u003e\n\u003cp\u003eThere is no difference between the .htm and .html file extensions!\u003c/p\u003e\n\u003cp\u003eBoth will be treated as HTML by any web browser and web server.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"default-filenames\"\u003eDefault Filenames\u003c/h2\u003e\n\u003cp\u003eWhen a URL does not specify a filename at the end (like \"\u003ca href=\"https://www.w3schools.com/\"\u003ehttps://www.w3schools.com/\u003c/a\u003e\"), the server just adds a default filename, such as \"index.html\", \"index.htm\", \"default.html\", or \"default.htm\".\u003c/p\u003e\n\u003cp\u003eIf your server is configured only with \"index.html\" as the default filename, your file must be named \"index.html\", and not \"default.html\".\u003c/p\u003e\n\u003cp\u003eHowever, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.\u003c/p\u003e\n"])</script><script>self.__next_f.push([1,"32:[\"$\",\"div\",null,{\"className\":\"post-body\",\"children\":[[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"$37\"}}],\"$L38\"]}]\n33:[\"$\",\"div\",null,{\"className\":\"prevnext\",\"children\":[[\"$\",\"$L10\",null,{\"href\":\"/notes/html/html-semantics\",\"className\":\"pn-btn pn-prev\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1\",\"children\":[[\"$\",\"$L11\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$3:props:children:1:props:notFound:0:props:children:props:children:3:props:children:1:props:children:0:props:iconNode\",\"className\":\"lucide-arrow-left\",\"size\":13}],\" Previous\"]}],[\"$\",\"strong\",null,{\"children\":\"HTML Semantics\"}]]}],[\"$\",\"$L10\",null,{\"href\":\"/notes/html/html-entities\",\"className\":\"pn-btn pn-next\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1\",\"children\":[\"Next \",[\"$\",\"$L11\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M5 12h14\",\"key\":\"1ays0h\"}],[\"path\",{\"d\":\"m12 5 7 7-7 7\",\"key\":\"xquz4c\"}]],\"className\":\"lucide-arrow-right\",\"size\":13}]]}],[\"$\",\"strong\",null,{\"children\":\"HTML Entities\"}]]}]]}]\n34:[\"$\",\"div\",null,{\"className\":\"note-cta\",\"children\":[[\"$\",\"h3\",null,{\"children\":\"Want to go beyond the notes?\"}],[\"$\",\"p\",null,{\"children\":[\"Join CodingNow 2.0's \",\"HTML\",\" course — live mentorship, real projects, and 100% placement support.\"]}],[\"$\",\"$L10\",null,{\"href\":\"/enroll-now\",\"children\":\"Enroll Now — Free Demo Available\"}]]}]\n"])</script><script>self.__next_f.push([1,"35:[\"$\",\"aside\",null,{\"className\":\"topics-side\",\"children\":[[\"$\",\"h4\",null,{\"children\":[\"HTML\",\" Notes — All Topics\"]}],[[\"$\",\"div\",\"html-tutorial\",{\"className\":\"ts-group\",\"children\":[[\"$\",\"div\",null,{\"className\":\"ts-group-label\",\"children\":\"HTML Tutorial\"}],[[\"$\",\"$L10\",\"html-home\",{\"href\":\"/notes/html/html-home\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":1}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML HOME\"}]]}],[\"$\",\"$L10\",\"html-introduction\",{\"href\":\"/notes/html/html-introduction\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":2}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Introduction\"}]]}],[\"$\",\"$L10\",\"html-editors\",{\"href\":\"/notes/html/html-editors\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":3}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Editors\"}]]}],[\"$\",\"$L10\",\"html-basic\",{\"href\":\"/notes/html/html-basic\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":4}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Basic\"}]]}],[\"$\",\"$L10\",\"html-elements\",{\"href\":\"/notes/html/html-elements\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":5}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Elements\"}]]}],[\"$\",\"$L10\",\"html-attributes\",{\"href\":\"/notes/html/html-attributes\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":6}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Attributes\"}]]}],[\"$\",\"$L10\",\"html-headings\",{\"href\":\"/notes/html/html-headings\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":7}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Headings\"}]]}],[\"$\",\"$L10\",\"html-paragraphs\",{\"href\":\"/notes/html/html-paragraphs\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":8}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Paragraphs\"}]]}],[\"$\",\"$L10\",\"html-styles\",{\"href\":\"/notes/html/html-styles\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":9}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Styles\"}]]}],[\"$\",\"$L10\",\"html-formatting\",{\"href\":\"/notes/html/html-formatting\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":10}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Formatting\"}]]}],[\"$\",\"$L10\",\"html-quotations\",{\"href\":\"/notes/html/html-quotations\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":11}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Quotations\"}]]}],[\"$\",\"$L10\",\"html-comments\",{\"href\":\"/notes/html/html-comments\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":12}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Comments\"}]]}],[\"$\",\"$L10\",\"html-colors\",{\"href\":\"/notes/html/html-colors\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":13}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Colors\"}]]}],[\"$\",\"$L10\",\"rgb\",{\"href\":\"/notes/html/rgb\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":14}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"RGB\"}]]}],[\"$\",\"$L10\",\"hex\",{\"href\":\"/notes/html/hex\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":15}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HEX\"}]]}],[\"$\",\"$L10\",\"hsl\",{\"href\":\"/notes/html/hsl\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":16}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HSL\"}]]}],[\"$\",\"$L10\",\"html-css\",{\"href\":\"/notes/html/html-css\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":17}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML CSS\"}]]}],[\"$\",\"$L10\",\"html-links\",{\"href\":\"/notes/html/html-links\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":18}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Links\"}]]}],[\"$\",\"$L10\",\"link-colors\",{\"href\":\"/notes/html/link-colors\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":19}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Link Colors\"}]]}],[\"$\",\"$L10\",\"link-bookmarks\",{\"href\":\"/notes/html/link-bookmarks\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":20}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Link Bookmarks\"}]]}],[\"$\",\"$L10\",\"html-images\",{\"href\":\"/notes/html/html-images\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":21}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Images\"}]]}],\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\",\"$L3f\",\"$L40\",\"$L41\",\"$L42\",\"$L43\",\"$L44\",\"$L45\",\"$L46\",\"$L47\",\"$L48\",\"$L49\",\"$L4a\",\"$L4b\",\"$L4c\",\"$L4d\",\"$L4e\",\"$L4f\",\"$L50\",\"$L51\",\"$L52\",\"$L53\",\"$L54\",\"$L55\",\"$L56\",\"$L57\",\"$L58\",\"$L59\",\"$L5a\",\"$L5b\",\"$L5c\",\"$L5d\",\"$L5e\"]]}],\"$L5f\",\"$L60\",\"$L61\",\"$L62\"]]}]\n"])</script><script>self.__next_f.push([1,"63:T47e,{\"@context\":\"https://schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What does this HTML Style Guide note cover?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"This free note from CodingNow 2.0 explains HTML Style Guide in HTML — concept, syntax and worked code examples you can copy, run and revise before interviews.\"}},{\"@type\":\"Question\",\"name\":\"Is this HTML Style Guide tutorial free?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. Every HTML topic on CodingNow 2.0, including HTML Style Guide, is 100% free with no signup required.\"}},{\"@type\":\"Question\",\"name\":\"How long does it take to learn HTML Style Guide?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"With focused practice, most students grasp HTML Style Guide in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.\"}},{\"@type\":\"Question\",\"name\":\"Where can I practise HTML Style Guide after reading?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.\"}}]}36:[\"$\",\"section\",null,{\"className\":\"cn-faq-section\",\"aria-label\":\"HTML Style Guide – FAQs\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$63\"}}],[\"$\",\"div\",null,{\"className\":\"cn-faq-inner\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"cn-faq-title\",\"children\":\"HTML Style Guide – FAQs\"}],[\"$\",\"p\",null,{\"className\":\"cn-faq-sub\",\"children\":\"Quick answers about learning HTML Style Guide in HTML.\"}],[\"$\",\"$L64\",null,{\"faqs\":[{\"q\":\"What does this HTML Style Guide note cover?\",\"a\":\"This free note from CodingNow 2.0 explains HTML Style Guide in HTML — concept, syntax and worked code examples you can copy, run and revise before interviews.\"},{\"q\":\"Is this HTML Style Guide tutorial free?\",\"a\":\"Yes. Every HTML topic on CodingNow 2.0, including HTML Style Guide, is 100% free with no signup required.\"},{\"q\":\"How long does it take to learn HTML Style Guide?\",\"a\":\"With focused practice, most students grasp HTML Style Guide in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.\"},{\"q\":\"Where can I practise HTML Style Guide after reading?\",\"a\":\"Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.\"}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"38:[\"$\",\"div\",null,{\"className\":\"share-bar\",\"children\":[[\"$\",\"strong\",null,{\"children\":\"Share:\"}],[\"$\",\"a\",null,{\"href\":\"https://wa.me/?text=HTML%20Style%20Guide%20https%3A%2F%2Fcodingnowai.com%2Fnotes%2Fhtml%2Fhtml-style-guide\",\"target\":\"_blank\",\"rel\":\"noopener\",\"className\":\"share-btn s-wa\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 448 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":14,\"width\":14,\"xmlns\":\"http://www.w3.org/2000/svg\"}],\" WhatsApp\"]}],[\"$\",\"a\",null,{\"href\":\"https://www.linkedin.com/shareArticle?mini=true\u0026url=https%3A%2F%2Fcodingnowai.com%2Fnotes%2Fhtml%2Fhtml-style-guide\u0026title=HTML%20Style%20Guide\",\"target\":\"_blank\",\"rel\":\"noopener\",\"className\":\"share-btn s-li\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 448 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":14,\"width\":14,\"xmlns\":\"http://www.w3.org/2000/svg\"}],\" LinkedIn\"]}],[\"$\",\"a\",null,{\"href\":\"https://twitter.com/intent/tweet?url=https%3A%2F%2Fcodingnowai.com%2Fnotes%2Fhtml%2Fhtml-style-guide\u0026text=HTML%20Style%20Guide\",\"target\":\"_blank\",\"rel\":\"noopener\",\"className\":\"share-btn s-cp\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":14,\"width\":14,\"xmlns\":\"http://www.w3.org/2000/svg\"}],\" Copy / Share\"]}]]}]\n"])</script><script>self.__next_f.push([1,"39:[\"$\",\"$L10\",\"image-map\",{\"href\":\"/notes/html/image-map\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":22}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Image Map\"}]]}]\n3a:[\"$\",\"$L10\",\"background-images\",{\"href\":\"/notes/html/background-images\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":23}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Background Images\"}]]}]\n3b:[\"$\",\"$L10\",\"the-picture-element\",{\"href\":\"/notes/html/the-picture-element\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":24}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"The Picture Element\"}]]}]\n3c:[\"$\",\"$L10\",\"html-project\",{\"href\":\"/notes/html/html-project\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":25}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Project\"}]]}]\n3d:[\"$\",\"$L10\",\"html-favicon\",{\"href\":\"/notes/html/html-favicon\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":26}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Favicon\"}]]}]\n3e:[\"$\",\"$L10\",\"html-page-title\",{\"href\":\"/notes/html/html-page-title\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":27}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Page Title\"}]]}]\n3f:[\"$\",\"$L10\",\"html-tables\",{\"href\":\"/notes/html/html-tables\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":28}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Tables\"}]]}]\n40:[\"$\",\"$L10\",\"table-borders\",{\"href\":\"/notes/html/table-borders\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":29}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Table Borders\"}]]}]\n41:[\"$\",\"$L10\",\"table-sizes\",{\"href\":\"/notes/html/table-sizes\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":30}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Table Sizes\"}]]}]\n42:[\"$\",\"$L10\",\"table-headers\",{\"href\":\"/notes/html/table-headers\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":31}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Table Headers\"}]]}]\n43:[\"$\",\"$L10\",\"padding-spacing\",{\"href\":\"/notes/html/padding-spacing\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":32}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Padding \u0026 Spacing\"}]]}]\n44:[\"$\",\"$L10\",\"colspan-rowspan\",{\"href\":\"/notes/html/colspan-rowspan\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":33}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Colspan \u0026 Rowspan\"}]]}]\n45:[\"$\",\"$L10\",\"table-styling\",{\"href\":\"/notes/html/table-styling\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":34}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Table Styling\"}]]}]\n46:[\"$\",\"$L10\",\"table-colgroup\",{\"href\":\"/notes/html/table-colgroup\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":35}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Table Colgroup\"}]]}]\n47:[\"$\",\"$L10\",\"html-lists\",{\"href\":\"/notes/html/html-lists\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":36}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Lists\"}]]}]\n48:[\"$\",\"$L10\",\"unordered-lists\",{\"href\":\"/notes/html/unordered-lists\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":37}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Unordered Lists\"}]]}]\n49:[\"$\",\"$L10\",\"ordered-lists\",{\"href\":\"/notes/html/ordered-lists\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":38}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Ordered Lists\"}]]}]\n4a:[\"$\",\"$L10\",\"other-lists\",{\"href\":\"/notes/html/other-lists\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":39}],[\"$\",\"span\""])</script><script>self.__next_f.push([1,",null,{\"className\":\"ts-title\",\"children\":\"Other Lists\"}]]}]\n4b:[\"$\",\"$L10\",\"html-block-inline\",{\"href\":\"/notes/html/html-block-inline\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":40}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Block \u0026 Inline\"}]]}]\n4c:[\"$\",\"$L10\",\"html-div\",{\"href\":\"/notes/html/html-div\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":41}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Div\"}]]}]\n4d:[\"$\",\"$L10\",\"html-classes\",{\"href\":\"/notes/html/html-classes\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":42}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Classes\"}]]}]\n4e:[\"$\",\"$L10\",\"html-id\",{\"href\":\"/notes/html/html-id\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":43}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Id\"}]]}]\n4f:[\"$\",\"$L10\",\"html-buttons\",{\"href\":\"/notes/html/html-buttons\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":44}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Buttons\"}]]}]\n50:[\"$\",\"$L10\",\"html-iframes\",{\"href\":\"/notes/html/html-iframes\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":45}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Iframes\"}]]}]\n51:[\"$\",\"$L10\",\"html-javascript\",{\"href\":\"/notes/html/html-javascript\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":46}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML JavaScript\"}]]}]\n52:[\"$\",\"$L10\",\"html-file-paths\",{\"href\":\"/notes/html/html-file-paths\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":47}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML File Paths\"}]]}]\n53:[\"$\",\"$L10\",\"html-head\",{\"href\":\"/notes/html/html-head\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":48}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Head\"}]]}]\n54:[\"$\",\"$L10\",\"html-layout\",{\"href\":\"/notes/html/html-layout\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":49}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Layout\"}]]}]\n55:[\"$\",\"$L10\",\"html-responsive\",{\"href\":\"/notes/html/html-responsive\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":50}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Responsive\"}]]}]\n56:[\"$\",\"$L10\",\"html-computercode\",{\"href\":\"/notes/html/html-computercode\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":51}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Computercode\"}]]}]\n57:[\"$\",\"$L10\",\"html-semantics\",{\"href\":\"/notes/html/html-semantics\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":52}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Semantics\"}]]}]\n58:[\"$\",\"$L10\",\"html-style-guide\",{\"href\":\"/notes/html/html-style-guide\",\"className\":\"ts-item active\",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":53}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Style Guide\"}]]}]\n59:[\"$\",\"$L10\",\"html-entities\",{\"href\":\"/notes/html/html-entities\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":54}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Entities\"}]]}]\n5a:[\"$\",\"$L10\",\"html-symbols\",{\"href\":\"/notes/html/html-symbols\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":55}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Symbols\"}]]}]\n5b:[\"$\",\"$L10\",\"html-emojis\",{\"href\":\"/notes/html/html-emojis\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":56}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Emojis\"}]]}]\n5c:[\"$\",\"$L10\",\"html-charsets\",{\"href\":\"/notes/html/html-charsets\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\""])</script><script>self.__next_f.push([1,"ts-num\",\"children\":57}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Charsets\"}]]}]\n5d:[\"$\",\"$L10\",\"html-url-encode\",{\"href\":\"/notes/html/html-url-encode\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":58}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML URL Encode\"}]]}]\n5e:[\"$\",\"$L10\",\"html-vs-xhtml\",{\"href\":\"/notes/html/html-vs-xhtml\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":59}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML vs. XHTML\"}]]}]\n"])</script><script>self.__next_f.push([1,"5f:[\"$\",\"div\",\"html-forms\",{\"className\":\"ts-group\",\"children\":[[\"$\",\"div\",null,{\"className\":\"ts-group-label\",\"children\":\"HTML Forms\"}],[[\"$\",\"$L10\",\"html-forms\",{\"href\":\"/notes/html/html-forms\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":60}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Forms\"}]]}],[\"$\",\"$L10\",\"html-form-attributes\",{\"href\":\"/notes/html/html-form-attributes\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":61}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Form Attributes\"}]]}],[\"$\",\"$L10\",\"html-form-elements\",{\"href\":\"/notes/html/html-form-elements\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":62}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Form Elements\"}]]}],[\"$\",\"$L10\",\"html-input-types\",{\"href\":\"/notes/html/html-input-types\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":63}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Input Types\"}]]}],[\"$\",\"$L10\",\"html-input-attributes\",{\"href\":\"/notes/html/html-input-attributes\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":64}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Input Attributes\"}]]}],[\"$\",\"$L10\",\"input-form-attributes\",{\"href\":\"/notes/html/input-form-attributes\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":65}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"Input Form Attributes\"}]]}]]]}]\n"])</script><script>self.__next_f.push([1,"60:[\"$\",\"div\",\"html-graphics\",{\"className\":\"ts-group\",\"children\":[[\"$\",\"div\",null,{\"className\":\"ts-group-label\",\"children\":\"HTML Graphics\"}],[[\"$\",\"$L10\",\"html-canvas\",{\"href\":\"/notes/html/html-canvas\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":66}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Canvas\"}]]}],[\"$\",\"$L10\",\"html-svg\",{\"href\":\"/notes/html/html-svg\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":67}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML SVG\"}]]}]]]}]\n61:[\"$\",\"div\",\"html-media\",{\"className\":\"ts-group\",\"children\":[[\"$\",\"div\",null,{\"className\":\"ts-group-label\",\"children\":\"HTML Media\"}],[[\"$\",\"$L10\",\"html-media\",{\"href\":\"/notes/html/html-media\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":68}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Media\"}]]}],[\"$\",\"$L10\",\"html-video\",{\"href\":\"/notes/html/html-video\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":69}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Video\"}]]}],[\"$\",\"$L10\",\"html-audio\",{\"href\":\"/notes/html/html-audio\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":70}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Audio\"}]]}],[\"$\",\"$L10\",\"html-plug-ins\",{\"href\":\"/notes/html/html-plug-ins\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":71}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Plug-ins\"}]]}],[\"$\",\"$L10\",\"html-youtube\",{\"href\":\"/notes/html/html-youtube\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":72}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML YouTube\"}]]}]]]}]\n"])</script><script>self.__next_f.push([1,"62:[\"$\",\"div\",\"html-apis\",{\"className\":\"ts-group\",\"children\":[[\"$\",\"div\",null,{\"className\":\"ts-group-label\",\"children\":\"HTML APIs\"}],[[\"$\",\"$L10\",\"html-web-apis\",{\"href\":\"/notes/html/html-web-apis\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":73}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Web APIs\"}]]}],[\"$\",\"$L10\",\"html-geolocation\",{\"href\":\"/notes/html/html-geolocation\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":74}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Geolocation\"}]]}],[\"$\",\"$L10\",\"html-drag-and-drop\",{\"href\":\"/notes/html/html-drag-and-drop\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":75}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Drag and Drop\"}]]}],[\"$\",\"$L10\",\"html-web-storage\",{\"href\":\"/notes/html/html-web-storage\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":76}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Web Storage\"}]]}],[\"$\",\"$L10\",\"html-web-workers\",{\"href\":\"/notes/html/html-web-workers\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":77}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML Web Workers\"}]]}],[\"$\",\"$L10\",\"html-sse\",{\"href\":\"/notes/html/html-sse\",\"className\":\"ts-item \",\"children\":[[\"$\",\"span\",null,{\"className\":\"ts-num\",\"children\":78}],[\"$\",\"span\",null,{\"className\":\"ts-title\",\"children\":\"HTML SSE\"}]]}]]]}]\n"])</script><script>self.__next_f.push([1,"1b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"65:I[27201,[\"/_next/static/chunks/0~zccwm3lhu_r.js\",\"/_next/static/chunks/0dzi_k6v11u.s.js\",\"/_next/static/chunks/063f_5235lgpz.js\",\"/_next/static/chunks/0z87z0wssf5~3.js\"],\"IconMark\"]\n18:null\n"])</script><script>self.__next_f.push([1,"1d:[[\"$\",\"title\",\"0\",{\"children\":\"HTML Style Guide – HTML Notes | CodingNow 2.0 | Coding Now Tech Institute Gurukul of AI\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://codingnowai.com\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"CodingNow 2.0\"}],[\"$\",\"link\",\"4\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"5\",{\"name\":\"keywords\",\"content\":\"html html style guide,html style guide notes,html style guide tutorial,html style guide with examples,learn html\"}],[\"$\",\"meta\",\"6\",{\"name\":\"creator\",\"content\":\"CodingNow 2.0\"}],[\"$\",\"meta\",\"7\",{\"name\":\"publisher\",\"content\":\"CodingNow 2.0\"}],[\"$\",\"meta\",\"8\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"9\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"10\",{\"name\":\"geo.region\",\"content\":\"IN-DL\"}],[\"$\",\"meta\",\"11\",{\"name\":\"geo.placename\",\"content\":\"Pitampura, Delhi\"}],[\"$\",\"meta\",\"12\",{\"name\":\"geo.position\",\"content\":\"28.699913;77.1366043\"}],[\"$\",\"meta\",\"13\",{\"name\":\"ICBM\",\"content\":\"28.699913, 77.1366043\"}],[\"$\",\"link\",\"14\",{\"rel\":\"canonical\",\"href\":\"https://codingnowai.com/notes/html/html-style-guide/\"}],[\"$\",\"meta\",\"15\",{\"name\":\"format-detection\",\"content\":\"telephone=no, address=no, email=no\"}],[\"$\",\"meta\",\"16\",{\"name\":\"google-site-verification\",\"content\":\"F393WPQyD7LpOobyT3QAGfAuhUxWEkniflvikb81CjE\"}],[\"$\",\"meta\",\"17\",{\"name\":\"msvalidate01\",\"content\":\"08F1AAA96A9BAF5FD3981FFE4F93AE3D\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:title\",\"content\":\"HTML Style Guide – HTML Notes | CodingNow 2.0\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:description\",\"content\":\"Consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:url\",\"content\":\"https://codingnowai.com/notes/html/html-style-guide/\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:title\",\"content\":\"Coding Now Tech Institute Gurukul of AI\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:description\",\"content\":\"Learn AI, Data Science \u0026 Full Stack with real-world mentorship and placement support.\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:image\",\"content\":\"https://codingnowai.com/images/og-image.png\"}],[\"$\",\"link\",\"26\",{\"rel\":\"shortcut icon\",\"href\":\"/images/icons/favicon.ico\"}],[\"$\",\"link\",\"27\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0x3dzn~oxb6tn.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"28\",{\"rel\":\"icon\",\"href\":\"/images/icons/favicon.ico\",\"sizes\":\"any\"}],[\"$\",\"link\",\"29\",{\"rel\":\"icon\",\"href\":\"/images/icons/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"30\",{\"rel\":\"icon\",\"href\":\"/images/icons/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"31\",{\"rel\":\"icon\",\"href\":\"/images/icons/android-chrome-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"link\",\"32\",{\"rel\":\"icon\",\"href\":\"/images/icons/android-chrome-512x512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"33\",{\"rel\":\"apple-touch-icon\",\"href\":\"/images/icons/apple-touch-icon.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}],[\"$\",\"$L65\",\"34\",{}]]\n"])</script></body></html>
