transparent-claire-nicholson-logo

6 Most Important HTML Snippets for your Website | National Coding Week

by | Sep 16, 2021 | Website Development

It’s National Coding Week! How well do you know these important HTML snippets?

Have you found yourself making updates to your business’ website?

With limited resources, it can seem like a complicated and confusing task, but did you know what there are a few important HTML snippets that can make your life a lot easier?

To mark the week, read on to see the 6 most important HTML snippets you should be using on your life science website. Even if you’re using a page builder on a CMS such as WordPress or Squarespace, manually coding some of the website elements can help you speed up performance and achieve a more complex design to your website overall. Website performance is also a key factor in SEO – making sure that your website can rank higher up the Google search engine rankings.

If you’re not sure how your website performs, you can head to Google PageSpeed Insights to do a test on your website.

collection-of-web-screens
What is a HTML tag? How do you use a tag for your life science website?
HTML is essentially a series of instructions to your internet browser on how to convert your webpage code into something that functions on the front end of a website. HTML tags come in two parts – an “open tag” and a “close tag”. This is almost like the “start” and “stop” instruction for your code. They look a bit like this: <h1> and </h1> The backward slash (“/”) is how you know that the tag is a close tag – your HTML needs both to ensure it remains functional! You add the contents of what you want to enclose in the tag between the two parts so it becomes something like: <h1> Heading 1 goes here </h1>
But what about CSS?
CSS is the styling of your website. It’s absolutely crucial if you’re to create a website that matches your business’ overall branding. For simplicity, I’ve focused purely on HTML within the article but will be releasing a few more resources on this in the coming weeks. In the mean time, feel free to ask me any questions you may have in the comments or send me a message!
  1. Headings (<h1> to <h6>)
Headings 1 -6 are a set of heading tags that decrease in size as you approach heading 6. You can use CSS to change styling of the headings to suit your website branding. Many HTML elements come with their own pre-set sizes. These are great at helping with some initial styling of your website before you then put in place the finer details with CSS. For SEO, you should only be incorporating one H1 on a page at a time. This is so Google can accurately understand what your website is about. If you would like to achieve the same styling for your H1 but without using the tag, scroll down to the section on divs.

<h1> Heading one goes here </h1>

<h2> Heading two goes here </h2>

<h3> Heading three goes here </h3>

<h4> Heading four goes here </h4>

<h5> Heading five goes here </h5>

<h6> Heading six goes here </h6>

2. Paragraphs

Paragraphs – much like a standard word processor help you to write large sections of block text. In HTML, you can enclose each piece of text you’d like separating by paragraph with a paragraph tag to do so. This means you’ll automatically have a space above and below the newly created paragraph.

<a href=”Paste your website URL here within the quote marks”> Paste your text to display here </a>

<a href=”Paste your website URL here within the quote marks” target=”_blank” > Paste your text to display here </a>

3. Link tags
Linking content is so important for any website but even more important if you’re listing references for a piece of content on your website. This is done through an <a> tag. If you would like to display the full URL on the front end of your site, all you need to do is to paste in the URL twice, once as the link and once for the text to display. It can sometimes be better to open the link in a new tab – particularly if it’s a link that’s taking the visitor away from your website. If you would like to do this you can. All you need to do is add: target=”_blank” to ensure the link opens in a new tab.
4. Images (<img />)
Images are declared a little differently from standard links. You need to have a URL to your image first. This could be through a location on the web or through uploading the image to your website first. You then can add the image through: <img src=”Paste your image link here”/> There’s a variety of styling you can then put in place to make your images mobile responsive for example on your website. Check out the Bootstrap section as there are so many options!
5. Divs (<div>)
If you would like to add custom styling to an object, an easy thing to do would be to create a div. This is a two-step process but is a way of avoiding using multiple H1 tags on a single website page. There are so many other functions for a div on your website, the best thing to do is to experiment with different options. The important thing is to create a logical class name so when you’re adding custom styling it makes sense to you and maybe other members of your team who are looking at your website.

An example:

<div class=”writeclassnamehere”> Paste your content in </div>

In your CSS (where your styling goes) file:

.writeclassnamehere{

Paste any styling you want applying here

}

Into the header you’ll paste:

<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>

Just before the closing body tag you’ll paste:

<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script>

Please note these are instructions for Bootstrap 5. This is the latest version at the moment, but check out the Bootstrap website for more details about future releases.

6. Bootstrap

Bootstrap is a set of mobile responsive first templates you can incorporate into your website. This is essentially a plugin you manually add into two places on your website.

The first section is added to your head tag. Your website page begins with a <head> section. This isn’t a header you’ve created, it’s a header with lots of HTML based instructions to your browser. You’ll find it where you may have added a Google Analytics tag, or in the back end of your site under something like “integrations”.

The second section goes just before the closing body tag. The body of your HTML website is marked in the code by <body> </body>. You’ll also find a space on your website to put code that you should paste just before the closing body tag”. You’ll find this in a very similar place on your website as to where you altered the websites’ <head> tag.

There’s an endless amount of coding snippets that will help elevate your life science website to where it needs to be, generating your sales-ready leads with regular visitors from search engines.

 

Do you need help to add new content to your website? Perhaps you would like some new website functionality but aren’t sure how to approach it? I’ll help take the stress out of the situation and have your website updated in no time at all! If you would like to find out more about how I can help drive organic traffic to your website take a look at my website development page.

You can send me an email here if you want to take your website to the next level and start implementing some of these features on your website.

You might also like…

Read more