Teaching HTML5 Basics: My Way

Jarren Calizo
Aug 23, 2017 · 3 min read
Typewriter or Computer? I don’t exactly know 😅😅 (PC: Wix)

The Gist of HTML

HTML, which stands for HyperText Markup Language, is the primary language that is used by website creators to construct web pages. In order for coders to add text and apply content to their sites, they would use HTML.

This language is pretty much the backbone of every website in today’s World Wide Web and web developers grasp this language first. CSS, the color styling language, and JavaScript, the language that makes websites more interactive, will usually follow after learning HTML. The version of HTML that is being used and learned nowadays is called HTML5.

So, you want to learn HTML? Huh? Well then, let’s proceed, shall we?


Intro to HTML

HTML code is formed by using commands ( or elements) that are inside angled brackets, which are <>. It is also thought of as the “greater than & less than” keyboard symbols. These commands are known as tags.

These tags will usually come in twos. The first one being called the opening tag, which acquires a element in the usual angled brackets. The second one is the closing tag, which is an opening tag + a slash that is always after the “greater than” bracket. Between these two types of tags, one has the ability to add text or add additional tags in the tag. This concept is called nesting. To nest tags, the most recently open tag has to be closed first. Text commands usually just have words lying between a opening and closing tag without complication. To represent all of this, here is an example:

<head>
<title> Salutations Earth! </title>
</head>

That’s the basic grip of how code is written.


The Boilerplate Code & The Common Used Tags

To create a web page, the most basic start of HTML code (aka the Boilerplate Code) looks like this :

<!DOCTYPE html>
<html>

<head>
<meta charset= “UTF-8” />
<title> </title>
</head>

<body>

</body>

</html>

As a brief run down, an HTML document will always start off with “<!DOCTYPE html>”. It tells the computer that the document type will be in html format. All of the work that is described onto a website will lie in between the tags <html> </html>.

Websites will always have a head and a body that lie in the html tags, which is represented as <head> </head> and <body> </body>. In the head portion, the title of a website is written in between<title> </title>. Also in the head, the <meta> tag is specified, which allows the computer to know what character set is being used. In the body portion, the main contents of a website will lie here. These tags will include:
headings & subheadings
( <h1>__ </h1> ; will have 6 total heading sizes)

paragraph text
( <p> ____ </p> )

lists
[ordered (<ol> <li>___</li> </ol>)
or unordered (<ul> <li> ___</li> </ul>)] ,

links
(<a href= “http://____.com”> ___ </a>),

and images
(<img src = “__.com” alt= “[description of image]” /> ;
alt attribute allows people who are visually impaired to identify the image).

After the contents in <body> </body> are all typed up, the HTML document will finally close off with </html>.


There are many other tags that are out there for HTML5, but to start off, these would be the fundamentals of the bunch.

With all that said, ladies and gentlemen, this is how I would explain HTML to another… My way ^_^

)

Jarren Calizo

Written by

Programming with a Passion ( ^_^)/ || Senior at Waipahu High School 🔵😅 || @aloha_jxrren

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade