HTML Basics for WordPress | A Newbie’s Guide

HTML Basics Defined

What is HTML, and what does it mean to you? This brief article aims to define HTML basics to the everyday web user, and explains why you should have at least a basic grasp of what HTML is if you intend to effectively manage your own website. HTML is an acronym for Hyper Text Markup Language. It is a term which most folks at least understand has something to do with formatting a webpage. If your job is to be in control of your website formatting, it can only be good for you to understand the foundation upon which your page is built! HTML code is one of several steps which define your page to your computer. There are several other steps which data goes through before it makes it through physical circuitry and finally gets displayed on screen. High level languages actually direct the data that becomes your onscreen page, but they have nothing to do with the function of HTML which simply defines document format.

HTML is a Markup Language.

html basics

A Markup Language is a system of symbols that convert the words you recognize in English into terms which the computer can recognize. HTML uses symbols to mark the beginning and the ending of all of the various parts of your document for the computer’s reference, such as headers, paragraphs, and photos, and so on.

These symbols are called “tags” in the lingo of HTML.  A complete list of tags can be used to completely define any document to a computer.  A completed HTML document that makes use of this system is called a webpage.

A Brief Example of HTML Basics

If that is vague, an example of some HTML text will clarify. Here are a few lines of HTML code that define a paragraph heading and a paragraph.

DOCTYPE html>
<html>
<body>
<h1>You can Write Simple Code!</h1>

I slit the sheet, the sheet I slit, upon the slitted sheet I sit!
</body>
</html>

Watching the accompanying video should clarify all of this. When you look at this code in its text form it appears as this:

“You can Write Simple Code!

I slit the sheet, the sheet I slit, upon the slitted sheet I sit!”

What does an HTML editor do?

In any HTML editor, you can cut and paste this short set of simple code into a new document and see how it works. (I have done that for you in the accompanying video, so be sure to take a look, because we also cover some other related points about editors there.)

HTML editors like WordPress translate your plain text into a document format understood by the computer. When you type text into the editor and select its identifying features (header, paragraph, media picture, etc),the WordPress editor in turn assembles a translated document with embedded HTML coding.

Let’s look at the above example:

<html> is a start tag which indicates that the beginning of an html document is going to follow. Its end tag appears at the end of the document, to indicate the end of the page.  The end tag looks just like the start tag, but has a forward slash in front of the symbol.  So the end tag for the start tag <html> is </html>.

<body> is the next start tag, and it tells the computer that the text to follow is inside the body of the document. At the end of the body is also found its matching end tag, </body>.

Then comes an H1 start tag,, and its stop tag,  and the header’s text is between them. Likewise then follows the paragraph, also set off by its own start and end tags. And finally you will see the end tags for the body and for the document itself.

Again, please just watch the video and think about it.  If it’s still not clear, let me know!

If you are a newbie and had been wondering about HTML basics, I hope this has inspired you to learn more. You can find more specifics in our cost free video training series. Thanks for making it to the end!

 

Read about how to install wordpress

photo credit: quinn.anya via photopin cc photo credit: keepps via photopin cc