A Guide to HTML Code Basics

HTML Structure

HTML code makes up the basic structure of every webpage.

There are two primary sections, the ‘head’ and the ‘body’.

All of the content between the ‘head’ tags is invisible on your site. This information is used by browsers and search engines.

All of the content between ‘body’ tags is shown on your site.

For example:

<head>
<title>This content is not visible on your webpages</title>
</head>
<body>
<h1>This content is visible on your webpage</h1>
</body>


HTML Tags

HTML is made up of code that is referred to as ‘tags’

Each tag has an ‘opening tag’ and a ‘closing tag’. The content that appears on your webpage is added in between the tags.

There are different tags for different types of content.

For example:

<h1>This is a heading 1 tag</h1>
<p>This is a paragraph tag</p>
<a>This is a link tag</a>

Tags can be nested inside of each other.

For example:

<body>
<div>
<h1>A Great Product</h1>
<p>This is an amazing product. If you buy it will change your life.</p>
</div>
</body>


HTML & Comments

A special type of code can be added around a piece of HTML code called a ‘comment’

Similar to tags comments have an ‘opening comment' and a ‘closing comment'.

All the code and text inside of an opening and closing comment will become invisible.

A comment in a Shopify theme looks like this:

{% comment %}<h1>This text is now hidden</h1>{% endcomment %}

Placing comments around code can be a useful way to prevent something loading onto your site without permanently deleting that code.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us