<hr />

<h1 class="aligncenter">We are moving from <strong>HTML<span style="background:

#4485b8; color: #fff; padding: 0 5px 8px; border-radius: 0 0 20px
20px;">&nbsp;g&nbsp;</span></strong> to <strong>HTML<span style="background:
#134e7b; color: #fff; padding: 3px 5px 5px; border-radius: 0 0 20px
20px;">&nbsp;6&nbsp;</span></strong></h1>
<hr />
<p class="aligncenter" style="font-size: 1.3em;">Beside changing one character in
the URL, we have given the interface a minor facelift and incorporated new features
that we believe will prove beneficial&nbsp;to&nbsp;you. <br />We welcome any
feedback, so please do not hesitate to <a href="/contact/">get in
touch&nbsp;with&nbsp;us</a>.</p>
<!-- ####### Comments are visible in the source editor ###### -->
<h3 style="color: #3271a2; font-size: 36px;">You can edit <span style="background-
color: #3271a2; color: #ffffff; padding: 0 5px;">this demo</span> text!</h3>
<p><strong style="color: #000;">Basic usage:</strong> Paste your documents in the
visual editor on the left or your HTML code in the source editor in the right.
<br />Edit any of the two areas and see the other changing in real time.&nbsp;</p>
<h4>Use the table below to test most of the features</h4>
<table class="editorDemoTable" style="vertical-align: top;">
<thead>
<tr>
<td>Title</td>
<td style="width: 42%;">Example 1</td>
<td style="width: 42%;">Example 2</td>
</tr>
</thead>
<tbody>
<tr>
<td style="min-width: 140px;"><strong>Inline styles</strong></td>
<td>Using <span style="font-weight: bold; color: #000; text-decoration:
underline;">inline styles</span> in your HTML document is a bad practice because
<strong style="font-weight: normal; font-size: 1.1em; color: #00a; font-family:
monospace; letter-spacing: -2px;">they break the default styles of the
website</strong>!</td>
<td>Use classes and IDs instead!
<div style="height: 20px; width: 100%; border: 3px dotted #888; background-color:
rgba(0,0,0,0.2);">&nbsp;</div>
</td>
</tr>
<tr>
<td><strong>Setting margins</strong></td>
<td style="background-color: rgba(0,0,0,0.1);">
<p>&nbsp;&nbsp;&nbsp;Do not use &nbsp; &nbsp; &nbsp; &nbsp;spaces &nbsp; &nbsp;
&nbsp;or &nbsp; &nbsp; &nbsp; empty paragraphs</p>
<p>&nbsp;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp;to set vertical and horizontal &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; gaps.</p>
</td>
<td><span style="line-height: 35px;">&larr;| &nbsp;Use <span style="margin:
5px;">margin, &nbsp;&nbsp;</span> <span style="padding: 5px;">padding, &nbsp;
&rarr;|</span> <br />and line-height instead <strong style="font-size:
20px;">↕</strong> </span></td>
</tr>
<tr>
<td><strong>Links and images</strong></td>
<td><a style="font-weight: bold; color: #000; cursor: pointer; text-decoration:
underline;" title="Demo link" rel="nofollow" href="https://html-online.com"
target="_blank">This is a text link</a> and this is an image: <img style="border:
2px solid #3271a2; border-radius: 15px;" src="/img/smiley.png" alt="laughing"
width="20" height="20" /></td>
<td>And this is a link image: <a style="cursor: pointer;" title="Image link"
rel="nofollow" href="https://html6.com" target="_blank"><img src="/img/smiley.png"
alt="smiley" /></a></td>
</tr>
<tr>
<td><strong>Tables and lists</strong></td>
<td>
<table style="margin: auto; box-shadow: 3px 3px 10px #000;" border="1">
<tbody>
<tr style="border-top: 2px solid #555;">
<td style="border: 2px dashed #555;">First cell</td>
<td>Second column</td>
<td>Upper corner</td>
</tr>
<tr style="background-color: rgba(0,0,0,0.1);">
<td>Bottom row</td>
<td>Middle bottom</td>
<td>Right corner</td>
</tr>
</tbody>
</table>
</td>
<td>
<ol>
<li>Demonstrating an ordered list</li>
<li>These are&nbsp;special characters: <span style="color: red; font-size:
17px;">&hearts;</span> <strong style="font-size: 20px;">☺ ★</strong> &gt;&lt;</li>
<li>item 2</li>
</ol>
</td>
</tr>
<tr>
<td valign="top"><strong>Floating an image</strong></td>
<td>
<h4>Floating with inline style</h4>
<p><img style="margin: 0 0 5px 20px; float: right;"
src="https://html6.com/img/hero-400.png" alt="hero image" width="120"
height="127" />We can float an image to the right assigning the "style" attribute
and giving it the following value: <strong>margin: 0 0 5px 20px; float:
right;</strong></p>
</td>
<td>
<h4>Floating with classes</h4>
<p><img class="imageRight" src="https://html6.com/img/hero-400.png" alt="hero
image" width="120" height="127" />We need to avoid inline styles as much as
possible. A more elegant way of floating an image along the text is through a class
or ID attribute: <strong>class="imageRight"</strong></p>
</td>
</tr>
</tbody>
</table>
<hr />
<p>Set up the cleaning options and click the <span style="background-color:
#3271a2; color: #fff; display: inline-block; padding: 2px 8px; font-weight: bold;
border-radius: 5px;">Clean</span> button, try the <strong>Tag manager</strong>, or
experiment with the <strong>Find and replace tool</strong>.</p>
<p><em>You can always access this demonstration text clicking the
<strong>DEMO</strong> menu item.</em></p>
<hr />
<h2 style="text-align: center;">Still Stuck With HTML5 Since&nbsp;2008?</h2>
<h3 style="text-align: center;">It's&nbsp;time to start using&nbsp;HTML6!</h3>
<div class="alignCenter">
<div class="inlineBlock width400">
<div class="inlineBlock width100">
<p><img src="https://html6.com/img/editor.svg" alt="2 editors svg" /></p>
</div>
<div class="inlineBlock width200">
<h3>What is HTML6?</h3>
<p>The name might suggest that it is a new HTML version but it's
even&nbsp;better.</p>
<p>HTML6 is the next level <strong>HTML editor&nbsp;</strong>that will make your
life&nbsp;easier and your work more&nbsp;efficient.</p>
<p><a class="demoButton" rel="nofollow" href="https://html6.com/editor/">Try the
free Demo</a></p>
</div>
</div>
<div class="inlineBlock width400">
<div class="inlineBlock width100">
<p><img src="https://html6.com/img/license.svg" alt="g6 license" /></p>
</div>
<div class="inlineBlock width200">
<h3>HTMLg Rebranded</h3>
<p>We have been around <a rel="nofollow"
href="https://web.archive.org/web/20151003110959/http://htmlg.com/"
target="_blank">since 2015 </a> on <strong>HTMLg.com</strong>&nbsp;domain.</p>
<p>Don't worry though, we're still hosting the <a rel="nofollow"
href="https://html6.com/editor/">best HTML&nbsp;editor</a> possible, we just
changed one character in&nbsp;the&nbsp;link.</p>
<p><a class="demoButton" rel="nofollow" href="https://html6.com/license/">Purchase
a License</a></p>
</div>
</div>
</div>
<div class="alignCenter">
<div class="inlineBlock width500">
<div class="inlineBlock width100">
<p><img src="https://html6.com/img/hero-400.png" alt="shield logo" /></p>
</div>
<div class="inlineBlock width300">
<h2>HTML6&nbsp;Editor</h2>
<p>Converting documents to HTML or migrating content?<br />Automate web content
editing tasks and make HTML composing Super Easy with our online editor.<br
/>Become Extremely Efficient and&nbsp;Error-Free!</p>
</div>
</div>
</div>
<h3>Main features</h3>
<ul>
<li><strong>Converter</strong> &ndash; Convert your Word and other visual documents
to HTML&nbsp;instantly.</li>
<li><strong>WYSIWYG</strong> &ndash; Create and edit content visually without
needing to&nbsp;code.</li>
<li><strong>Live Editors</strong> &ndash; Change the visual document and the code
in&nbsp;real-time.</li>
<li><strong>Cleaner</strong> &ndash; Set the cleaning options and execute them with
a single&nbsp;click.</li>
<li><strong>Easy To Use</strong> &ndash; Super user-friendly and we're always here
to&nbsp;help.</li>
<li><strong>No Ties</strong> &ndash; Purchasing a license is a one-time expense. No
recurring&nbsp;payments.</li>
</ul>
<div class="alignCenter">
<div class="inlineBlock">
<div class="inlineBlock width100">
<p><img src="https://html6.com/img/perfico.svg" alt="3 screens icon" /></p>
</div>
<div class="inlineBlock width250">
<h2>Suitable for Everyone</h2>
<h3>Easy to use</h3>
<p>HTML6 was designed to be easy to use with a basic understanding of the HTML
code.<br />It's a great tool for learning HTML markup.<br />With many useful free
and premium&nbsp;features.</p>
</div>
</div>
<div class="inlineBlock width400">
<div class="inlineBlock width100">
<p><img src="https://html6.com/img/flexico.svg" alt="mobile email svg" /></p>
</div>
<div class="inlineBlock width200">
<h3>Easy access</h3>
<ul>
<li>No registration</li>
<li>No download</li>
<li>No installation</li>
</ul>
<p>HTML6 runs in your web browser accessing a web link, even if you have premium
members' access.</p>
</div>
</div>
</div>
<div class="alignCenter">
<div class="inlineBlock width600">
<div class="inlineBlock width200">
<p><img src="https://html6.com/img/bnb.png" alt="html editor screenshot" /></p>
</div>
<div class="inlineBlock width300">
<h2>Premium Features</h2>
<p>For the price of a monthly beer you can access all features anytime without
limitations, ads and annoying popups.</p>
<ul>
<li>No ads</li>
<li>No character limit</li>
<li>Save your settings</li>
</ul>
<p>One-time payment without automatic renewals.</p>
<p><a class="demoButton" rel="nofollow" href="https://html6.com/license/">Premium
Plans</a></p>
</div>
</div>
</div>
<h2>Features never seen before</h2>
<p>The <strong>tag filter </strong>allows you to extract or delete certain parts of
tags that match your&nbsp;criteria.<br />For example to list images that don't have
<em>alt</em> attributes or delete outbound&nbsp;links.</p>
<p><img src="https://html6.com/img/panel/tag-filter.png" alt="tag filter"
style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>The <strong>tag attribute filter </strong>lets you to list or get rid of certain
attributes.<br />For example to extract all links or image files from the
document.</p>
<p><img src="https://html6.com/img/panel/tag-attribute-filter.png" alt="attribute
filter" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>The <strong>tag manager </strong>bulk replaces and deletes your tags or their
desired&nbsp;parts.<br />For example replaces tables with structured divs or
deletes the tag attributes of spans&nbsp;etc.</p>
<p><img src="https://html6.com/img/panel/html-tag-manager.png" alt="tag manager"
style="display: block; margin-left: auto; margin-right: auto;" /></p>
<h2 style="text-align: center;"><span>Still Not Convinced?</span></h2>
<p style="text-align: center;">Try our demo and other free web design tools
below.</p>
<p style="text-align: center;"><a class="demoButton" rel="nofollow"
href="https://html6.com/editor/">Try it for free</a> &nbsp;<span>or&nbsp;
&nbsp;</span><a class="demoButton" rel="nofollow"
href="https://html6.com/license/">Purchase a License</a></p>
<h3>Useful Links</h3>
<ul>
<li><a rel="nofollow" href="https://html6.com/editor/"><strong> Compose </strong>
&ndash; WYSIWYG HTML Editor&nbsp;&amp;&nbsp;Cleaner &ndash; <em> html6.com
</em></a></li>
<li><a rel="nofollow" href="https://htmlcheatsheet.com/"><strong> CheatSheets
</strong> &ndash; Interactive HTML Cheat&nbsp;Sheet &ndash; <em> HTHL Cheat
Sheet.com </em></a></li>
<li><a rel="nofollow" href="https://html-css-js.com/"><strong> All In 1 </strong>
&ndash; The client side of the&nbsp;web. &ndash; <em> html-css-js.com
</em></a></li>
<li><a rel="nofollow" href="https://htmltable.com/"><strong> Tables </strong>
&ndash; Generate and style HTML&nbsp;Tables. &ndash; <em> HTMLtable.com
</em></a></li>
<li><a rel="nofollow" href="https://rgbcolorcode.com/"><strong> Color </strong>
&ndash; Pick and mix the RGB&nbsp;Colors &ndash; <em> RGB Color Code.com
</em></a></li>
<li><a rel="nofollow" href="https://html-online.com/articles/"><strong> Blog
</strong> &ndash; What's News in Wed&nbsp;Dev? &ndash; <em> HTML-Online.com
</em></a></li>
</ul>