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:
- <span> Tag
- Using <span> tag to change font style
- Using <span> tag to change font color
- <br> Tag (line break)
- <hr> Tag (horizontal rule)
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:
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>
The <span> tag is an inline container used to mark up part of a text, or part of a document . 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 inserts a single line break;
<br>tag is useful for writing addresses or poems;
<br>tag is an empty tag which means that it has no end tag .
<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
in a text
Horizontal rules can be used to separate the contents of your article with a line, and this can be done with <hr> tag.
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.
 HTML <span> Tag
 HTML <br> Tag