20 June, 2020
Ask any kid what the 20th century’s greatest invention was and you’ll be told that it’s the internet, duh! Teens spend upwards of 7 hours each day online. Yet despite their addiction to the internet, they are surprisingly ignorant to its workings. The good news is that HTML (the language that makes up almost every single website) is astoundingly easy. Though HTML was developed by CERN scientists for fellow researchers, it can be learned by kids as young as nine.
The internet is unbelievably important now, but imagine the role it will play when our kids are adults. In this world of uncertainties, the future of the internet is the one of the few things beyond doubt. Even today the internet of things is no longer the stuff of science fiction; just ask Siri or Alexa.
Hypertext Markup Language is a bit of a mouthful to say. Kids take one look at the meaningless acronym and give up trying to understand such a seemingly esoteric (read: boring) language. The trick to getting kids excited about HTML is to compare it to something they think is cool. Invisible ink, cute highlighters and Russian nesting dolls are a fun way to explain how HTML works.
HTML is a markup language. Unlike programming languages, it isn't made up of functions that respond to inputs and crunch numbers. HTML only codes for the visual and structural aspects of a website. With the contents of your kid’s pencil case and a piece of paper, you can explain how HTML formats text and highlights important bits for search engines. Let your kid write one long paragraph of words. That piece of paper is the internet without HTML: dull and difficult to read. Now give your kid highlighters. They can make words stand out or strike them out, underline them or italicise them. HTML’s formatting tags (like <STRONG> and <STYLE>) work the same way; making plain text more interesting.
Next come the scissors and glue. These are the structural HTML tags like <P> (the paragraph tag). Give your kid a new piece of paper to stick chunks of the text into any sort of order. Maybe they’ll stick the underlined words at the top of the page like a heading, maybe they’ll split the text into bite-sized chunks or bullet-point lists. As long as they don’t stick the text upside down, it will definitely be more readable than the first text. Writing <h1>HTML for kids</h1> is just a quicker way of structuring text into headings and paragraph, and your fingers don’t get sticky in the process either!
The above activities show why HTML is called a front-end development language. All its actions act on the face or front of the website for the reader’s ease. But HTML isn’t just for readers. For websites to be read, they first need to be found by search engines. Semantic tags like <aside></aside> and <article></article> don’t change the text like other formatting tags do. Instead, they indicate to search engines what the purpose of the text is… a little like a secret message written in invisible ink. Terms like semantic tags may sound tricky, but the great thing about basic HTML for kids is that they can write code without having to learn all the fancy words. As long as they understand these three basic concepts— formatting, structure and semantics— they can be a web-designer!
HTML is the ideal choice for kids beginning to code because of its accessibility. Unlike programming languages—which require a lot of learning initially— children can see the results of their code within a few days. Yes, the websites they create based on just these three concepts will be crude. However, once they’ve mastered the basics, kids will be able to learn more advanced HTML and combine it with the languages (like CSS) to make impressive websites.
Coding advanced HTML can be likened to a matryoshka or Russian nesting doll. Professional web-designers combine the simple HTML tags mentioned before, like <H1> and <STYLE>, together to make more sophisticated websites in a process called nesting. By adding three different style tags within a heading tag, titles can be formatted to be both big, bold and blue. Though writing nested tags may take some practice, the concept is simple. Just like a matryoshka doll, HTML allows for many tags to be gathered up inside one another.
HTML codes for 90% of websites. Despite the existence of web-platforms like WordPress that convert normal text into HTML, knowledge of HTML is still extremely useful even when creating the simplest of blogs. If your kid learns how to code HTML, they won’t be restricted to template layouts or color palettes. Instead, they will be able to create customized websites to suit their tastes and (eventually) customers tastes too.
HTML for kids is useful even if your child won't design websites. For beginners who don’t know what they would like to code, one of the best languages to start with is HTML. Its easy, rewarding and, though HTML isn’t a programming language, the fundamentals—such as nesting—are shared. Hence, after learning HTML, kids can easily transition onto advanced programming languages like Java or Python.
Unlike other languages, there aren’t many online learning resources for kids on HTML. At CodeAdvantage, we have created one of the few online HTML courses for kids. In our fun web-design classes we teach HTML as well as two other, widely used web-design languages, JavaScript and CSS. No previous coding experience is required and, by the end, your child will have a working website!
Thanks for reading this article and if you have any questions or comments on this topic or coding and STEM in general, please feel free to contact us.
Photos by NESA by Makers, Nathan da Silva, Luca Bravo on Unsplash