HTML for Beginners
For information about Coder Kids classes and camps, including online coding and gaming topics, visit register.coderkids.com/onlineclasses.
Take a look around you. What do you see? Your bedroom? Your friend’s house? Your school or classroom? Wherever you are, you can probably find something that is connected to the Internet. Maybe it's an iPhone, a computer, or a smart TV. Maybe it’s the device you are using to read this blog post.
In the year 2021, Internet-connected technology is everywhere, and much of it is used to access websites. Websites serve a wide variety of purposes, from viewing homework to ordering products on Amazon to watching viral videos on YouTube. Because websites are such an important part of our society, it is important to understand how they work and how to make them. This is where HTML comes in.
In this post, we’ll go over some HTML basics to get you started on your journey. Don’t worry, kids can learn HTML just as easily as adults. If you have a child who is interested in HTML, this post is a great place for them to start!
What is HTML?
HTML, or Hypertext Markup Language, is the markup language used to make webpages. As a markup language, HTML is similar to a written language:
HTML and written languages both have sets of rules to help us communicate clearly. The rules of a language are often referred to as a language’s grammar. Grammar involves proper punctuation, capitalization, and spelling. Correct grammar makes writing easier to read. Similarly, HTML has a set of rules called syntax that helps website developers write easy-to-understand code. Without following the rules of syntax, the computer would be unable to read your code and unable to display your website.
Learning any language is tough. It can be tricky for kindergarteners to learn their ABCs, and it can be tricky for adults to learn a foreign language later on. HTML can also be tricky to learn at the beginning. However, with time and practice, writing webpages in HTML will gradually become easier and simpler.
The possibilities are endless! A written language can be used to craft novels, short stories, advertisements, textbooks, and more, with each written piece being totally unique. With a knowledge of HTML, you can design a website for any purpose or function: selling homemade bracelets, teaching calculus, posting your photography...you name it. Knowing how to develop websites will be a valuable tool for you to share your ideas and talents with everyone on the World Wide Web.
Now that we know what HTML is, we can get into the HTML basics you’ll need to understand before you get started.
Tags
In written languages, words and phrases act as building blocks for constructing an author’s essay or book. HTML also has building blocks known as tags.
A tag has three parts: an opening tag, content, and a closing tag. The opening tag is like a signal, telling the computer that a new element of the website is being created. Then, the content begins. The content is the writing seen on your webpage; anything that you read on a website is part of the content of a tag. After the content, the tag is finished with a closing tag. Closing tags singal to the computer that the content, and therefore the tag, is complete. The structure of a tag is like a sandwich: the opening and closing tags are the bread, and the content is peanut butter and jelly in the middle.
Typically, an opening tag consists of a less than symbol (“<”), the name of the tag, and a greater than symbol (“>”). Below is an example of an opening tag for a paragraph tag (“<p>” tag), which will be discussed later on.
The content of the tag follows the opening tag. In our example with the paragraph tag, you could include a paragraph about anything you choose - your favorite shoes, how much you hate biology, your life story, etc.
Finally, we end our paragraph with a closing tag. A closing tag is made up of a less than symbol (“<”), a forward slash (“/”), the name of the tag, and a greater than symbol (“>”).
Although the structure of a single tag is simple, multiple tags can become complex and messy. In fact, tags are often nested. Nested means that one HTML tag is contained inside of another, which is contained inside of another, and so on. A section of HTML code usually has many tags nested together.
Nesting HTML tags is similar to layering Russian nesting dolls. Just as the top and bottom of a small doll are both contained inside a bigger doll, the opening tag and closing tag (and therefore the content) must both be inside the outer tag. If an HTML tag’s opening tag and closing tag are separated, the computer - and you - will be confused. It is very important that you layer your tags properly and remember to use both opening and closing tags.
Attributes
Attributes are characteristics used to describe a tag. The different attributes available to you depend on the type of tag you are using. For example, if you are using a tag to write a paragraph, attributes might include font or font size. On the other hand, if your HTML tag has a link to a different website, the external website’s address would be an attribute. Attributes are usually listed inside the opening tag, between the “<” and “>” symbols.
Framework of an HTML document
Now that we know what tags are, it’s time to dive into the framework of a webpage. All HTML pages start with a DOCTYPE header. The DOCTYPE header helps web browsers know what kind of information will be in your HTML document - a “heads-up” so browsers know what to expect (https://www.w3schools.com/tags/tag_doctype.asp). The syntax, or structure, of the DOCTYPE header is as follows:
<!DOCTYPE html>
Unlike most parts of HTML, the DOCTYPE header is not a tag. It has no content and no “closing tag.” It is simply a way to begin your HTML document so web browsers can understand it and display your webpage properly.
HTML Tag
The next part of an HTML document is the html tag...not a very creative name. Everything (except the DOCTYPE header) will be inside the html opening and html closing tag.
Finally, the head and body tags are contained inside the html opening and closing tags. The head tag has information about your webpage. Information inside the head tag does not include the primary content of the webpage, such as images, text, and videos. However, head tags do include the title of your webpage, which is the text displayed on the Internet browser tab for your webpage.
The body tag includes the bulk of your webpage - all of the graphics, text, etc. Because body tags contain most of the HTML in your code, they are typically the biggest sections of your webpage file and have several layers of nested tags.
Common HTML Tags
Although there are many HTML tags, there are a few that you will use frequently and see often in webpage files. Here are a few:
The <div> tag
The <div> tag is used to create sections, or divisions, within your HTML code. Separating your code into parts with the <div> tag allows you to easily apply certain attributes to several lines of code at the same time. Because it is primarily used to group code, the content of the <div> tag is often other types of tags. Think of <div> tags as bins for sorting and separating lines of HTML code.
The Anchor Tag (<a>)
The anchor tag creates hyperlinks, allowing users to visit links outside of your website or view other webpages within your website (https://www.w3schools.com/tags/tag_a.asp). To properly use the anchor tag, you need to specify both the content of the anchor tag and the href attribute of the anchor tag. An anchor tag’s content is the text users click to reach another webpage. This text is sometimes underlined to indicate the presence of a link to webpage users (for example: Coder Kids)
The href attribute defines the link for the destination webpage, which can be a link to another webpage within your website or a link to an entirely different website. You should always make sure that the link in your anchor tag’s href is spelled correctly. Otherwise, your link will not work and your users will be unable to navigate to your intended link.
The structure of an anchor tag is shown below. Like many HTML tags, an anchor tag begins with an opening tag. The word “anchor” is abbreviated to “a” for both the opening and closing anchor tags: <a> and </a>. Inside the opening tag is the href attribute. To correctly implement the href attribute, type “href,” an equals (“=”) sign, and your link in quotation marks. Close the opening tag. Then, write the text for the hyperlink - this is what the user will click on to navigate to the destination webpage. Lastly, end the anchor tag with a closing tag.
Headers
Header tags format text to look like titles. There are different types of header tags, such as h1, h2, h3, and h4. All of them have a unique look with different fonts and font sizes. The format associated with the header tag is applied to the text inside the content of the header tag. Trying out and experimenting with header tags can help you find the style you are looking for.
Paragraph Tags (<p>)
Paragraph tags have a simple purpose: holding text. The text that you want to appear on your webpage is often the content of a paragraph tag, sandwiched by an opening and closing tag, of course. Instead of using the word “paragraph,” the opening and closing paragraph tags use the letter “p” (i.e. <p> and </p>). Paragraph tags are useful for long sections of writing, such as a blog post or informative article. Unlike the anchor tag, paragraph tags don’t need any attributes to perform their primary function.
Ordered Lists and Unordered Lists
Ordered lists and unordered lists provide two ways for web developers to put written content in lists. An ordered list is numbered, while an unordered list uses bullet points. Each element of an ordered or unordered list is called a list item. Every list item is given its own list item tag within the ordered or unordered list.
Ordered list is shortened to “ol” for the ordered list tag, unordered list is shortened to “ul” for the unordered list tag, and list Item is abbreviated to “li” for its tag. All content in an ordered or unordered list must be a list item. To create an ordered or unordered list, simply start with your opening and closing tags (either <ol> and </ol>, or <ul> and </ul>). Then, enclose each item in your list with opening and closing list item tag (<li> and </li>).
Get Started!
Now that you’ve learned some of the basics of HTML, it’s time for you to practice! First, download software that allows you to edit and create code in HTML. Visual Studio Code is a great example (Ask you parents for help if you need to). You can also use Notepad++, although it does not have all the same editing capabilities as other types of HTML editing software. And you’re ready to go! Coding in HTML will be tricky in the beginning, for kids and adults. But, as with any skill or talent, practice makes perfect. Don’t be afraid to make mistakes, get help from others, or watch YouTube tutorials. You can do this! Now, hop on your HTML editor and get started!
As an Amazon Associate, Coder Kids earns from qualifying purchases.