What Every Beginner Should Know About HTML
HTML is like the Wizard in The Wizard of Oz.
Dorothy, the scarecrow, the lion, and the tin man travel a long way to meet the Wizard, believing he possesses magic that will get Dorothy home.
When they get there they are all terrified of the Wizard’s intimidating presence and booming voice.
Until Toto pulls back the curtain to reveal the ACTUAL Wizard who turns out to be a mere middle-aged man who is completely harmless.
Does it surprise you to hear that “behind the curtain” of the powerful internet we use several times a day to find important or not so important (hello YouTube cat videos!) information is a pretty simple code?
Think of HTML, or HyperText Markup Language, like the wizard behind the curtain. It is a basic code made up of text and symbols from which the entire world wide web is built upon. It is actually relatively simple to learn too!
Now we have several web publishing platforms to choose from, like iPage and WordPress, that make it easy to design a cool website fairly easily AND make us non-coders of the world look like web design wizards.
But guess what?! Those pretty pre-designed templates in those platforms are made up of HTML!
The platforms basically provide a user interface (UI) for non web developers to build nice web pages without having coding knowledge. They generate the HTML code based on what you want your page to look like.
This is why it is still helpful to have a basic understanding of how the true “wizard behind the curtain”, or HTML, works.
OK so how does HTML work?
HTML is a standard language for building web pages and is made up of text, numbers, and familiar symbols like “=” and “#”. The code is made up of tags, elements, and attributes.
Tags are almost always in pairs, enclosed in brackets <>, and must be lowercase . The first tag is the start tag <> and the second tag is the end tag </>. The end tag has the forward slash. Tags are standard HTML code that tells the browser what the content inside them, called elements, should look like.
Elements—things like page titles or images— are the content that make up the webpage. Different tags serve different functions like telling the browser that specific words (elements) should be bolded or be a certain size font.
Here is an example of the standard tag for inserting bold print.
So if I want this text to appear in bold print in the browser — I am the greatest HTML wizard of all time—
I would write
<strong> I am the greatest HTML wizard of all time </strong>
And it would appear like this in the browser:
I am the greatest HTML wizard of all time
Like tags, attributes are associated with elements. They are added to elements as a name-value pair within brackets, and are added to an element before the closing of the element’s start tag.
An example of an attribute is:
Attributes are things like links, colors, alignment, or alignment commands.
Some key things to know about attributes include:
- Any number of attributes can be added to an element.
- Attributes are always in the <name=”value”> format.
- Attributes are separated by spaces.
- Attribute names are always lower case.
- Attribute values must always be enclosed in double quotes (“).
Where the magic happens
The browser is what reads and translates the HTML code (tags and attributes) into what you see on a web page(elements). Only elements are seen on the browser side. This is how you see a whole pretty web page with images, links, text, different colors, and so on. The whole web page is based on how these different, individual tags, attributes, and elements are written out.
Want to know what else is cool about HTML?
You don’t need any fancy software to write HTML. It can be written in a simple text editor. There are professional editors out there, but guess what?! You have one on your computer— NotePad is for PC and TextEdit is for Mac. Code is basically written from left to right, line by line.
Once you write your code to represent how you want your page to look, you save the .TXT file then save it as an HTML file.
When you choose a hosting company, you can upload your HTML file to the hosting company’s server, then attach your file to your domain name (URL). When you open your URL on the browser, like FireFox, Chrome, or Internet Explorer, the browser interprets the text and BOOM! You have a beautiful website!
Show me the basics!
Let’s have a look at some very basic HTML tags and elements combined to better understand how the individual components come together.
- The first tag you see is the tag <!DOCTYPE html>. Every HTML page starts with this tag. It tells the browser this is an HTML document.
- The actual document itself begins with the <html> tag and at the very bottom, after all the actual elements, you see the closing tag </html>.
- The content that will populate on the browser side is all contained between the <body> and </body> tags.
These three tags are standard in html code for a page and are always in this order.
In between the body tags there are two lines:
- <h1>My First Heading</h1> is telling the browser you want the words”My First Heading” written in font size H1, or heading 1. There are six heading tags (<h1> through <h6>) that tell the browser how big your font size should be. H1 is the largest font size and will appear like this:
My First Heading
- Then you have <p>My first paragraph.</p>. The paragraph tags tell the browser this is a paragraph block of text. So on the browser you would see the text in normal font and color:
My first paragraph.
If you wanted to make the text “My first paragraph.” appear as a certain color, you would add an attribute between the tag. The code would read:
<p><font color=”green”>My first paragraph</font></p> and would appear:
My first paragraph
This is a very basic explanation of HTML code. As you know, web pages are made up of different items (ahem…..elements) like images, titles, subtitles, paragraphs etc. And there are several different standard tags and different attributes you can use to tell the browser how you want the elements to appear.
Because there is a standard set of tags, it is actually pretty simple to learn basic HTML. Having knowledge of how HTML works really helps you appreciate the awesome websites you come across on the web and the ones you build yourself using web editing platforms. You realize how great these tools are, because you don’t have to write HTML yourself and you get your site built much faster.
Should you be interested in learning HTML a great website to visit is www.w3chools.com. It’s free and provides simple step-by-step lessons on HTML so you can learn the different standard tags and how to write simple HTML code.
There is something very empowering about looking at a web page and understanding the magic behind the curtain. After learning to code, you may even feel like a bit of a wizard yourself!
Feature image: Pixabay.com
About the Author
Susie Yuill is a freelance copywriter and marketing strategy consultant, specializing in creating product marketing strategy & content that helps technology companies grow product sales and engagement. To learn more about Susie, visit her website at www.stellartechmarketing.co