What is HTML? An introduction to web design for kids.

three girls sitting in chairs around blue laptop

A web designer makes the pages of the internet appealing, user friendly, and updated with the latest technology. 

So when can kids start learning the valuable skills involved in web design?

Right now!

Today we’ll step into the wide world of web design. Why? Not only is web development a fast-growing field and one of many exciting STEM careers, learning to make a website is an excellent way for kids to combine their interests and get their ideas out there to a wide audience!

Let’s take a closer look at this growing field before you get started with your website.

Web Development

Essentially, a web developer designs websites and apps, and can work in JavaScript and numerous other coding languages. They build the framework and code every website you’ve visited in the last week. 

Web designers deal with the HTML and CSS mostly to create their designs, and they can specialize as UX or UI designers, focusing either on the user experience or the user interface. These designers deal with the flow of the web pages, as well as improving interactions on the website. Basically, they work behind the scenes to craft webpages as we know them today. 

And there is a lot of work that goes into this craft! Jumping into HTML lessons with a web development tutor is a great way to grow your skills and master tricky HTML concepts, the better to really let your creativity shine. 

After all, a great website needs both great design and development. There are so many components that go into building a good website. From color choices, fonts, the layout of the buttons, what happens on click, everything contributes to the experience. 

The nuts and bolts holding that experience together are typically written in HTML: here are some key terms to know. 

What is HTML?

HTML stands for "HyperText Markup Language," and it's a language that describes and organizes web page content. Contrary to popular belief, HTML is not technically a programming language, like JavaScript is. Each webpage is an HTML file and consists of HTML tags as well as the content for the web page. Sites usually have many HTML files that link to each other.

What are HTML Tags?

HTML tags are keywords that tell the browser how to format and display content. Most tags are inside < > symbols and consist of an opening and closing identifier.

For example, <body> and </body> is an opening and closing tag where everything in-between is the "body" of the webpage. 

The opening and closing tags are the same text but the closing tag usually has a / forward slash. Some tags are exceptions to this rule.

Other tag examples are the paragraph tag <p> </p> and the <html> </html> tag that contains all the html code. 

HTML files must have four essential tags to work, so the web browser can understand it and display it correctly. Here are some examples:

  • <html></html>
  • <head></head>
  • <title></title>
  • <body></body>

Here’s an example of what this will look like:

R7de07KhsnRQJVX5-Screen%2520Shot%25202020-09-02%2520at%25201.37.35%2520PM.png

HTML Hierarchy

The structure of a page builds around these tags. Some tags are nested inside other tags. An element above another element in the HTML is called the parent of the element below it, while the element below it is called the child. (When they are equal they are siblings.)

You can see this hierarchy in action in this image. Inside the HTML tag are two major head and body tags. Inside the body tag, it's further divided into div, h1, and p tags. 

The basic HTML tags are:

  • Text headers - <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.
  • Paragraph tags <p>
  • Horizontal ruler tag <hr>
  • Link tags <a> 
  • Image tag <img>
  • Divider tag <div> 

graphic showing html hierarchy

What makes HTML different from coding languages?

If you've previously coded before, you might have worked in an IDE, a program where you typed and ran your code. Web development is different. The web has content stored in HTML, that content is styled in CSS, and then interactions are added with JavaScript. 

Keep exploring!

It goes without saying: there is a lot to explore here. There are endless layers to add to make a website you’re excited to share.

Need some expert guidance? Working with an online tutor is an excellent way to explore concepts at your own pace. Check out our guide to the best online tutoring services and new Online Private Lesson topics to get started today!

A photo of Virginia

Virginia started with iD Tech at the University of Denver in 2015 and has loved every minute since then! A former teacher by trade, she has a master's in education and loves working to embolden the next generation through STEM. Outside the office, you can usually find her reading a good book, struggling on a yoga mat, or exploring the Rocky Mountains.