How to Create Your Blog in HTML: The Ins and Outs | Mama Needs Coffee

When I see questions about code, most of them pertain to CSS. While CSS is important in making your site look and feel the way you want it to, HTML is crucial in building a website.

I started learning about HTML when I was in high school and began building little websites using the code. Back then, websites were more of a personal venture and not many businesses relied on them to market their brand or product.

Nowadays, business thrives on having a good website that drives traffic. At the heart of that website is HTML and, if you are looking to learn how to personalize your website to match your vision and brand, knowing it is quite helpful.

What is HTML?

HTML stands for “Hypertext Markup Language” and is a language that describes the content of a website to the browser. The “Hypertext” refers to the ability to move around websites using links, or hyperlinks. “Markup” describes what the HTML tags do to the text inside them.

This language involves the use of tags, represented by < and > to create HTML elements. These elements are essentially the building blocks of HTML pages.

This is an example of an HTML tag at work. The tag encompassing the text indicates to the browser that the content is a link by using the <a> tag.

Notice how the tag starts with <a href=” “> (the href part tells the browser where the link should point to) and ends with </a>. Opening and closing tags are used to specify which piece of text should be affected by the HTML.

See the Pen
The Ins and Outs of HTML 1 by Chelsy (@mamaneedscoffee)
on CodePen.

Without the closing tag, whatever text follows would also be blue and underlined.

You can recognize HTML files because they end in either .htm or .html – with the exception of PHP files that end in .php. That’s a whole other post on its own, but suffice it to say that PHP files contain HTML.

How Does HTML Work?

HTML is made up of short codes typed into a text file that is then viewed by a browser. These codes include tags that separate normal text from the HTML code.

You saw above how tags use opening and closing tags to encompass a piece of text to make a sort of change to it. Tags can also be used to display tables, pictures, and even blocks of content that can be moved around visually using CSS.

These tags (or elements) can also structure the content into sections, paragraphs, and headings.

HTML code can be divided into 2 types of elements: block level elements and inline elements. Knowing the difference between the two isn’t necessary for understanding the basics of HTML, but it is still worth noting.

Block Level Elements

Block level elements use the full available space and always start a new line in a document. For example, if you used a paragraph tag <p></p> to create a paragraph, whatever comes after it will start on a new line. Same with headers.

Inline Elements

Inline elements take up as much space as they need and don’t start a new line. They are used to format content inside of the block elements. Links are an example of inline elements.

Here is an example of both block level and inline elements at work:

See the Pen
The Ins and Outs of HTML 2 by Chelsy (@mamaneedscoffee)
on CodePen.

Again, knowing the technical terms for block level and inline elements isn’t important but it gives you an idea of the types of elements of your site you can control with HTML.

What Does An HTML Document Need?

Think of your site as a house: HTML represents the structure whereas CSS is the decor.

In order for an HTML document to function, it needs 3 important block level tags:

<html></html>
<head></head>
<body></body>

The <html> tag encompasses the entire HTML document and tells the browser, “Hey, this is an HTML document”. Absolutely all the HTML that comprises your website will fall between the <html> and </html> tags.

The <head> tag comes directly after the opening <html> tag and includes all the unseen meta-data of your page. This is where you’ll find the link to your CSS’s stylesheet, your site’s title, and any information displayed when sharing through social media. It is then closed by the </head> tag.

The <body> tag contains all the content that appears on your page. It is closed by the </body> tag before the </html> tag.

See the Pen
The Ins and Outs of HTML 3 by Chelsy (@mamaneedscoffee)
on CodePen.

All other tags are used to structure your HTML document. In the example above, I used the <h1> tag to define a heading and the <p> tag to indicate a paragraph.

There are many other HTML tags you can use to build your site to include links, images, and even entire blocks of content that can be moved around using CSS (these are called div’s).

How Does HTML Relate to CSS?

If you’ve read my post What the Heck is CSS?, then you know that CSS is used to connect a visual style to an HTML tag.

In a nutshell, HTML is used to add text elements and create a structure for your content while CSS is used to make it look pretty.

You may be wondering why we don’t just combine HTML and CSS into one document to make life easier. Trust me, it does not make life easier.

Imagine that you created your main page, writing all the structure and styling code into one document. Now you want to make an “about me” page – you would then have to write all the code again.

Okay, I know about copy&paste, but picture this – you’ve decided to change the color of the background for your main page. In order to change the background color for your “about me” page, you would have to go into the code and change it there too.

CSS places all those style codes in one document so that one change there will affect all of your pages.

Pretty cool, huh?

Where Can I Find My HTML Code?

If you are using WordPress, there is only one place to find your HTML code. Under “Appearances” and “Theme Editor”, you will find all of the HTML documents that comprise your website (with the exception of style.css which is where your CSS code is).

The first time you enter the WordPress’s theme editor, you will likely get a message warning you about messing with your code. Basically, if you eff the code here, you will break your page.

When it comes to styling your page to your liking and creating your blog in HTML, you will probably not have to change a lot of HTML code – but if you are going to make changes to your CSS, it’s best to know what HTML is and how it works.