Did you know that whenever you visit a website, you get to see HTML at work? It's the programming language that's used to create virtually every web page!
Learning HTML (along with Javascript and CSS) gives aspiring coders the power to create their own websites. And since it's fun & easy to learn, kids of all ages can quickly dive into it.
Today, we'll look at what HTML is, as well as how to get kids interested in it. Also, we'll show you how to make your first HTML page. Ready to learn more about HTML? Let's go!
What exactly is HTML?
HTML—short for HyperText Markup Language—is a type of markup language. This language is made of tags and text that help format the structure of a web page. Elements are easily readable in HTML, making it a great first step for a beginner's coding journey!
As the standard markup language for websites, HTML coding is highly accessible. Learning the fundamentals can help boost the confidence of a young programmer, while also providing valuable coding experience. HTML5 is the fifth version of the markup language, used on the World Wide Web to structure and present an endless list of content. Mozilla Firefox, an open-source web browser, offers a handy resource on structuring the web with HTML.
Having a knowledge of HTML can greatly improve your skills in web design and web development. From web browsers to WordPress, HTML code not only makes the internet work, but it also makes the process understandable for kid coders!
What is CSS?
If you've already heard about HTML, you've probably heard of CSS. What exactly is it?
HTML and CSS work together to create websites. You can think of HTML as the body, while CSS is the clothes, hair style, and accessories. HTML helps define the structure and content, while CSS helps define the style of web pages.
HTML is easy to learn (and has clean syntax, which is the rules of the language). CSS, on the other hand, can be messier and more complicated. Check out how to code your own website for a tutorial on using HTML and CSS together.
Once you get the basics of HTML, learning CSS gets easier. Of course, the best way to improve your coding skills is proper guidance and practice!
Main HTML Tags
Okay, so earlier we mentioned that HTML uses tags and text. There are 5 main tags:
-
: This is a paragraph tag. This is the most widely used tag in HTML. It's used to separate blocks of text (also known as paragraphs).
-
: This is a strong or bold tag. It's used to highlight important text. When text is placed in this tag, it's displayed in bold lettering on a page.
-
: This is an italics tag. It's used to draw attention to specific text. When you want to emphasize or contrast something, this is the appropriate tag.
-
, <H1>, <H2>, <H3>, <H4>, <H5>, <H6>: This is the title/heading tag. This type of tag is a bit more complicated, as it's used to signify the relationship between chunks of content. The tag indicates title, main topics, and subtopics within written content. </li> </ol> <p>And there you go! If you learn these 5 primary tags, you're on your way to using HTML coding to display various content and get your own website up and running!</p> <h2>How to Get Kids Interested in HTML</h2> <p><img src="//images.ctfassets.net/mrop88jh71hl/2mmeoZavvu5o3v8Fawht3I/da4c60722d6ab049ff981c569994c463/coding-html-for-kids.webp" alt="coding-html-for-kids"></p> <p>Did you know that there are more than 5.21 billion pages on the World Wide Web? That's an amazing amount of content! And it wouldn't be possible without HTML coding.</p> <p>Kids coding can seem a little scary or boring at first. The key to getting children interested is to simply show them all the amazing things that have been made with HTML!</p> <p>The best place to start is with the look of a website. Showing a kid the images, texts, and headers of a site (and then explaining that it comes from HTML coding) can help them better understand the importance of the programming language.</p> <p>Another great selling point? HTML code is simple & fun to learn! It also allows a user to see their work in action immediately, providing a jolt of instant gratification.</p> <p>There are so many real-world applications, allowing a young coder to explore their creativity. The three keys to getting them to see how amazing HTML is? Make it relatable, make it approachable, and make it fun!</p> <h2>HTML Hello World Tutorial</h2> <p>To cap off this intro to HTML, we're going to show you how to create your first HTML page!</p> <p>In this example, we'll create a simple "Hello, World!" page. As we mentioned earlier, you'll need a text editor to perform this project. This will allow you to save an HTML document (using the .html or .htm extension) that can be opened in any web browser.</p> <h2>Step 1</h2> <p><img src="//images.ctfassets.net/mrop88jh71hl/2Ygc3XfQTuJKfxU6oGBfQ2/83dd1df74d8ad15e7982d00c72e89bee/html-hello-world-tutorial-for-kids.webp" alt="html-hello-world-tutorial-for-kids"></p> <p>First, let's go over the above template elements.</p> <p>The <!DOCTYPE html> is required to create an HTML document. This is not a tag. It informs the browser of the document type.</p> <p>The <html> element is a container for the various HTML elements. The </html> element is placed at the end of the content.</p> <p>The <head> element is a container for metadata. This is not displayed on the actual page. This is typically used for character sets, styles, scripts, and other meta info. In this case, it's used for the title of the document. It then ends with the </head> element.</p> <p>The <body> tag defines the body of the document. Here, you place the main content. The </body> tag indicates the end of the main content.</p> <p><img src="//images.ctfassets.net/mrop88jh71hl/3VnJDCV1VafFUCAxlmjNRt/0410c019c5f100fa00f0996782324222/html-hello-world-tutorial-for-kids-second-image.webp" alt="html-hello-world-tutorial-for-kids-second-image"></p> <p>Ready to start coding? Let's begin with the title of the document.</p> <p>Input the above template code in your text editor. Type in "HTML Hello World Tutorial" between the <title> and tags. The title must be text only. It's displayed on a page's tab or web browser's title bar.Step 2
Next, we'll include the
heading tag. In this example, let's input "Hello, World!" as our H1 header. This will be outputted in a bigger, bolder text on the page.
Step 3
Finally, we can enter our paragraph.
Place "Thank you for following along with this tutorial. You now know how to make a basic HTML page. Congratulations!" between the
and
tags.
Got everything set? Now it's time to run the code! Above you'll see an example of what you'll get once you input the code and run it.
Again, be sure to save your document with the .html or .htm extension. That way, you'll be able to open it in the browser of your choosing!
Now Keep Learning
HTML is the backbone of the internet, and with the right guidance, a kid coder can gain skills that will propel them into the future. At Juni Learning, we provide tailored 1:1 courses to provide a student with exactly what they need to succeed!
From Scratch to Python, we offer the right fit for any aspiring programmer.
Read more about our coding courses and curriculum, or speak with a Juni Advisor by calling (650) 263-4306 or emailing advisors@learnwithjuni.com to learn more about our coding curriculum and our approach to online learning.
Juni Learning offers award-winning online courses for kids ages 8-18. Explore private, group, and self-study courses in real world skills like coding, investing, public speaking and much more. We strive to empower students everywhere with passion, creativity, and excitement for hands-on learning.
