Basic HTML Code Every Blogger Should Know

Hyper Text Markup Language (HTML) is the standard markup language responsible for creating the structure of web pages, it tells the browser how to display the content.

The purpose of this article is to teach bloggers basic HTML codes that may help them understand what is going on under the hood when they write headings, use different fonts, or insert an image on their favorite blogging platform. In this article we will be tackling the following HTML codes:

  1. Headings
  2. Paragraph
  3. <span> Tag
    • Using <span> tag to change font style
    • Using <span> tag to change font color
  4. <br> Tag (line break)
  5. <hr> Tag (horizontal rule)

html-codes-cheatsheet

Headings

Headings are used to guide the readers through an article. It helps the readers get an idea of what a certain section of your text is all about, and having a better text structure helps with that.

<h1> tag is usually used to define the most important text in your article which most likely be the title. Then as you write your content, <h2> or <h3> tag is used as a subheading to introduce different sections of your article.

The following are the different HTML headings you can use:

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>

The actual output of headings h1 to h6 looks like this:

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading

Paragraph

What is an article without a content? The contents of your article is written inside the <p> tag which defines a paragraph.

There are many different ways to style a paragraph using the Cascading Style Sheets (CSS), the design sheets for your website, such as manipulating its color, font, size, space between the letters, the position of your paragraph and more.

<p>Your text here<p>

<span> Tag

The <span> tag is an inline container used to mark up part of a text, or part of a document [1]. This tag can be used in many different ways such as changing a certain word’s color on a text, font size, or font style.

Changing the font style

We will change the style of a text using Grenze Gotisch font family that was taken from Google Fonts website. I chose this particular font to make the changes more obvious.

Once you have picked a font of your liking in Google Fonts, to embed the font, you will have to copy and paste the <link> code provided by them into the <head> tag of your html. This is an important step you cannot skip otherwise, the font will not work.

<head>

<link href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch&display=swap" rel="stylesheet">

</head>
font-family: 'Grenze Gotisch', cursive;

After embedding the <link> code, we can now use the font. Here is an example of how to use <span> to change a certain text’s font style:

<p style="text-align: center; font-size:1.5rem;">

This is the normal font style and this is how I used

<span style="font-family: 'Grenze Gotisch', cursive;">

span to change the font style to Grenze Gotisch</span></p>

The actual output looks like this:

This is the normal font style and this is how I used span to change the font style to Grenze Gotisch


Changing the font color

I enjoy choosing colors from colorhunt.co because of its available color palettes or color schemes, and it is a great open platform for color inspiration.

For this example I have chosen this color because I think it is cute and change is obvious.

This is how it was achieved:

<p> For this example I have chosen 

<span style="color: #b83b5e; font-size:1.5rem"> 
this color</span> 

because I think it is cute and change is obvious.</p>

<br> Tag

  • The <br> tag inserts a single line break;
  •  The <br> tag is useful for writing addresses or poems;
  • The <br> tag is an empty tag which means that it has no end tag [2].
<p style="text-align: center;">
This is how you force<br> line breaks <br> 
in a text</p>

The actual output of the code:

This is how you force
line breaks
in a text


<hr> Tag

Horizontal rules can be used to separate the contents of your article with a line, and this can be done with <hr> tag.

<hr>

The actual output of the code:


There are ways to customize and change the style of the horizontal rule using CSS. Some styles available are dotted, dashed and more. Its width length, height, can be changed as well.



Resources:

[1] HTML <span> Tag

[2] HTML <br> Tag

[3] CSS hr border-style

Published by

Mia

Hi! I am an undergraduate Computer Science student blogging about my experience and learning to share with you.

3 Comments

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s