HTML Coding

HTML Coding Basics – Digital Marketing Apprenticeship

Learn how HTML works for the DM3 apprentice

In the Digital Marketing Level 3 Apprenticeship, HTML is arguably the hardest assessment you will face, spending roughly 2 weeks in workshops learning coding from scratch.

You’ll work together with your fellow apprentices to create your own websites for you to practice with. The teacher will guide you through creating HTML files to explain the different tags, attributes, elements and more! Suddenly all that confusing code that you’ve never been able to understand will all make sense.

Coding can lead to all these jobs:

  • Software Application Developer 
  • Web Developer 
  • Database Administrator 
  • Software Quality Assurance Engineer 
  • Network Administrator 
  • Computer Systems Engineer 
  • Computer Systems Analyst 
  • Business Intelligence Analyst 

Let’s get coding!

HTML coding apprenticeship
Let’s get coding!

“Whether you want to uncover the secrets of the universe, or you just want to pursue a career in the 21st century, basic computer programming is an essential skill to learn.”

– Stephen Hawking – Theoretical Physicist

HTML – Headings

There are 6 HTML heading elements that start from 1, descending in size and importance. In HTML their syntax looks like this:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

When rendered by the browser the tags look like this:

Heading HTML example

Rules of using Heading tags:

It’s very important to remember that each heading tag has a specific meaning when it comes to the structure of the HTML page. Search Engine Optimisation can be greatly affected by improper use of heading tags.

If you use <h3> to describe your main heading the browser won’t recognise that this is the most important heading. Remember to stay in order. <h1> then <h2> then <h3>, if you starting a paragraph after <h2> then you can use <h2> again if this is your desire. Only use one <h1> per page, this allows the browser to only need focus on one main heading. Avoid nesting headings too far into your code as the browser may miss them.

HTML – Paragraphs

These elements are used to display a block of text. In HTML its syntax looks like this:

<p>  This is a block of text! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

The paragraph tag is used to help screen readers to find the text it needs to read. That’s why the alternative text on images is so important, so someone who is say blind can still understand what is happening on screen. Making the internet assessable for all.

HTML – Comments

Sometimes when dealing with HTML you’ll want to edit or remove code. Maybe because it’s not working correctly or you want, for example, a form to be hidden for the time being. Using comments to stop syntax from being read is the best way to do this. This is how you use it:

<!– Comments go between these tags. –>

HTML – Tags

Now you’ve seen some examples of HTML syntax it’s time to discuss the rules of tags, using <p> to explain. When writing syntax most tags have two parts a start tag and an end tag.

<p>Content</p>

The end tag includes the / to show that the instructions are over. When wanting to nest tags within tags, for example, making the text bold there is a correct order that the tags need to be in.

<p><strong>Content</strong></p>

If you don’t write them in order the browser simply won’t render them or you’ll have a confusing mess of symbols!

Sometimes you only want to make one work in your text bold:

<p>More<strong>important</strong>content</p>=More important content

This can get more and more complicated the more you add to the code so make sure to stagger the code in the HTML file so you can read it easier, kind of like how you’d order a list.

Here are some more tags for you to check out

Overview

These are just a few things that you will touch upon during the Principles of Coding (for level 3 Digital Marketer Apprenticeship). But sure to use Codecademy to get a head start there are loads of free resources you can use. If you really enjoyed learning about code and aren’t already doing Digital Marketing Level 3 find out more here

Leave a Comment