HTML Structure

HTML code makes up the basic structure of every webpage.

There are two primary sections to any webpage, the and the .

All of the content between the tags is invisible on your site. This information is used by browsers and search engines. It will contain things like your Facebook Pixel and Google Analytics ID that need to run in the background of your site. It will also contain your Page Title and Meta Description which will display in search results. 

For example:

  


  
This content is visible on your webpage

All of the content between the tags is content that is visible on your site.

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:

This is a heading 1 tag

This is a paragraph tag

This is a link tag

Tags can be nested inside of each other.

For example:

  

    
A Great Product

    
This is an amazing product. If you buy it will change your life.

  

On Shopify you can control the appearance of text in the theme editor and on product pages with the Rich Text Editor which will look like any word processor, or you can go in to the HTML Editor and format your page content.

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 %}
This text is now hidden
{% endcomment %}

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

You may notice comments if you are looking at the source code in your Shopify theme. 

If you want to learn more about coding, visit w3schools.com for free lessons.