How to preview HTML code snippets in Chrome [Tip]

HTML (Hyper-Text-Markup-Language) is the basic website code. Whilst you can set up websites with WYSISWYG software, some website designers use HTML editors instead. Those who design their pages with HTML editors should check out the Run Selected HTML extension that previews selected demo code.

You can add the extension to Google Chrome from this page. There click on the + Free option to add the extension to the browser.

Then you’ll need to find a page with some demo HTML code on it. Hold the left mouse button and drag the cursor over the HTML to select it as in the shot below. Next, you should right-click to open the context menu that will now include a Run Selected HTML option.

HTML

Now go ahead and select that option. When you select the option, a new page tab will open with the HTML code output as below. The preview shows you what the HTML code adds to the page.

HTML2

I’ve found a couple of HTML code snippets for you to preview with the extension. The first snippet of code is an HTML table. The second bit of HTML is a drop-down list from which you can select browsers.

Table

<table border=“1” style=“width:100%”>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Drop-down List

<form action=“demo_form.asp” method=“get”>
<input list=“browsers”>
<datalist id=“browsers”>
<option value=“Internet Explorer”>
<option value=“Firefox”>
<option value=“Chrome”>
<option value=“Opera”>
<option value=“Safari”>
</datalist>
</form>

So with this extension website designers can preview HTML before they add it to their pages.  To preview some HTML code, check out this website.

Related Posts