10 HTML and CSS Code Challenges for Beginners
- Share article on Twitter
- Share article on Facebook
- Share article on LinkedIn
HTML and CSS form the foundation of modern web development . HTML defines how a web page is structured, and CSS defines its style. While both languages are relatively easy to learn, once you know the basics, you’ll still need to sharpen your skills with practice.
Code challenges are a great way to sharpen your programming skills and combine them in different ways. Here are 10 HTML and CSS code challenges that’ll help you take your skills to the next level. To get started, just pick a challenge, open up a workspace , and start coding.
Note that while these challenges are designed for beginners, you’ll still need to have a basic understanding of HTML and CSS. If you need a refresher, use the courses below:
1. Create a tribute page
Choose a historical figure who’s meaningful to you and create a webpage dedicated to them. The webpage should include:
- A title or heading with the person’s name
- An image of the person
- A caption for the image
- A timeline of the person’s life in the form of a list
This can be completed with only HTML, but use CSS to give it some style.
2. Create a Wikipedia page
Wikipedia is one of the backbones of the internet, and it has a relatively simple layout. Create a Wikipedia page on the topic of your choice. It should include:
- A title or heading
- A table of contents with links to sections within the page
- Superscript number links that link to the corresponding number in the reference section
- An ordered list of references
3. Create an HTML and CSS-only search results page
Create a mock Google search results page. It should include:
- The Google logo
- A search bar at the top
- A list of search results with clickable links
Here’s an example of what it might look like.
4. Create a survey form
HTML forms are an important part of many websites. Create a form for a survey on the topic of your choice.
Include a variety of answer options, including text fields, dropdowns, radio buttons, checkboxes, and a submit button. Don’t forget to add a title, and consider using CSS to improve the look of your form. Here’s an example .
5. Create a parallax website
A parallax website has a fixed image in the background that stays in place while you scroll through other parts of the page. It’s a popular effect in web design and gives an elegant look and feel to a page.
Design a parallax webpage. Divide the page into three or four sections. Set three or four background images and align text to each section. You’ll use margins , padding , and background positioning to create the effect. Here’s an example of a parallax website.
6. Create a product landing page
Many websites are designed to showcase and sell products. A product landing page needs to be attractive, informative, and easy to read to appeal to consumers. Your product landing page should include:
- A picture of the product
- A header and footer
- Multiple sections
Consider the color scheme and ensure that elements don’t overlap each other.
7. Create a restaurant website
A restaurant website is similar to a product landing page in that it should showcase the restaurant and menu items appealingly. It’s more complex, though, with images of different foods and drinks. First, create a responsive restaurant website using a viewport and media queries.
8. Create a chessboard
This challenge teaches you how to create and format a table . You’ll also need to learn how to insert UNICODE characters.
Create a chessboard. The board should be alternating colors and an eight-by-eight grid. Here are the UNICODE characters you’ll need for the pieces.
- White King: ♔
- White Queen: ♕
- White Rook: ♖
- White Bishop: ♗
- White Knight: ♘
- White Pawn: ♙
- Black King: ♚
- Black Queen: ♛
- Black Rook: ♜
- Black Bishop: ♝
- Back Knight: ♞
- Black Pawn: ♟
9. Create an event or conference website
This challenge continues the theme of building attractive web pages. This one will include a registration button that links to a registration form. You’ll also need details and images of the speaker or performer and venue. Describe the event and include multiple sections along with a header and footer. Consider the color scheme and use fonts that are readable and reflect the theme of the event.
10. Create a portfolio website
Take what you’ve learned throughout the other challenges and create a portfolio website. The website should reflect your skills.
Include a page with your resume, work samples, a photo, and a top menu with links to an about page, contact page, and any other pages you’d like to include. In the footer, include your contact information and links to your relevant social media accounts.
Building your HTML and CSS skills
Code challenges are just one way to build your HTML and CSS skills. You can also brush up with courses like Learn HTML , Learn CSS , and Learn Intermediate CSS . These courses build on one another, though you can always jump into an intermediate class if you already have a good base knowledge of CSS.
Skill Paths are another great way to learn specific skills. Our Learn How to Build Websites Skill Path walks you through HTML and CSS, along with responsive design and accessibility . You’ll end the class with a polished website that you can use in your portfolio. We also have a standalone course on responsive design .
Whether you’re looking to break into a new career, build your technical skills, or just code for fun, we’re here to help every step of the way. Check out our blog post about how to choose the best Codecademy plan for you to learn about our structured courses, professional certifications, interview prep resources, career services, and more.
Learn intermediate css, subscribe for news, tips, and more, related articles.
What Is an Operating System?
An operating system manages a computer’s software and hardware and provides an interface for other applications to interact with the computer.
What Is CoffeeScript?
What Is Social Engineering?
What is social engineering? If you want to know how to spot and avoid online scammers, hackers, and anyone out for your password, then be sure to check out this article.
Celebrating 32 Years Of Python With All The Reasons Why It’s So Iconic
We’re going to party like it’s 1991 for Python’s 32nd birthday.
How Myspace, Neopets & The Internet of the Aughts Taught Millennials to Code
Justice For HTML/CSS: How These Languages Built The 2000s Internet & Launched Countless Tech Careers
Programmers are quick to dismiss these foundational languages — here’s why.
How I Went From Purchasing Manager At A Plastics Company To An Implementation Engineer
Today’s story is from Petko Georgiev, a 29-year-old Implementation Engineer at DXC living in Veliko Turnovo, Bulgaria.
Html graphics, html examples, html references, html basic examples.
In this chapter we will show some basic HTML examples.
Don't worry if we use tags you have not learned about yet.
All HTML documents must start with a document type declaration: <!DOCTYPE html> .
The HTML document itself begins with <html> and ends with </html> .
The visible part of the HTML document is between <body> and </body> .
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
HTML paragraphs are defined with the <p> tag:
HTML links are defined with the <a> tag:
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML images are defined with the <img> tag.
The source file ( src ), alternative text ( alt ), width , and height are provided as attributes:
How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they do that?"
View HTML Source Code:
Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
Get your certification today!
Get certified by completing a course today!
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank you for helping us.
Your message has been sent to W3Schools.
Top references, top examples, web certificates, get certified.
Learn HTML Code, Tags & CSS
HTML For Beginners The Easy Way: Start Learning HTML & CSS Today
Welcome! You’ve Found the Easiest Way to Learn HTML and CSS.
- 1 Welcome! You’ve Found the Easiest Way to Learn HTML and CSS.
- 2.1 What is HTML?
- 2.2 The History of HTML
- 2.3 What are Tags and Attributes?
- 2.4 HTML Editors
- 2.5 Creating Your First HTML Webpage
- 2.6 Adding Content
- 2.7 How To Close an HTML Document
- 2.8 Troubleshooting
- 3.1 Intermediate & Advanced Tutorials
- 3.2 HTML Reference Guides
- 3.3 HTML Attributes Reference Guide
- 3.4 HTML Cheat Sheet
- 3.5 The HTML.com Blog
- 3.6 The HTML.com Guide to Web Hosting
- 4 Improve Your HTML Skills
Whether you are a novice, hoping to delve into the world of web design or an experienced webmaster keen to improve your skills, we’ve got online tutorials tailored to your web design needs .
In a rush? Go straight to our tutorial and start learning HTML now!
Our absolute beginner tutorial will turn you from wannabe to webmaster in just a few hours. Unlike many other HTML tutorials, it’s a step-by-step guide – not a boring long-winded reference.
Our step-by-step guide teaches you the basics of HTML and how to build your first website. That means how to layout an HTML page, how to add text and images, how to add headings and text formatting, and how to use tables.
We’ll get you building your new website in minutes , not hours.
HTML for Absolute Beginners
While many guides on the internet attempt to teach HTML using a lot of mind-boggling theory, this tutorial will instead focus on giving you the practical skills to build your first site .
The aim is to show you ‘how’ to create your first web page without spending the entire tutorial focusing too much on the “why.”
By the end of this tutorial, you will have the know-how to create a basic website and we hope that this will inspire you to delve further into the world of HTML using our follow-on guides.
What is HTML?
Okay, so this is the only bit of mandatory theory. In order to begin to write HTML, it helps if you know what you are writing.
HTML is the language in which most websites are written . HTML is used to create pages and make them functional.
The code used to make them visually appealing is known as CSS and we shall focus on this in a later tutorial. For now, we will focus on teaching you how to build rather than design .
The History of HTML
HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989 . It stands for Hyper Text Markup Language.
Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5 .
A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes .
What are Tags and Attributes?
Tags and attributes are the basis of HTML.
They work together but perform different functions – it is worth investing 2 minutes in differentiating the two .
What Are HTML Tags?
Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1> .
Most tags must be opened <h1> and closed </h1> in order to function.
What are HTML Attributes?
Attributes contain additional pieces of information . Attributes take the form of an opening tag and additional info is placed inside .
An example of an attribute is:
<img src="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.
Golden Rules To Remember
- The vast majority of tags must be opened ( <tag> ) and closed ( </tag> ) with the element information such as a title or text resting between the tags.
- When using multiple tags, the tags must be closed in the order in which they were opened . For example: <strong><em>This is really important!</em></strong>
Now that we’ve gotten the basic theory out of the way. It’s time to learn how to build our first website .
First off, we must ensure that we have the right tools. Most important, we need an HTML editor.
There are many choices on the market. Here are a handful of the most popular:
Sublime Text 3
However, for this tutorial, we will use the Sublime Text 3 as it is free and also offers cross-platform support for Windows, Mac, and Linux users.
- Easily customizable
- Pleasant color schemes to choose from.
- Can’t print documents or code
- No toolbar or dashboard available.
Another common choice for HTML and other language coders is Notepad ++ . It is a tiny program to download and perform the functions you need for writing clean code.
- Distraction-free interface
- Auto-completion feature
- Plugin options for extended functionalities.
- Can be difficult to get used to for beginners
- No support for Mac.
Komodo Edit is one of two editors released by the same label. They offer a simple, open-source editor with a variety of extensions and language support .
It is free to download.
- Easy-to-grasp coding interface
- Available for Mac, Windows, and Linux
- Impressive language support.
- No autocompletion by default
- Visual settings are difficult to find and change.
What To Avoid
Your code’s front-end view varies from browser to browser – you will learn more about this with advanced CSS.
Do not use Microsoft Word or any other word processor when writing HTML code, only an HTML editor or at the very least, your machine’s built-in notepad, is suitable for the task.
Secondly, ensure that you’ve installed a number of different browsers such as Chrome and Firefox in order to preview your upcoming creation.
Creating Your First HTML Webpage
First off, you need to open your HTML editor, where you will find a clean white page on which to write your code.
From there you need to layout your page with the following tags.
Basic Construction of an HTML Page
These tags should be placed underneath each other at the top of every HTML page that you create.
<!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the language is HTML 5.
<html> — This tag signals that from here on we are going to write in HTML code.
<head> — This is where all the metadata for the page goes — stuff mostly meant for search engines and other computer programs.
<body> — This is where the content of the page goes.
Inside the <head> tag, there is one tag that is always included: <title> , but there are others that are just as important:
Let’s try out a basic <head> section:
Next, we will make <body> tag.
The HTML <body> is where we add the content which is designed for viewing by human eyes.
This includes text, images, tables, forms and everything else that we see on the internet each day.
How to Add HTML Headings To Your Web Page
In HTML, headings are written in the following elements:
As you might have guessed <h1> and <h2> should be used for the most important titles, while the remaining tags should be used for sub-headings and less important text.
Search engine bots use this order when deciphering which information is most important on a page.
Creating Your Heading
Let’s try it out. On a new line in the HTML editor, type:
<h1>Welcome to My Page</h1>
And hit save. We will save this file as “index.html” in a new folder called “my webpage.”
The Moment of Truth : Click the newly saved file and your first ever web page should open in your default browser. It may not be pretty it’s yours… all yours. *Evil laugh*
Well let’s not get carried away; we’ve still got loads of great features that we can add to your page.
How To Add Text In HTML
Adding text to our HTML page is simple using an element opened with the tag <p> which creates a new paragraph . We place all of our regular text inside the element <p> .
When we write text in HTML, we also have a number of other elements we can use to control the text or make it appear in a certain way .
Other Key Elements
They are as follows:
These tags must be opened and closed around the text in question.
Let’s try it out. On a new line in the HTML editor, type the following HTML code:
<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p>
Don’t forget to hit save and then refresh the page in your browser to see the results.
How To Add Links In HTML
As you may have noticed, the internet is made up of lots of links .
Almost everything you click on while surfing the web is a link takes you to another page within the website you are visiting or to an external site.
Links are included in an attribute opened by the <a> tag. This element is the first that we’ve met which uses an attribute and so it looks different to previously mentioned tags .
The Anchor Tag
The <a> (or anchor) opening tag is written in the format:
< a href =" https://blogging.com/how-to-start-a-blog/ ">Your Link Text Here </a>
The first part of the attribute points to the page that will open once the link is clicked.
Meanwhile, the second part of the attribute contains the text which will be displayed to a visitor in order to entice them to click on that link.
If you are building your own website then you will most likely host all of your pages on professional web hosting . In this case, internal links on your website will <a href=”mylinkedpage.html”>Link Title Here</a>.
Let’s Create An Anchor Tag
Let’s try it out. Make a duplicate of the code from your current index.html page. Copy / paste it into a new window in your HTML editor.
Save this new page as “page2.html” and ensure that it is saved in the same folder as your index.html page.
On page2.html add the following code:
<a href=" http://www.google.com ">Google</a>
This will create a link to Google on page 2. Hit save and return to your index.html page.
On a new line on index.html add the following code:
Ensure the folder path to the file (page2.html) is correct. Hit save and preview index.html in your browser.
If everything is correct then you will see a link which will take you to your second page . On the second page, there will be a link that will take you to google.com.
How To Add Images In HTML To Your Website
In today’s modern digital world, images are everything. The <img> tag has everything you need to display images on your site. Much like the <a> anchor element, <img> also contains an attribute.
The attribute features information for your computer regarding the source , height , width and alt text of the image.
Styling and Formats
You can also define borders and other styles around the image using the class attribute. However, we shall cover this in a later tutorial.
The file types generally used for image files online are : .jpg, .png, and (less and less) .gif.
Alt text is important to ensure that your site is ranked correctly on search sites and also for visually impaired visitors to your site.
The <img> tag normally is written as follows:
<img src="yourimage.jpg" alt="Describe the image" height="X" width="X">
Let’s try it out.
Create Your Own Image With An Alt Text
Don’t be afraid to play around with the test code – it’s a great way to have fun while learning.
Save an image (.jpg, .png, .gif format) of your choice in the same folder where you’ve saved index.html and page2.html. Call this image “testpic.jpg.”
On a new line in your HTML editor enter the following code :
<img src="testpic.jpg" alt="This is a test image" height="42" width="42">
Hit save and preview the index.html page in your browser.
How To Make an HTML List
In web design, there are 3 different types of lists which you may wish to add to your site.
The first is an <ol> : This is an ordered list of contents. For example:
- Another item
- Another goes here.
Inside the <ol> tag we list each item on the list inside <li> </li> tags.
The second type of list that you may wish to include is an <ul> unordered list. This is better known as a bullet point list and contains no numbers.
An example of this is:
Finally, you may wish to include a definition list <dl> on your page. An example of a <dl> list is as follows:
The code used for the above is as follows:
Let’s try it out. Open index.html and on a new line, enter the following HTML:
Now hit save and check out the results in your browser. If everything worked out then it will display a bullet-pointed table displaying the information above.
How To Add Tables In HTML
Another way to keep your website looking neat and orderly is through the use of a table.
Do not use a table to layout your website . Search engines hate it and it is generally a bad idea. Just… don’t. See our CSS tutorial , instead.
This is definitely the most complicated part of this tutorial, however, learning it will certainly pay off in the long-run.
With this in mind, tables can still be a useful way to present content on your page.
What Does a Table Consist Of?
When drawing a table we must open an element with the <table> opening tag. Inside this tag, we structure the table using the table rows, <tr> , and cells, <td> .
An example of an HTML table is as follows:
This will produce a 2-row table with 3 cells in each row.
Tables can get quite complicated, so be sure to check out our special HTML tables tutorial.
However, watch out for these tags so that you can recognize them and use them as your skills develop.
Here are the tables tags presented in a table – pun totally intended.
Tables, borders, spacing are usually styled using CSS but we will cover this in a later tutorial.
Let’s Make a Table
Go to a new line on the index.html page within your text editor. Enter the following HTML code:
Hit save and preview it in your browser .
Congratulations: You did it!
How To Close an HTML Document
You’ve reached the end of our absolute beginners HTML tutorial .
The final step we need to complete is to close the <body> and <html> tags at the end of each page using the following HTML code:
In this guide, you’ve learned how to create basic HTML web pages.
You’ve also learned to add headings, text, images, links, lists and basic tables to these pages.
You can now use this knowledge to create your own web pages containing these features and link them together.
We suggest that you further enhance your skills by experimenting with the code you’ve learned using different variables. You may also wish to learn about how to make your pages beautiful using CSS .
The power to create your own website is now in your hands.
In case things didn’t work out as intended, simply check your HTML code against the examples below .
Index.html troubleshooting code:
page2.html troubleshooting code:
Our Other HTML Tutorials
Our HTML tutorials teach you how to create a personal website or site for your business, without forcing you to learn unnecessary theory.
Our most popular beginner’s tutorials include:
These tutorials guide you through the process of creating tables for your exact needs. Tables were once the primary means by which pages were laid out.
With the adoption of CSS, this is no longer necessary. And for good reason, because this created pages that were almost impossible to maintain. But for the purpose of display tables, HTML offers all the tools you will need.
There’s a lot more to links than just moving from page to page. In this tutorial, you will learn how to navigate pages and download files .
You’ll also learn how to make your links as user-friendly as possible. Links are the core of HTML so this is important stuff.
Forms are important for marketing as well as creating web applications and more.
At one time, the font was an HTML tag and it made creating maintainable web pages a nightmare. Now we use CSS to set fonts and their attributes like weight, style, and size.
And by using CSS, you can set the look of your pages consistently with the ability to radically change them by changing just a few lines of code. This tutorial explains all.
With the use of the img tag and CSS, you can do just about anything you want.
But with HTML5, you have the addition of the picture and figure elements. Find out how to do images right with this thorough tutorial.
Intermediate & Advanced Tutorials
We’ve plenty of topics for intermediate and advanced HTML learners, too:
CCS, Cascading Style Sheets, allow you to design and ornament your web pages.
This tutorial takes you from the beginning to being fluent in CSS so that you can create complex pages that are easily maintained.
This tutorial assumes you know nothing and gets you going with this essential programming language. It even introduces you to advanced subjects like AJAX and jQuery.
Video: This 3 minute crash course is a great way to start understanding HTML5.
HTML5 has revolutionized webpage markup with things like semantic and multimedia elements . Find out all about the new goodies that are waiting to be explored.
This tutorial introduces you to semantic markup that allows you to construct pages so that their structure reveals their content.
This is especially useful as search engines become more and more advanced — allowing them to find users the right information they are looking for.
You may have noticed that few people use the i tag for italics and instead use the em tag.
This is because the i tag is just a formatting tag and thus should really be accomplished with CSS. The em has meaning: the text is emphasized.
Logical tags like em and cite are important in the same way as semantic markup. Find more in this brief discussion.
HTML Reference Guides
Meanwhile, our detailed HTML tags reference lets you find out more about every single HTML tag from <a> to <xmp> .
Each tag reference includes background and examples , which show how to use the tag in question. It’s perfect for when you want to troubleshoot problems while coding HTML.
Below are some of the most common tags — used by nearly every website you encounter:
Links are far more powerful than new HTML coders realize. Find out all you need to know to make the greatest use of the a tag.
The link tag can be confusing because it is easy to mix up with “links” (defined with the a tag).
But link is a very powerful tag that allows you to link an HTML document to an outside resource like a CSS file. Find out all you need to know here.
This tutorial shows you how.
Another great aspect of HTML is its ability to use non-keyboard keys like ® ( &reg; ) and © ( &copy; ).
This reference provides you with the information you need to make full use of these symbols .
Headings are a way to make text stand out by breaking up the page.
Paragraphs determine line spacing.
Create italics text just like in a word processor.
Bold text emphasizes keywords.
The anchor tag is most commonly used to create links in combination with the href attribute.
Unnumbered lists of bullet points use the Unordered List tag.
Each line on a list is enclosed by a List Item tag.
Blockquote tags are used to enclose quotations from people. This tag helps to differentiate the quote from the text around it.
A horizontal rule is a straight line commonly used for dividing areas of a webpage.
Learn the image tag to find out how to code pictures into your page.
The Division tag defines specific layout styles within CSS.
HTML Attributes Reference Guide
The HTML attributes section is designed to allow you to get up close and personal with the HTML attributes that you know and love while introducing you to some advanced attributes along the way.
Our most popular attributes include :
<img src=""> — Learn how to pick the image to display.
<img alt="html task for beginners"> — This sets the name of the image for those who can’t see the image for one reason or another.
<a target=""> – Links don’t have to fill the current page. There are other, often better, options.
<a href=""> — The basic link attribute sets where it will transport the user to .
<body background-*=""> — Learn to set a webpage’s background color, image, or more .
<table bordercolor=""> — Find out how to set the border color of your tables.
HTML Cheat Sheet
If you are pretty confident in your HTML abilities but sometimes feel like double-checking your work then look no further than our HTML cheat sheet .
This handy guide will show you everything you need to know about HTML in a super-compact, and easy-to-understand format . It provides information on particular tags and specific attributes in an alphabetized format.
You can bookmark the page for easy retrieval. Or you can print out our PDF so you can keep it by your desk.
The HTML.com Blog
Our blog includes posts covering all corners of the internet.
Why Did The British Government Ban These 10 Websites?
The UK uses an “adult content filter” and censors many respected websites. But what they mean by “adult content” may surprise you.
100+ Places to Post and Share Your Photos Online
Many dozens of places to upload and display your images. It’s often better to host your images away from your website . Here are a number of choices.
Google Calendar: 50 Themes, Hacks & Add-Ons
Learn how to integrate your Google Calendar into your website.
Homebrew Nintendo Wii Hacks & Mods
Learn 100 cool Wii tips and tricks.
The 20 Best Internet Scam Stories
Read all about amazing internet scams that have rocked the world.
What Is Doxxing?
Find out about online privacy and the process of having your personal information released to the world.
The HTML.com Guide to Web Hosting
Keep an eye out for bundles which include site builders and extras – they are out there.
If you’ve already built your website then look no further than the HTML.com guide to web hosting .
We’ll help you find the best hosting provider for your website.
Whether you are searching for a WordPress host, a cheap and cheerful space for your first website, or a dedicated hosting solution, our hosting section has reviews of all the big name hosting providers and a few smaller companies too, including:
This is one of the best hosting companies around with a full range of plans for whatever kind of hosting you need.
The first host to be officially recommended by WordPress . But they are a good host for any website.
One of the most affordable hosting companies around. If you want to keep costs down without losing quality and features, iPage is a good choice.
One of the best all-around hosting companies — well worth checking out.
Improve Your HTML Skills
Now that you’ve gotten started with HTML, you can improve your skills . It’s exciting to see everything you can do with web pages. Check out more of our tutorials and start learning now!
Fun HTML Activities for Beginners
Have you ever wanted to build your own website? Today we’re going to show you some fun HTML activities for beginners to help you get a better understanding of HTML coding and get you started building a site of your very own!
These days, there are lots of cool apps out there that make building a simple website quick and easy. But if you want to build something really cool and unique, knowing how to code in HTML is super important!
Learning HTML is important because the internet was created on and continues to rely heavily on HTML code. Automated WYSIWIG (What you See is What You Get) website editors are helpful but they have their limitations. Fortunately, many automated website editors also have the ability to also use custom HTML code. So, if you want more control of your website, learning how to code HTML for yourself is key!
Find out how to build web pages with HTML and CSS in our award-winning online class, Build Your Web , designed by Google, Stanford, and MIT professionals, and led live by an expert.
Discover HTML activities for beginners with this tutorial for kids
Learning HTML sometimes involves a lot of trial and error. Today’s activities will give you a chance to:
- experiment and make mistakes in a safe environment
- explore some key HTML concepts
Here are a few fun activities you can try to get your feet wet in the world of HTML coding!
1. Make your first webpage using HTML!
The first thing you need to know is that websites are built using a coding language called HTML. HTML is a coding language that uses tags. Tags are kind of like boxes. There are lots of kinds of boxes that have different “attributes” like color or size and different boxes can be used to hold different things. Some boxes are even used to hold other boxes. When using boxes to hold things in the real world, it’s important to have a bottom and a cover for the box so it works properly and so that things inside the boxes don’t spill out. HTML tags are the same way.
In this first activity we will customize a pre-built web page to make your first web page! To customize this web page and make it your own, we will be customizing an < h1 > tag and a < p > tag. An < h1 > tag is for making a large heading or title section on your page and the < p > tag is for making paragraphs.
Before experimenting with the tags, keep in mind that every tag needs an opening tag and a closing tag. The opening tag is like the top of a box and the closing tag is like the bottom. The opening and closing tags keep everything contained just like the lid and bottom of a box.
For example, the large heading tag starts like this < h > and ends like this </ h >.
Do you see the “/”? This tells the computer that we are closing the heading tag.
Now that you have the basics, click over to this page and start customizing.
- Start by changing the words inside the < h1 > tag. You can put something like, “Welcome to my first web page!”
- Then, try changing the text in the < p > tag right below your heading. Write a paragraph sharing your favorite outdoor activity. :)
- When you’re ready to test your web page, hit the big green button that says “Run”.
- Be very careful with the opening and closing tags. If you accidentally erase a “<” or the “/” it may make the page render funny. You have to be very precise with your typing.
- HTML doesn’t work the same as a typical text editor like Microsoft Word or Apple Pages or Google Docs. If you press the “Return” button on your keyboard to get a new line, the web browser won’t do as you expect. If you’d like to add a new line after a sentence, you will need to use a line break tag. < br >
So for example if you type this:
The page will render like this:
Hello, I’m Ray. I like to play lacrosse. To render properly, you’ll want to use the line break tag < br > like this:
This will work correctly, too.
2. Dress Up Your Text
In this activity you’ll learn how to make your words in your paragraph stand out by making words bold, or italic , or underlined.
To do this, you will use use the following tags:
< b > for bold text
< i > for italic text
< u > for underlined text
Will render like this:
Hello! My name is Ray and I like to play lacrosse .
For this activity, you can continue customizing your webpage from the previous activity or click here to start a new webpage :
- Remember, whenever you use an HTML tag, don’t forget to use a closing tag to let the computer know when you want the text effect to stop.
- You can also NEST tags. For example, what if you wanted some text to be both bold AND italic ? You can insert a tag, followed by another tag, followed by the text you want to decorate, followed by the closing tags like this:
The above code will render like this:
The following text will be both bold and italic .
3. Adding links to your page.
No webpage would be complete without links to other pages, right?! So let’s explore creating links.
To create a tag, we will need to use the anchor tag < a >.
Until now, we have only been using simple container tags. A box is a type of container. The tags we have been using so far have contained text. The anchor tag < a > is also a container tag but it is special because it is the first tag that we have encountered so far that has attributes . Attributes can change the personality or actions that can be applied to and by a tag.
The attributes we will be playing with for the anchor tag are href and target.
href stands for “Hypertext REFerence”. We can use the href attribute to reference another location in the webpage or another webpage.
target is used to specify where the href will be displayed.
Attributes are similar to variables and you can set their value using an equal sign “=”.
As an example:
This code will create a link to the USA Lacrosse website that looks like this:
The target value "_blank" tells the web browser to open this link in a new browser window.
For this activity, you can continue customizing your webpage from the previous activity or click here to start a new webpage . Copy the code example above, paste it into your HTML code and change the href attribute to your favorite website. Then change the text inside the < a > tags the same way you changed the text in the < h1 > and < p > tags.
- Be careful with the " symbols. Each attribute should have two. If you forget one, the web browser will get confused.
- Also remember to make sure you have matching < and > brackets for all your tags.
4. Exploring RGB Hex Colors
In this activity you’ll learn how to change colors in HTML using RGB Hexadecimal numbers.
Normally, we count from 0-10 and then move on to 11, 12, 13, 14, etc. In hexadecimal, the numbers go from 0 to 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
So for example, A in hex is the same as 10 in decimal. F in hex is the same as 15 in decimal.
Hexadecimal is useful because it allows us to express the same numerical value with fewer digits or characters. 15 in decimal requires 2 digits while saying the same number with “F” uses only one digit.
HTML uses hex numbers to give you very specific control of your colors. Lots of other programs like Adobe Photoshop and other graphics and video programs use hex numbers for colors as well, so learning hex colors is a very useful skill.
You may be wondering, “What is ‘RGB’? What does that mean?”
RGB stands for Red Green Blue. The first two characters in a six character RGB code give the amount of red. The second two give the amount of green. The last two characters give the amount of blue. So if you have the color code FF0000, that is true red. 00FF00 is all green. 0000FF is all blue.
FFFFFF means all the reds, all the greens, and all the blues, which makes white.
000000 means no reds, no greens, and no blues, which makes black.
You can create all kinds of combinations with the numbers to get a very specific color.
Ready to try playing around with RGB hexadecimal colors? Try it here.
- Be careful not to get confused with the color attribute code and the label. The numbers you want to change are the numbers connected to this code: “background-color:#ff0000;”
- Hit the green “Run” button to run your code
- You can reload the page if you mess up and want to start over
5. Adding color to your text
Now that you know how colors are handled in HTML, let's add some more fun and personality to your plain text. Before, we started off by playing around with HEX color codes. These are great if you want complete control over your color choices. But for your convenience, you can ALSO use CSS (Cascading Style Sheet) color keywords to use “pre-mixed” colors. For a complete list of CSS Color Keywords, check out this link .
For most HTML tags, you can use the style attribute to control different tag properties such as color, size, font, font decoration, etc. In fact, this is the PREFERRED way to style your HTML code because it gives you much more flexibility when you decide you want to give your website a new look. In this activity, we will focus on the style attribute to control the color of the text in a heading and a couple paragraphs.
The style attribute can take several “key/value pair” values. The key is the property you want to change and the value tells the browser how to change that property.
This bit of code will render a small heading like this:
Do you see how the key/value pair is entered inside the " " marks? The key is color and the value is red.They are separated by a “:”. If you wanted to add another property to change, you can separate the key/values with a semi-colon “;” like this:
This bit of code will render like this:
Ready to give it a try? Click this link and try changing the colors on the < h3 > heading and the two < p > paragraphs.
If you’d like to play around with more text-decoration properties, you can see more options here .
And here are some other ways you can make your text bold or italic.
Get started with HTML activities for beginners
We hope you enjoyed creating your first webpage with HTML! You now know how tags work, how to create headings and paragraphs, how to make your text fancy, and how to change colors. Want to learn more? Check out our tutorial for learning HTML . And join our award-winning live online, small group Build Your Web class , designed by professionals from Google, Stanford, and MIT.
Written by Ray Regno, who earned his B.S. in Computer Science at the University of California San Diego in 2003. Only two years after graduation, Ray left his career as a software engineer to pursue his true passion: inspiring and educating others. For almost two decades Ray has taught students of all ages a wide variety of topics and disciplines including coding, fitness, music, automotive repair, and leadership development.
How to Edit Minecraft Textures
Fall Break Camps Online: Get Started Guide
How to Create a Game on Scratch: Tutorial for Beginners
How to Make an Obby in Roblox
Fun Halloween Coding Activities
How to Make a Minecraft Mod: Code Mods in Minecraft
You might also like....
Java Tutorial for Beginners
Kids Learn HTML: The Getting Started Guide
- Data Structure & Algorithm Classes (Live)
- System Design (Live)
- Explore More Live Courses
- Interview Preparation Course
- Data Science (Live)
- GATE CS & IT 2024
- Data Structure & Algorithm-Self Paced(C++/JAVA)
- Data Structures & Algorithms in Python
- Explore More Self-Paced Courses
- C++ Programming - Beginner to Advanced
- Java Programming - Beginner to Advanced
- C Programming - Beginner to Advanced
- Full Stack Development with React & Node JS(Live)
- Java Backend Development(Live)
- Android App Development with Kotlin(Live)
- Python Backend Development with Django(Live)
- Complete Data Science Program(Live)
- Mastering Data Analytics
- DevOps Engineering - Planning to Production
- CBSE Class 12 Computer Science
- School Guide
- All Courses
- Linked List
- Binary Tree
- Binary Search Tree
- Advanced Data Structure
- All Data Structures
- Asymptotic Analysis
- Worst, Average and Best Cases
- Asymptotic Notations
- Little o and little omega notations
- Lower and Upper Bound Theory
- Analysis of Loops
- Solving Recurrences
- Amortized Analysis
- What does 'Space Complexity' mean ?
- Pseudo-polynomial Algorithms
- Polynomial Time Approximation Scheme
- A Time Complexity Question
- Searching Algorithms
- Sorting Algorithms
- Graph Algorithms
- Pattern Searching
- Geometric Algorithms
- Bitwise Algorithms
- Randomized Algorithms
- Greedy Algorithms
- Dynamic Programming
- Divide and Conquer
- Branch and Bound
- All Algorithms
- Company Preparation
- Practice Company Questions
- Interview Experiences
- Experienced Interviews
- Internship Interviews
- Competitive Programming
- Design Patterns
- System Design Tutorial
- Multiple Choice Quizzes
- Go Language
- Tailwind CSS
- Foundation CSS
- Materialize CSS
- Semantic UI
- Angular PrimeNG
- Angular ngx Bootstrap
- jQuery Mobile
- jQuery EasyUI
- React Bootstrap
- React Rebass
- React Desktop
- React Suite
- ReactJS Evergreen
- ReactJS Reactstrap
- English Grammar
- School Programming
- Number System
- Class 8 Syllabus
- Class 9 Syllabus
- Class 10 Syllabus
- Class 11 Syllabus
- Class 8 Notes
- Class 9 Notes
- Class 10 Notes
- Class 11 Notes
- Class 12 Notes
- Class 8 Formulas
- Class 9 Formulas
- Class 10 Formulas
- Class 11 Formulas
- Class 8 Maths Solution
- Class 9 Maths Solution
- Class 10 Maths Solution
- Class 11 Maths Solution
- Class 12 Maths Solution
- Class 7 Notes
- History Class 7
- History Class 8
- History Class 9
- Geo. Class 7
- Geo. Class 8
- Geo. Class 9
- Civics Class 7
- Civics Class 8
- Business Studies (Class 11th)
- Microeconomics (Class 11th)
- Statistics for Economics (Class 11th)
- Business Studies (Class 12th)
- Accountancy (Class 12th)
- Macroeconomics (Class 12th)
- Machine Learning
- Data Science
- Operating System
- Computer Networks
- Computer Organization and Architecture
- Theory of Computation
- Compiler Design
- Digital Logic
- Software Engineering
- GATE 2024 Live Course
- GATE Computer Science Notes
- Last Minute Notes
- GATE CS Solved Papers
- GATE CS Original Papers and Official Keys
- GATE CS 2023 Syllabus
- Important Topics for GATE CS
- GATE 2023 Important Dates
- Software Design Patterns
- HTML Cheat Sheet
- CSS Cheat Sheet
- Bootstrap Cheat Sheet
- JS Cheat Sheet
- jQuery Cheat Sheet
- Angular Cheat Sheet
- Facebook SDE Sheet
- Amazon SDE Sheet
- Apple SDE Sheet
- Netflix SDE Sheet
- Google SDE Sheet
- Wipro Coding Sheet
- Infosys Coding Sheet
- TCS Coding Sheet
- Cognizant Coding Sheet
- HCL Coding Sheet
- FAANG Coding Sheet
- Love Babbar Sheet
- Mass Recruiter Sheet
- Product-Based Coding Sheet
- Company-Wise Preparation Sheet
- Array Sheet
- String Sheet
- Graph Sheet
- ISRO CS Original Papers and Official Keys
- ISRO CS Solved Papers
- ISRO CS Syllabus for Scientist/Engineer Exam
- UGC NET CS Notes Paper II
- UGC NET CS Notes Paper III
- UGC NET CS Solved Papers
- Campus Ambassador Program
- School Ambassador Program
- Geek of the Month
- Campus Geek of the Month
- Placement Course
- Student Chapter
- Geek on the Top
- Geography Notes
- History Notes
- Science & Tech. Notes
- Ethics Notes
- Polity Notes
- Economics Notes
- UPSC Previous Year Papers
- SSC CGL Syllabus
- General Studies
- Subjectwise Practice Papers
- Previous Year Papers
- SBI Clerk Syllabus
- General Awareness
- Quantitative Aptitude
- Reasoning Ability
- SBI Clerk Practice Papers
- SBI PO Syllabus
- SBI PO Practice Papers
- IBPS PO 2022 Syllabus
- English Notes
- Reasoning Notes
- Mock Question Papers
- IBPS Clerk Syllabus
- Apply for a Job
- Apply through Jobathon
- Hire through Jobathon
- All DSA Problems
- Problem of the Day
- GFG SDE Sheet
- Top 50 Array Problems
- Top 50 String Problems
- Top 50 Tree Problems
- Top 50 Graph Problems
- Top 50 DP Problems
- Solving For India-Hackthon
- GFG Weekly Coding Contest
- Job-A-Thon: Hiring Challenge
- BiWizard School Contest
- All Contests and Events
- Saved Videos
- What's New ?
- Web Development
- Write Articles
- Pick Topics to write
- Guidelines to Write
- Get Technical Writing Internship
- Write an Interview Experience
- PHP Pagination | Set 3
- PHP Pagination | Set 1
- How to make a Pagination using HTML and CSS ?
- CSS | Pagination
- Advanced Selectors in CSS
- 10 CSS Selectors Every Developer Should Know
Top 10 Projects For Beginners To Practice HTML and CSS Skills
- Programming For Beginners: 10 Best HTML Coding Practices You Must Know
- Top 5 Skills You Must Know Before You Learn ReactJS
- How To Learn ReactJS: A Complete Guide For Beginners
- Sum of an array using MPI
- MPI – Distributed Computing made easy
- Cloud Computing
- Cloud Based Services
- Types of Cloud
- Virtualization In Cloud Computing and Types
- Characteristics of Cloud Computing
- Issues in Cloud Computing
- Anatomy of Cloud Computing
- Cloud Computing Services in Financial Market
- Economics of Cloud Computing
- How to Become a Full Stack Web Developer in 2021?
- How to Become a Full Stack Web Developer in 2019 : A Complete Guide
- PHP Pagination | Set 2
- How to insert spaces/tabs in text using HTML/CSS?
- Hide elements in HTML using display property
- CSS to put icon inside an input element in a form
- How to create footer to stay at the bottom of a Web page?
- Difficulty Level : Medium
- Last Updated : 29 Jun, 2022
Learning to code is always exciting and fun for everyone and when it comes to stepping into the programming world most of the people start with the easiest thing HTML and CSS . Every beginner’s coding journey in frontend starts with these two basic building blocks and you need to be creative when it comes to designing a beautiful application.
Initially, beginners enjoy making buttons, adding the links, adding images, working with layout and a lot of cool stuff in web designing but when it comes to making a project using only HTML and CSS they get stuck and confuse about what they should make to practice all these stuff. Afterall their knowledge is just limited to HTML and CSS. No matter what after learning everything at some point you will realize that making a project is important to practice HTML and CSS skills. You need to check how HTML and CSS work together to design a beautiful frontend application. So the question is what are some beginner-friendly projects you can build to practice everything you have learned…Let’s discuss that.
1. A Tribute Page
The simplest website you can make as a beginner is a tribute page of someone you admire in your life. It requires only basic knowledge of HTML and CSS. Make a webpage writing about that person adding his/her image. On the top of the webpage, add the image and name of the person and below that give layout for the rest of the details. You can use paragraphs, lists, links, images with CSS to give it a descent look. Add a suitable background color and font style on your webpage. Most of the parts you can make using HTML but to give it a better look using a bit of CSS. Take help from the link given below.
- My Tribute Page
2. Webpage Including Form
Forms are always an essential part of any project and you will be working with a lot of forms in most of the applications so why not practice it earlier and test your knowledge. Once you get familiar with the input field or basic tags in HTML to create a form make a project using all those tags. How to use a text field, checkbox, radio button, date, and other important elements in a single form. You will be learning how to give a proper structure to a webpage while creating a form. Knowledge of HTML / HTML5 is good enough but you can use a bit of CSS to make the project look better. Take help from the links given below.
- Survey Form
3. Parallax Website
A parallax website includes fixed images in the background that you can keep in place and you can scroll down the page to see different parts of the image. With basic knowledge of HTML and CSS, you can give a parallax effect to a website. Using the parallax effect in web designing is really popular and it gives beautiful look and feels to the webpage. Give it a try and divide the whole page into three to four different sections. Set 3-4 background images, align the text for different sections, set margin and padding, add background-position and other CSS elements and properties to create a parallax effect. You can take help from the link given below.
- Parallax Website
4. Landing Page
A landing page is another good project you can make using HTML and CSS but it requires a solid knowledge of these two building blocks. You will be using lots of creativity while making a landing page. You will practice how to add footer and header, create columns, align-items, divide the sections and a lot of things. You will have to use CSS carefully keeping in mind that different elements do not overlap with each other. You will also take care of color combinations, padding, margin, space between sections, paragraphs, and boxes. Color combinations should go well with each other for different sections or backgrounds.
5. Restaurant Website
Showcase your solid knowledge of HTML and CSS creating a beautiful webpage for a restaurant. Making a layout for a restaurant will be a bit complicated than previous project examples. You will be aligning the different food items and drinks using a CSS layout grid. You will be adding prices, images and you need to give it a beautiful look and feel as well using the proper combination of colors, font-style and images. You can add pictures gallery for different food items, you can also add sliding images for a better look. Add links for redirection to internal pages. Make it responsive setting a viewport, using media queries and grid. You can take help from the link given below.
- Restaurant Website
6. An Event or Conference Webpage
You can make a static page holding an event or conference. People who are interested in attending the conference create a register button for them. Mention different links for speaker, venue and schedule at the top in the header section. Describe the purpose of the conference or the category of people who can get benefit from this conference. Add an introduction and images of the speaker, venue detail and the main purpose of the conference on your webpage. Divide the page into sections, add header and footer showcasing the menu. Use proper background color that can go well with each other for various sections. Choose a descent font style and font color that matches the theme of your web page. It requires HTML/HTML5 and CSS knowledge in depth. You can take help from the link given below.
- Event webpage
7. Music Store Page
If you are a music lover you can make a webpage for it. It requires HTML5/ CSS3 knowledge. Add a suitable background image describing the purpose or what the page is all about. In the header section add different menus. Add buttons, links, images and some description about the collection of songs available. At the bottom mention the links for shopping, store, career or contact details. You can also add other features on your webpages such as a trial option, gift cards or subscription. Make it responsive setting viewport or using media queries and grid. You can take help from the link given below.
8. Photography Site
If you have in-depth knowledge of HTML5 and CSS3, you can make a one-page responsive photography site. Use flexbox and media queries for responsiveness. Add the company name with an image (related to photography) on the top (landing page). Below that showcase your work adding multiple images. Mention the contact detail of the photographer at the bottom (footer). Add a button to view your work. This button will directly bring you down to the images section. You need to take care of the margin, padding, color combination, font-size, font-style, image size and styling of a button. You can take help from the link given below.
- Image gallery
9. Personal Portfolio
With knowledge of HTML5 and CSS3, you can also create your portfolio. Showcase your work samples and skills in your portfolio with your name and pictures. You can also add your CV there and host your complete portfolio on GitHub account. In your header section mention some menus like about, contact, work or services. At the top add one of your images and introduce yourself there. Below that add some work samples and at last (footer) add contact information or social media account. You can take help from the links given below.
- Simple portfolio
- Portfolio gallery
10. Technical Documentation
- Technical Documentation
Helpful Link: 10 Tips for Effective Web Designing in 2019
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples .
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples .
Please Login to comment...
- Web Technologies
Learn 4 Years worth of Coding in 6 Months
New Course Launch!
Improve your Coding Skills with Practice
Start your coding journey now.
15 Top HTML Projects For Beginners [With Source Code]
Html projects ideas, best html projects for beginners, a tribute page, a questionnaire, technical documentation, a landing page, the event or conference web page, intermediate html projects with source code, a website with a parallax effect, your own portfolio, restaurant’s official webpage, music shop page, a photography-related website, advanced html projects with source code, whatsapp web clone, clone of the bbc news website, clone of the popular video-sharing site youtube, netflix clone on the web, the nike website clone, additional resources.
As a web standard, HTML is required for web designers and developers who work on the Internet. Paragraphs, headers, hyperlinks, quotations, and pictures are all elements of HTML. Because it’s not a programming language, it doesn’t perform anything dynamic; it only helps with site structure and layout. The simplest code defines how each website component should be shown.
When it comes to creating your first HTML projects, it is usually an exciting and delightful experience for anybody who has even the smallest interest in computer programming. Newcomers to coding are generally curious about what type of projects they may work on to impress their employers, launch their own development firm, or impress their college peers.
Confused about your next job?
When it comes to getting started in the coding world, most people choose to start with the most basic methods, HTML and CSS. As a result, when it comes to developing a unique application or website, you can make only static web pages because of thinking outside the box to stand out from the crowd of other developers who are also learning the same skills. In this manner, you may come up with innovative HTML projects!
You are about to embark on one of the most straightforward HTML projects you will ever do. As implied by the name, a tribute page is created to honor someone who has inspired you or to someone you adore and revere. To create a memorial page, you need to be familiar with the fundamentals of HTML. A tribute page is a web page which can be extended to many pages or sections. Make certain that the webpage’s background color is visually pleasing (use earthy tones or pastel colors).
Forms are often included on websites as part of their strategy for collecting client data. A well-designed survey form may assist you in obtaining valuable information about your target consumers, such as their age, work, location, taste and preference, and pain areas, all of which can be useful for your business. You may use this HTML project to test your abilities and knowledge to develop forms and organize a web page.
The creation of a landing page demands a basic understanding of HTML and CSS. Making a landing page requires a lot of ingenuity. You will learn how to build a footer and header, construct columns, align objects, and separate sections. You must utilize CSS with caution so that elements do not overlap. You will also deal with color combinations, padding, margins, section, paragraph, and box spacing. Colors should blend effectively in various areas or backgrounds.
Once again, this is a simple project with which you may explore. It will entail the creation of a static page that will present the specifics of an event (conference, webinar, product launch, etc.). This project will need the use of both HTML and CSS.
To make the page seem more organized, break it into smaller sections. Selecting the appropriate font type, font color, and background color for each website portion is essential. Also, be sure to include a registration button to sign up for individuals interested in attending the event.
Rather than having moving graphics in the background, a parallax website has fixed images in the backdrop that you may stay in place while scrolling down the page to view various areas of the image. A newbie well-versed in HTML ideas may create a parallax website in a single day! An essential parallax website has a fixed picture in the backdrop and enables you to scroll up and down the page to view the various elements of that image from different perspectives. Divide the whole page into three to four separate pieces and see how it works for you. Create a parallax effect by using three or four background pictures, aligning the text for separate parts, adjusting margins and padding, and using background-position and other CSS elements and attributes.
Source Code: Parallax Website
Working knowledge of HTML5 and CSS3 is required to construct a personal portfolio page on your website. Your web page will include the normal information found in a job portfolio, such as your name and picture, projects, special talents, and hobbies. You will complete this project to get credit for it. Additionally, you may include your CV and store the whole portfolio on GitHub using your GitHub account. GitHub accounts are free to use. You may provide a brief description of your professional career and hobbies at the top of the page, along with your picture, in the header section. You might provide a few examples of your work below this description. Finally, you may provide links to your social network profiles in the footer area.
Source Code: Portfolio Website
To create a successful restaurant website, you must pay close attention to the use of attractive layouts, clean font styles, and an eye-catching color palette. Adding a picture gallery with rotating photographs of various food products to your website will make it even more appealing to visitors. You may also include relevant links on your website to assist your viewers in navigating across the site more effectively.
Source Code: Restaurant Website
If you are a music enthusiast, you may create a website dedicated to your passion. A music shop website is an excellent place for music enthusiasts to try out new ideas. However, to construct this page, you must be familiar with the intricacies of HTML5 and CSS3. It is necessary to add an acceptable background picture to the music page and a brief explanation of what you will discover on this page before proceeding with the rest of the process. The top area of the website will have many menus that will list songs depending on various characteristics such as genre, year, performer, album, and so forth.
Source Code: Music Store Website
The concept is to design a responsive one-page photography website. To create this photographic website, you will need to work with HTML5 and CSS3 once again, as you did before. You must pay attention to the margins, padding, color combinations, font-size, font-style, picture size, and button styling while designing a button.
At this level, the projects will put practically all of the talents you’ve acquired over your career to the test. When compared to amateurs, HTML professionals often have an easier time generating knowledge, but there is still a lot to learn. These tasks are more complicated and require a longer period to accomplish. As a result, you will spend most of your time working on projects requiring full-stack software development and deployment after getting comfortable with the typical web development environment.
In terms of functionality, you will create an electronic program that functions just like a messaging app, such as Whatsapp. While you may personalize it to your liking, you should include text-based communication technology and data administration foundations.
The project story revolves around creating a website that performs in the same way as the original BBC News website. It would be best to take screenshots of the website’s interface, parts and features, and interactive components. There’s even an opportunity for you to express your individuality via the use of color.
The Youtube clone project is largely used to assess participants’ HTML, CSS, and Responsive design abilities. Users should establish channels and post videos, and these functionalities should be available. In addition, be sure to have text sections that allow for comments, as well as a search engine, on your website.
In this project, you will create an visually identical interface to the original while also including interactive components. In addition, you will need to include a search engine with the required criteria. Finally, a separate organization division should oversee the different payment plans and payment choices.
This project makes use of fundamental frameworks. You should include a search engine with filters in the clone and a marketing ambiance that matches the original. Make sure you include a secure payment area that keeps consumers’ credit card and bank account information safe. Aesthetics are just as important as functionality for a business structure.
The learning doesn’t stop there. We reviewed some simple HTML project ideas that you may try out in this post, but the learning doesn’t stop there. The possibilities are endless: you may work on various other interactive projects and add complexity to them, merge any of these projects into a single project, and experiment with various tags. Building responsive real-world websites with HTML5 and CSS3 is a wonderful course to supplement your HTML knowledge and abilities.
Q1: Why do we use HTML in projects?
Ans: HTML has been utilized in front-end development for so many years that there are no alternative web development languages available on the market. However, HTML gives the Developer all the tags necessary to include anything on the website, such as a table, picture, or hyperlink, etc.
Q2: Where can I make HTML projects?
Ans: Create your first web page using Notepad or TextEditor like Sublime, atom etc by following the instructions below.
Step 1: Open Notepad (PC) on Windows 8 or
Open TextEdit in the first step (Mac). Next, open the Finder and go to Applications > TextEdit.
Step 2: Compose a Small Amount of HTML.
Step 3: Save the HTML Page
Step 4: Open Your Browser and View the HTML Page.
Q3: Where can I run HTML code?
Ans: The extension “. HTML” is used to store any file containing HTML code. All current browsers – including Google Chrome, Safari, and Mozilla Firefox – recognize and can read HTML files, so all you need to do is open one in your preferred Web browser.
- Best HTML IDE
- HTML5 Features
- Top Features of HTML
- Difference Between HTML and CSS
- Difference Between HTML and XHTML
- Difference Between HTML and XML
- Difference Between HTML and HTML5
- HTML Projects
15+ exciting c projects ideas with source code, top 20 iot projects with source code .
This site was designed for modern browsers and tested with Internet Explorer version 10 and later.
It may not look or work correctly on your browser.
- HTML & CSS
30 HTML Best Practices for Beginners
This tutorial is specifically for those who are just diving into web development. If you have one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker!
1. Always Close Your Tags
Back in the day, it wasn't uncommon to see things like this:
Notice how the wrapping UL/OL tag was omitted. Additionally, many chose to leave off the closing LI tags as well. By today's standards, this is simply bad practice and should be 100% avoided. Always, always close your tags. Otherwise, you'll encounter validation and glitch issues at every turn.
2. Declare the DOCTYPE
Declaring a DOCTYPE was a cumbersome process in the past. However, HTML5 has made things a lot simpler. Now, you can just add the following line at the top of your webpage to let browsers know that it should be interpreted as HTML5.
Some old websites that have not been updated in quite some time might still be using older standards to declare DOCTYPE. Don't be confused by all that. Using the above line is the correct way to do it in HTML5. Just remember that it has to go before everything, even the <html> tag.
3. Never Use Inline Styles
When you're hard at work on your markup, sometimes it can be tempting to take the easy route and sneak in a bit of styling.
Sure, it looks harmless enough. However, this points to an error in your coding practices.
When creating your markup, don't even think about the styling yet. You only begin adding styles once the page has been completely coded.
It's like crossing the streams in Ghostbusters. It's just not a good idea. -Chris Coyier (in reference to something completely unrelated.)
Instead, finish your markup, and then reference that P tag from your external stylesheet.
4. Place All External CSS Files Within the Head Tag
Technically, you can place stylesheets anywhere you like. However, the HTML specification recommends that they be placed within the document HEAD tag. The primary benefit is that your pages will seemingly load faster.
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively. - ySlow Team
Remember—the primary goal is to make the page load as quickly as possible for the user. When loading a script, the browser can't continue until the entire file has been loaded. Thus, the user will have to wait longer before noticing any progress.
If you have JS files whose only purpose is to add functionality—for example, after a button is clicked—go ahead and place those files at the bottom, just before the closing body tag. This is absolutely a best practice.
Another common practice years ago was to place JS commands directly within tags. This was very common with simple image galleries. Essentially, an onclick attribute was appended to the tag. The value would then be equal to some JS procedure. Needless to say, you should never, ever do this. Instead, transfer this code to an external JS file and use addEventListener or attachEvent to "listen" for your desired event. Or, if using a framework like jQuery , just use the click() method.
7. Validate Continuously
I once blogged about how the idea of validation has been completely misconstrued by those who don't completely understand its purpose. As I mentioned in the article, "validation should work for you, not against."
However, especially when first getting started, I highly recommend that you download the Web Developer Toolbar and use the "Validate HTML" and "Validate CSS" options continuously. While CSS is a somewhat easy language to learn, it can also make you tear your hair out. As you'll find, many times, it's your shabby markup that's causing that strange whitespace issue on the page. Validate, validate, validate.
8. Use Browser Developer Tools
I can't recommend this one enough. Using developer tools that come with all major browsers will help you resolve all kinds of layout problems and save a lot of time. Take a couple of hours and scour the web for every worthy tutorial you can find on the subject. The knowledge you gain will be well worth the time you invest.
9. Keep Your Tag Names Lowercase
Technically, you can get away with capitalizing your tag names.
Having said that, please don't. It serves no purpose and hurts my eyes—not to mention the fact that it reminds me of Microsoft Word's HTML function!
10. Use H1 through H6 Tags
Admittedly, this is something I tend to slack on. It's best practice to use all six of these tags. If I'm honest, I usually only implement the top four; but I'm working on it! For semantic and SEO reasons, force yourself to replace that P tag with an H6 when appropriate.
11. If Building a Blog, Save the H1 for the Article Title
Just this morning, on Twitter , I asked our followers whether they felt it was smartest to place the H1 tag as the logo or to instead use it as the article's title. Around 80% of the returned tweets were in favor of the latter method.
As with anything, determine what's best for your own website. However, if building a blog, I'd recommend that you save your H1 tags for your article title. For SEO purposes, this is a better practice—in my opinion.
12. Download ySlow
Especially in the last few years, the Yahoo team has been doing some really great work in our field. They released an extension for all major browsers like Chrome, Firefox, Safari and Opera etc. called ySlow . When activated, it will analyze the given website and return a "report card" of sorts which details the areas where your site needs improvement. It can be a bit harsh, but it's all for the greater good. I highly recommend it.
13. Start Using New HTML5 Tags
In the old days, different sections of a page were all wrapped inside div tags. This is because there was no way to provide a more semantic structure to our page. This is no longer true. HTML5 comes with a lot of new tags that we can use to provide structure to the content on our webpage. This includes tags like nav , section , article , aside , etc.
Read about them and start using them in your new projects.
14. Wrap Navigation With an Unordered List
Every website has a navigation section of some sort. While you can definitely get away with formatting it like so:
I'd encourage you not to use this method, for semantic reasons. Your job is to write the best possible code that you're capable of.
Why would we style a list of navigation links with anything other than an unordered LIST?
The ul tag is meant to contain a list of items. We also get rid of the wrapper div and replace it with the nav tag.
15. Check Browser Support for Modern Features
New features are added to the HTML and CSS spec all the time. Some of these features might not be available in all browsers. Therefore, it makes sense to figure out what browsers are used by your target audience and then plan accordingly.
You might be able to provide polyfills for browsers which don't support a feature or warn users they are using an incompatible browser if that feature is necessary for the functioning of the website. In any case, knowing which features are commonly available across browsers can be helpful. The Can I Use website is a great resource for that kind of thing.
16. Choose a Great Code Editor
There are a lot of great code editors available for you to use now, from something basic and lightweight like Notepad++ to full-fledged IDEs. My personal favorite among them all is Visual Studio Code . It is free, built upon open source, and comes with lots of extensions to help you write better code fast.
There are a lot of other code editors available as well, like Atom, Brackets, and Vim. Just pick one that you like best and start coding.
17. Once the Website Is Complete, Compress!
- JS Compressor
CSS Compression Services
- CSS Optimiser
- CSS Compressor
18. Cut, Cut, Cut
Looking back on my first website, I must have had a severe case of divitis. Your natural instinct is to safely wrap each paragraph with a div, and then wrap it with one more div for good measure. As you'll quickly learn, this is highly inefficient.
Once you've completed your markup, go over it two more times and find ways to reduce the number of elements on the page. Does that UL really need its own wrapping div? I think not.
Just as the key to writing is to "cut, cut, cut," the same holds true for your markup.
19. All Images Require "Alt" Attributes
It's easy to ignore the necessity for alt attributes within image tags. Nevertheless, it's very important, for accessibility and validation reasons, that you take an extra moment to fill these sections in.
20. Stay Up Late
I highly doubt that I'm the only one who, at one point while learning, looked up and realized that I was in a pitch-dark room well into the early, early morning. If you've found yourself in a similar situation, rest assured that you've chosen the right field.
21. View Source
What better way to learn HTML than to copy your heroes? Initially, we're all copiers! Then slowly, you begin to develop your own styles/methods. So visit the websites of those you respect. How did they code this and that section? Learn and copy from them. We all did it, and you should too. (Don't steal the design; just learn from the coding style.)
22. Style ALL Elements
This best practice is especially true when designing for clients. Just because you haven't used a blockquote doesn't mean that the client won't. Never use ordered lists? That doesn't mean they won't! Do yourself a service and create a special page specifically to show off the styling of every element: UL, OL, P, H1–H6, blockquotes, etc.
23. Use Twitter
24. Learn Photoshop
Photoshop is open pretty much 24/7 on my computer.
In fact, Photoshop may very well become the most important tool you have. Once you've learned HTML and CSS, I would personally recommend that you then learn as many Photoshop techniques as possible.
25. Learn Each HTML Tag
There are literally dozens of HTML tags that you won't come across every day. Nevertheless, that doesn't mean you shouldn't learn them! Are you familiar with the "abbr" tag? What about "cite"? These two alone deserve a spot in your tool-chest. Learn all of them!
By the way, in case you're unfamiliar with the two listed above:
- abbr does pretty much what you'd expect. It refers to an abbreviation. "Blvd" could be wrapped in a <abbr> tag because it's an abbreviation for "boulevard".
- cite is used to reference the title of some work. For example, if you reference this article on your own blog, you could put "30 HTML Best Practices for Beginners" within a <cite> tag. Note that it shouldn't be used to reference the author of a quote. This is a common misconception.
26. Participate in the Community
Just as sites like ours contribute greatly to furthering a web developer's knowledge, you should too! Finally figured out how to float your elements correctly? Make a blog post to teach others how. There will always be those with less experience than you. Not only will you be contributing to the community, but you'll also teach yourself. Ever notice how you don't truly understand something until you're forced to teach it?
27. Use a CSS Reset
This is another area that's been debated to death. CSS resets: to use or not to use; that is the question. If I were to offer my own personal advice, I'd 100% recommend that you create your own reset file. Begin by downloading a popular one, like Eric Meyer's , and then slowly, as you learn more, begin to modify it into your own.
If you don't do this, you won't truly understand why your list items are receiving that extra bit of padding when you didn't specify it anywhere in your CSS file. Save yourself the anger and reset everything! This one should get you started.
28. Line 'em Up!
Generally speaking, you should strive to line up your elements as best as possible. Take a look at your favorite designs. Did you notice how each heading, icon, paragraph, and logo lines up with something else on the page? Not doing this is one of the biggest signs of a beginner. Think of it this way: If I ask why you placed an element in that spot, you should be able to give me an exact reason.
29. Slice a PSD
Okay, so you've gained a solid grasp of HTML, CSS, and Photoshop. The next step is to convert your first PSD into a working website. Don't worry; it's not as tough as you might think. I can't think of a better way to put your skills to the test. If you need assistance, review these in-depth video tutorials that show you exactly how to get the job done.
- Slice and Dice that PSD
- From PSD to HTML/CSS
30. Don't Use a Framework... Yet
CSS frameworks are for experienced developers who want to save themselves a bit of time. They're not for beginners.
- Curated Design Assets
- Best Cool Fonts
- InDesign Magazine Templates
- Photoshop Actions
- InDesign Newsletter Templates
- InDesign Templates
- Curated Web Design Assets
- Responsive WordPress Themes
- WordPress Themes for Consultants
- Wireframe Templates
- Best Shopify Themes
- Masonry WordPress Themes
- Web Themes & Templates
- HTML Templates
- Shopify Themes
- Bootstrap Themes
- Free WordPress Themes
- After Effects Templates
- Apple Motion Templates
- Video Effects
- Lower Thirds
- Stock Footage
- Video Maker
- Design Templates
- Free Templates
- Curated Video Assets
- After Effects Slideshow Templates
- Premiere Pro Video Intro Templates
- Final Cut Pro Templates
- Final Cut Pro Title Templates
- Premiere Pro Video Effects
- Curated Presentation Assets
- Keynote Pitch Deck Templates
- Google Slides Business Templates
- PowerPoint Pitch Deck Templates
- Best Shopify Mobile Themes
- Best Presentation Templates
- Image Resizer
- Video Cropper
- Video To Gif Converter
- WordPress Themes
- Stock Images
- Website Templates
- Photoshop Tutorials
- How to Draw
- How to Use WordPress
- How to Use PowerPoint
- Data Science | All Courses
- Master of Science in Data Science – IIIT Bangalore
- Executive PG Programme in Data Science from IIIT Bangalore
- Professional Certificate Program in Data Science for Business Decision Making
- Master of Science in Data Science – UOA
- Advanced Certificate Programme in Data Science from IIITB
- Caltech CTME Data Analytics Certificate Program
- Advanced Programme in Data Science from IIIT Bangalore
- Professional Certificate Program in Data Science and Business Analytics
- Python Programming Bootcamp from upGrad
- Master of Science in Project Management – Golden Gate Univerity
- Project Management For Senior Professionals – XLRI Jamshedpur
- Software Engineering | All Courses
- Full Stack Development Bootcamp from upGrad
- Cybersecurity Certificate Program Caltech
- Blockchain Certification PGD – IIIT Bangalore
- Cyber Security Program – IIIT Bangalore
- Advanced Certificate Programme in Blockchain – IIIT Bangalore
- Full Stack Development Program – PURDUE
- Big Data Programme – IIIT Bangalore
- Cloud Backend Development Program – PURDUE
- Blockchain Certificate Program – PURDUE
- Cybersecurity Certificate Program – PURDUE
- Java Programming – upGrad
- Msc in Computer Science – Liverpool John Moores University
- Msc in Computer Science (CyberSecurity) – Liverpool John Moores University
- Full Stack Developer Course – IIIT Bangalore
- Executive PGP in Software Development (DevOps) – IIIT Bangalore
- Executive PGP in Software Development (Cloud Backend Development) – IIIT Bangalore
- Advanced Certificate Programme in DevOps – IIIT Bangalore
- Advanced Certificate Programme in Cloud Backend Development – IIIT Bangalore
- Machine Learning | All Courses
- Master of Science in Machine Learning & AI – Liverpool John Moores University
- Executive Post Graduate Programme in Machine Learning & AI – IIIT Bangalore
- Advanced Certification in Machine Learning and Cloud – IIT Madras
- Msc in ML & AI – Liverpool John Moores University
- Advanced Certificate Programme in Machine Learning & NLP – IIIT Bangalore
- Advanced Certificate Programme in Machine Learning & Deep Learning – IIIT Bangalore
- Advanced Certificate Program in AI for Managers – IIT Roorkee
- Data Science and Business Analytics – Maryland, US
- Executive PG Programme in Business Analytics – EPGP LIBA
- Executive Post-Graduate Programme in Business Analytics
- Business Analytics Certification Programme from upGrad
- Global Master Certificate in Business Analytics – Michigan State University
- MA in Journalism & Mass Communication – CU
- BA in Journalism & Mass Communication – CU
- Marketing | All Courses
- Brand and Communication Management – MICA
- Executive Development Program In Digital Marketing – XLRI
- Advanced Certificate in Digital Marketing and Communication – MICA
- Performance Marketing Bootcamp – Google Ads
- LL.M. in Corporate & Financial Law – Jindal Law School
- LL.M. in Intellectual Property & Technology Law – Jindal Law School
- LL.M. in Dispute Resolution from Jindal Law School
- Executive PGP Healthcare Management – LIBA
- Management Programme with PGP – IMT Ghaziabad
- PG Certification in Software Engineering from upGrad
- DBA – SSBM, Geneva
- DBA – Golden Gate Univerity
- Master of Business Administration (90 ECTS) | MBA
- Master of Business Administration (60 ECTS) | Master of Business Administration (60 ECTS)
- Computer Science | Master’s Degree
- MS in Data Analytics | MS in Data Analytics
- Project Management | MS
- Information Technology | MS
- International Management | Master’s Degree
- Advanced Credit Course for Master in International Management (120 ECTS)
- Advanced Credit Course for Master in Computer Science (120 ECTS)
- Bachelor of Business Administration (180 ECTS)
- B.Sc. Computer Science (180 ECTS)
- Masters Degree in Data Analytics and Visualization
- Masters Degree in Artificial Intelligence
- Masters Degree in Cybersecurity
- MBS in Entrepreneurship and Marketing
- MSc in Data Analytics
- Master of Business Administration (MBA)
- MBA – Information Technology Concentration
- MS in Data Analytics
- MS in Cybersecurity
- MS in Computer Science
- MS in Artificial Intelligence | MS in Artificial Intelligence
- MS in Analytics
- Master of Business Administration
- Master of Science in Accountancy
- Master of Science in Business Analytics
- Master of Science in Project Management
- MS in Data Science
- MS in Information Technology
- MS in Applied Data Science
- Master of Business Administration – IMT & LBS
- Executive MBA SSBM
- Global Doctor of Business Administration
- Global MBA from Deakin Business School
- PGP in Data Science and Business Analytics Program from Maryland
- M.Sc in Data Science – University of Arizona
- M.Sc in Data Science – LJMU & IIIT Bangalore
- Executive PGP in Data Science – IIIT Bangalore
- Learn Python Programming – Coding Bootcamp Online
- ACP in Data Science – IIIT Bangalore
- PCP in Data Science – IIM Kozhikode
- Advanced Program in Data Science Certification Training from IIIT-B
- M.Sc in Machine Learning & AI – LJMU & IIITB
- Certificate in ML and Cloud – IIT Madras
- Executive PGP in Machine Learning & AI – IIITB
- ACP in ML & Deep Learning – IIIT Bangalore
- ACP in Machine Learning & NLP – IIIT Bangalore
- M.Sc in Machine Learning & AI – LJMU & IIT M
- PMP Certification Training | PMP Online Course
- CSM Course | Scrum Master Certification Training
- PCP in HRM and Analytics – IIM Kozhikode
- Product Management Certification – Duke CE
- PGP in Management – IMT Ghaziabad
- ACP in Customer Centricity
- Digital Marketing & Communication – MICA
- M.Sc in CS – LJMU & IIIT Bangalore
- Executive PGP in Software Development
- Full Stack Development Certificate Program from Purdue University
- Blockchain Certification Program from Purdue University
- Cloud Native Backend Development Program from Purdue University
- Cybersecurity Certificate Program from Purdue University
- Business Analytics Certification Program
- Artificial Intelligences US
- Blockchain Technology US
- Business Analytics US
- Data Science US
- Digital Marketing US
- Management US
- Product Management US
- Software Development US
- Executive Programme in Data Science – IIITB
- Master Degree in Data Science – IIITB & IU Germany
- ACP in Cloud Computing
- ACP in DevOp
- ACP in Cyber Security
- ACP in Big Data
- ACP in Blockchain Technology
- Master in Cyber Security – IIITB & IU Germany
10 Interesting HTML Project Ideas & Topics For Beginners 
Software Engineering Manager @ upGrad. Passionate about building large scale web apps with delightful experiences. In pursuit of transforming engineers into leaders.
Table of Contents
In this article, you will learn 10 Interesting HTML Project Ideas & Topics . Take a glimpse below.
- A tribute page
- A survey form
- Technical documentation page
- Landing page
- Parallax website
- Personal portfolio page
- Restaurant website
- Music store page
- Photography website
Read the full article to know more in detail about all the 10 HTML Project Ideas & Topics.
HTML is a powerful coding tool for Web development . It is used along with CSS to design and build websites. So, it goes without saying that if you wish to make it big in the domain of Web development, you must get your base right – learn HTML. Thankfully, HTML has one of the simplest learning curves, and you don’t even need any prior programming experience to learn HTML!
Although it may seem daunting in the beginning, remember to progress by taking baby steps. The best way to learn a new language or a new skill is to practice as you learn. This holds particularly true for programming. Thus, it is an excellent idea to build HTML projects to strengthen your professional portfolio.
Whether aiming to study further, build your IT skills or apply for a job, working on a mini project in HTML and CSS enhances your development skills. Recruiters often opt for candidates with practical experience on specific projects to check their development skills and practical knowledge.
- Applying theoretical skills to practical applications through a mini project in HTML and CSS.
- Practice high-level code logic to understand how minor changes can impact a coding project.
- Implementing several techniques to speed up work and make the project more efficient.
- Understanding the structural base of popular websites and recreating them.
- The transition from beginner to advanced level through consistent coding practices.
You can also check out our free courses offered by upGrad under IT technology.
Learn to build applications like Swiggy, Quora, IMDB and more
Working on your own HTML projects will help you test your practical knowledge in real-world scenario, sharpen your coding skills, and, most importantly, be a solid boost for your resume. However, as a beginner, it may be challenging for you to find the right fit of HTML project ideas that match your skill and knowledge levels. Hence, we’ve created a list of some of the best HTML project ideas to give you the push to get started with HTML projects!
Learn Job Guaranteed Full Stack Development Bootcamp from upGrad
10 HTML Project Ideas For Beginners
1. a tribute page.
This is one of the most simple HTML projects you can make. As you can guess by the name, a tribute page shows respect for someone who inspires you, or someone you admire and revere. To make a tribute page, you only need to know fundamental HTML concepts.
First, you have to create a webpage. You can then add a picture of the person you are paying tribute to and add the person’s details, achievements, and so on. If you wish, you can also write a few words of respect for him/her. Using CSS for this project will be beneficial as it will let you include different styles and layouts. Make sure to give the webpage an appealing background color (use earthy tones or pastel colors).
Get Advanced Certification in DevOps from IIIT Bangalore .
2. A survey form
Websites often include forms as a part of their customer data collection strategy. A well-made survey form can help you acquire relevant information about your target audiences like their demographic age, job, location, taste and preference, and pain points. This HTML project is a great way to test your skills and knowledge of designing forms and structuring a webpage.
Building a survey form is no rocket science. You need to acquaint yourself with the basic tags/input fields in HTML required to design forms. Then you can use the tags to create a text field, checkbox, radio button, date, and other vital elements contained in a form. Again, you can always use CSS to impart a better look and feel to your form and webpage.
Learn Software Engineering Courses online from the World’s top Universities. Earn Executive PG Programs, Advanced Certificate Programs, or Masters Programs to fast-track your career.
3. Technical documentation page
Explore Our Software Development Free Courses
Learn: 21 Web Development Project Ideas
4. Landing page
This project requires a strong knowledge of HTML and CSS. Since a landing page includes numerous vital elements, you will have to combine your HTML knowledge with your creative skills.
For the landing page, you will have to create columns and margins, align the items in the columns, boxes, add footer and header, create separate sections for content/site elements, and edit images (crop and resize). Apart from this, you will have to choose the right colors for the page. The color combinations should be such that they complement each other – each section can have a different color. When you use CSS for styling and layout, make sure that the page elements do not clash anywhere.
Also, Check out online degree programs at upGrad.
Explore our Popular Software Engineering Courses
5. event page.
This is another easy project that you can experiment with! It will involve creating a static page displaying the details of an event (conference, webinar, product launch, etc.). You will need both HTML and CSS for this project.
The layout of the event page will be simple. The header section will contain the names and images of the different speakers with links, the event venue, and the schedule. You must also include a section that describes the purpose of the event – what the event is for and which category of audience it aims to target. Section the page into smaller chunks to make it look neat. Choose the right font style, font color, and background color for individual sections on the page. Also, make sure to add a registration button so that interested people can register for the event.
In-Demand Software Development Skills
6. parallax website.
A beginner who’s well-versed in HTML concepts can build a parallax website in a day! Essentially, a parallax website is one that has a fixed image in the background and allows you to scroll up and down the page to see the different parts of that image. It gives a beautiful and unique effect on a website.
To build a parallax site, first section the page into three to four parts. Choose a few background images, align them on the page in the different sections along with the appropriate text, set the margin and padding, and integrate a background-position. You can use CSS to include other stylish elements in the page.
upGrad’s Exclusive Software and Tech Webinar for you –
SAAS Business – What is So Different?
7. Personal portfolio page
To create a personal portfolio page, you need to be proficient in HTML5 and CSS3. In this project, you will create a web page containing the standard information for a work portfolio, including your name and image, projects, niche skills, and interests. If you want, you can also add your CV and host the complete portfolio on GitHub via your GitHub account.
The portfolio page should have a header and footer section. The header section will include a menu highlighting your personal information, contact information, and work. You can place your photo at the top part of the page and include a short description of your professional career and interests. Below this description, you can add a few work samples. The footer section can contain your social media handles.
Read: 8 Exciting Full Stack Project Ideas & Topics
8. Restaurant website
This project will give you ample opportunity to showcase your creative skills. As you can guess, a restaurant website has to be elaborate and detailed, including several functionalities.
First, you have to design a captivating webpage layout wherein you will have to add different elements. This will include a list of food items, one-line descriptions for food items, prices, attractive images of different dishes, social media buttons, contact information, online reservation option, and other necessary details. Using CSS, you can align the various food items/beverages and their respective prices within a grid.
When creating a restaurant website, you have to focus on using stylish layouts, neat font styles, and an eye-catching combination of colors. If you wish to make the website even fancier, you can include a photo gallery with sliding images of different food items. You can also add relevant links on the website to help the audience navigate better through the site.
9. Music store page
A music store page is a perfect experiment for music lovers. To build this page, you must know the nitty-gritty of HTML5 and CSS3.
On the music page, the first thing to do is to add an appropriate background image and write a short description of what you will find on this page. The header section of the page will contain different menus that list songs based on features like genre, year, singer, album, and so on.
You will have to include necessary buttons such as start, stop, rewind/forward, etc. Add relevant links and images for the collection of songs available. At the footer, you can include contact details, and links for registration, in-store purchases, subscription packages, and trial options.
10. Photography website
This is the last project on our list. Again, you will need to work with HTML5 and CSS3 to develop this photography website. The idea is to create a one-page responsive photography site.
On the top of the landing page, add the brand name and logo along with a snappy description for the site. You can create a gallery with a view button so users can go to the images section and slide to view the following images. You can keep different viewing layouts like a grid, list, etc. Add the margin and padding for the page and choose your desired color combination, font style, and image size. For responsiveness quotient, you can use flexbox and media queries.
Read our Popular Articles related to Software Development
How to know which project suits you the best.
While these projects are all meant to improve your HTML skills, you must acquire skills relevant to your goals. Working on every available HTML project is impossible, and not every project is required to boost your portfolio, so how should one opt for HTML and CSS projects?
There are three essential factors beginners can keep in mind to choosing their HTML and CSS projects for practicing. These include:
- Goal: Think about what you aim to achieve with the compilation of these projects. These projects are not just for practicing but adding value to your resume, so opt for projects that can strengthen your work portfolio. The HTML CSS projects must align with your long-term goals and serve chances to bag exciting work opportunities. Assess your area of specialization and choose projects that can add value to your web development journey.
- Skill level: Not all projects are meant to match your skill level. HTML and CSS projects beyond your skill and experience levels aren’t your match, while the ones below your skill level can offer you no improvement. So, analyzing your skillset and opting for projects that align well with your skills while allowing you to upskill is your best bet.
- Interest: There’s no dearth of HTML CSS projects. Opt for the projects that interest you. Projects of your interest motivate you to accomplish and improve the specific skills and often lead you to perform above and beyond. So, while searching for projects, go through the requirement specifications and goals of each project, and pick one that matches your upskilling interests.
You can find these HTML projects for students PDF and practice them to strengthen your resume.
With that, we’ve come to the end of our list of HTML project ideas. These ten HTML projects are not only useful, but they are also not time-consuming. Once you get your base right, you can start experimenting with these real-world projects and test your skills!
If you’re interested to learn more about full-stack software development, check out upGrad & IIIT-B’s Executive PG Program in Full-stack Software Development which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects, and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.
What is HTML used for?
HTML stands for Hyper Text Markup Language. It is the main language for building websites. HTML is a simple structure for describing webpages. It offers tags that describes webpages like Heading, Paragraph, Lists, Tables and many others. One line of HTML code could define a whole webpage. Most websites are built with HTML and we use it without ever knowing. We mostly use HTML coded websites like Facebook and Twitter. It is a markup language used to define the structure of the content of a web page. The main source of information on HTML is the HTML 4.01 specification published by the W3C.
What is Document Object Model?
What is CSS?
CSS stands for Cascading Style Sheets. CSS is used to design websites. It is a programming language that talks about how elements will look and behave. CSS is used to format HTML documents as well. CSS can be defined as a visual design language. In simple terms, CSS can be used to style elements on a webpage. CSS is developed by W3C and is used by web browsers in rendering different aspects of web pages like fonts, colors, layout and spacing.
Refer to your Network!
If you know someone, who would benefit from our specially curated programs? Kindly fill in this form to register their interest. We would assist them to upskill with the right program, and get them a highest possible pre-applied fee-waiver up to ₹ 70,000/-
You earn referral incentives worth up to ₹80,000 for each friend that signs up for a paid programme! Read more about our referral incentives here .
Prepare for a Career of the Future
Leave a comment, cancel reply.
Your email address will not be published. Required fields are marked *
Our Trending Software Engineering Courses
- Master of Science in Computer Science from LJMU
- Executive PG Program in Software Development Specialisation in Full Stack Development from IIIT-B
- Advanced Certificate Programme in Cyber Security from IIITB
- Full Stack Software Development Bootcamp
- Software Engineering Bootcamp from upGrad
Our Popular Software Engineering Courses
Get Free Consultation
Popular software development skills.
- React Courses
- Core Java Courses
- Data Structures Courses
- ReactJS Courses
- NodeJS Courses
- Blockchain Courses
- SQL Courses
- Full Stack Development Courses
- Big Data Courses
- Devops Courses
- NFT Courses
- Cyber Security Courses
- Cloud Computing Courses
- Database Design Courses
- Crypto Courses
- Python Courses
Length Of String In Java
PYTHON VS PHP: A Detailed Comparision
Top Selenium Java Interview Questions & Answers [For Freshers & Experienced]
Start Your Upskilling Journey Now
Get a free & personalised counselling session.
Schedule 1:1 free counselling
Talk to a career expert
Explore Free Courses
Data Science & Machine Learning
Build your foundation in one of the hottest industry of the 21st century
Build essential technical skills to move forward in your career in these evolving times
Get insights from industry leaders and career counselors and learn how to stay ahead in your career
Master industry-relevant skills that are required to become a leader and drive organizational success
Advance your career in the field of marketing with Industry relevant free courses
Kickstart your career in law by building a solid foundation with these relevant free courses.
Register for a demo course, talk to our counselor to find a best course suitable to your career growth.
Sep 10, 2018
7 Projects to practice HTML & CSS skills for beginners
Its always exciting the first time you try learning a new skill. Especially coding.
However, if you have no practice, you forget most of what you learn. Therefore, at some point you realize that you need to practice what you have learnt. Otherwise you’ll forget all of it.
That’s where projects come in. Projects are a good way to practice what you have learnt. And trust me you want to work on some projects. You can use the projects to showcase what you have worked on.
As a newbie, choosing projects that match your current knowledge level can be daunting. You might choose a project. Then the project becomes too big to be accomplished with your currently know-how. At least, that’s what I have gone through on this learning journey.
I have curated some projects that I have found that are appropriate even if your knowledge is limited to HTML and CSS only . These projects are available in popular learning websites where you will find additional information on what you will be tackling.
7 Projects to try out even if you just know HTML and CSS
1. A tribute page
Write a tribute of someone you admire and publish as a web page. This project will involve working with adding image, links, lists and paragraphs. This project will require knowledge of HTML to create. However, you can use a bit of CSS to make the project look better.
2. A survey form
Forms are useful in collecting data online. This project will mainly be testing your skills on all kinds of inputs. This will test your knowledge of forms and structuring your webpage. The form is not required to send any data.
Its a build up from the tribute page. This project will require knowledge of html/html5 to create.
3. Build a Product Landing Page
This will test your knowledge of both HTML and CSS. You will be required to practice creating columns and aligning items within the columns. You will also need to do basic editing of images e.g. cropping and resizing to make perfect images for your web page. You will need solid knowledge of HTML/CSS. 4. Build a Technical Documentation Page
I am currently attempting this project and I will post the final project once its done.
5. Build a Personal Portfolio Webpage
You will be practicing all the skills you have learnt in HTML and CSS. You will also need to know how to crop and resize images. If you don’t have options use Gimp. Its free, open source and available on Windows and Linux .
If you are in a hurry to make a portfolio, you can read Brian’s article on making an online portfolio using a ready made theme/template .
6. Google.com page
Yes, you have seen it many times. But can you replicate it. The simple google.com page with icons, google’s logo, a text box and two buttons. You can make a look-alike of google.com page. In this project you are making it look like google.com not function like google.com.
You need to know both HTML and CSS.
7. google.com Search result page
You will create a page with the format of a google search result. Your page should have the normal 10 results and the navigation to next pages at the bottom.
This is an upgrade from the basic google.com page above. However, you should be able to reuse some of the code on this project.
Also,make the page should look somewhat but the functionality should not be a concern right now.
If you are looking to learn the basics of HTML, you can checkout my short introductory lesson in HTML.
Did you make a basic project while you were learning HTML and CSS? If you did share them below and help other learners find ‘simple’ but challenging ideas to try out.
More from Avic Ndugu
Web developer and Tech enthusiast. I also enjoy reading & writing informative articles. Contributor of Tunapanda.org medium publication.
About Help Terms Privacy
Get the Medium app
Text to speech
- Skip to main content
- Skip to search
- Skip to select language
- Get MDN Plus
- English (US)
- Overview: Getting started with the web
HTML ( H yper T ext M arkup L anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.
So what is HTML?
HTML is a markup language that defines the structure of your content. HTML consists of a series of elements , which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:
If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:
Anatomy of an HTML element
Let's explore this paragraph element a bit further.
The main parts of our element are as follows:
- The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets . This states where the element begins or starts to take effect — in this case where the paragraph begins.
- The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
- The content: This is the content of the element, which in this case, is just text.
- The element: The opening tag, the closing tag, and the content together comprise the element.
Elements can also have attributes that look like the following:
Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value . The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. Some attributes have no value, such as required .
Attributes that set a value always have:
- A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
- The attribute name followed by an equal sign.
- The attribute value wrapped by opening and closing quotation marks.
Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.
You can put elements inside other elements too — this is called nesting . If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a <strong> element, which means that the word is to be strongly emphasized:
You do however need to make sure that your elements are properly nested. In the example above, we opened the <p> element first, then the <strong> element; therefore, we have to close the <strong> element first, then the <p> element. The following is incorrect:
The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don't do it!
Some elements have no content and are called void elements . Take the <img> element that we already have in our HTML page:
This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.
Anatomy of an HTML document
That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our index.html example (which we first met in the Dealing with files article):
Here, we have the following:
- <!DOCTYPE html> — doctype . It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now.
- <html></html> — the <html> element. This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the lang attribute, setting the primary language of the document.
- <head></head> — the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
- <meta charset="utf-8"> — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
- <meta name="viewport" content="width=device-width"> — This viewport element ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.
- <title></title> — the <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
- <body></body> — the <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.
Let's turn our attention to the <img> element again:
As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.
We have also included an alt (alternative) attribute. In the alt attribute , you specify descriptive text for users who cannot see the image, possibly because of the following reasons:
- They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
- Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:
The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."
Try coming up with some better alt text for your image now.
Note: Find out more about accessibility in our accessibility learning module .
Marking up text
This section will cover some essential HTML elements you'll use for marking up the text.
Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1> - <h6> , although you'll commonly only use 3 to 4 at most:
Note: Anything in HTML between <!-- and --> is an HTML comment . The browser ignores comments as it renders the code. In other words, they are not visible on the page - just in the code. HTML comments are a way for you to write helpful notes about your code or logic.
Now try adding a suitable title to your HTML page just above your <img> element.
Note: You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO . Try to create a meaningful sequence of headings on your pages, without skipping levels.
As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:
Add your sample text (you should have it from What will your website look like? ) into one or a few paragraphs, placed directly below your <img> element.
A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:
- Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a <ul> element.
- Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.
Each item inside the lists is put inside an <li> (list item) element.
For example, if we wanted to turn the part of the following paragraph fragment into a list
We could modify the markup to this
Try adding an ordered or unordered list to your example page.
Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — <a> — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps:
- Choose some text. We chose the text "Mozilla Manifesto".
- Wrap the text in an <a> element, as shown below: < a > Mozilla Manifesto </ a >
- Give the <a> element an href attribute, as shown below: < a href = " " > Mozilla Manifesto </ a >
- Fill in the value of this attribute with the web address that you want the link to: < a href = " https://www.mozilla.org/en-US/about/manifesto/ " > Mozilla Manifesto </ a >
You might get unexpected results if you omit the https:// or http:// part, called the protocol , at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.
Note: href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for h ypertext ref erence .
Add a link to your page now, if you haven't already done so.
If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also view it here ):
If you get stuck, you can always compare your work with our finished example code on GitHub.
Here, we have only really scratched the surface of HTML. To find out more, go to our Learning HTML topic.
Tutorial 2: An Introduction To HTML
💬 “Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.” (Patrick McKenzie)
Welcome to day two of your web development beginner’s course. Today is the day of HTML! HTML is all about structuring the data. It doesn’t concern itself with how something looks; that’s what CSS is for, which we’ll study tomorrow.
What are we going to do today?
- Learn about HTML and basic HTML syntax
- Learn about the various HTML elements that we’ll use in this course
- Create the basic structure for our own webpage
Ready for another adventurous day of data, structure and magic? Let’s go!
We’ve already learned that HTML is a type of language that structures content; in other words, it labels different elements such as images and text in order to tell your browser how to display the content and in what order.
Yesterday, we wrote some HTML and worked with a few HTML elements, too—but we haven’t really understood them. Let’s change that in this lesson. We’ll look into what HTML is made up of—in other words, HTML elements—and then use them to add detail to our portfolio site.
We’ve already seen a few HTML elements. You can think of an HTML element as an individual piece of a webpage, like a block of text, an image, a header, and so on. Yesterday you used a heading element, h1 , which looked like this:
Every HTML element has HTML tags , and a tag (<h1> or </h1>) is surrounded by angled brackets like < and >. Tags define elements and tell the browser how to display them (for example, they can tell the browser whether an element is an image or a paragraph of text).
Most HTML elements have an opening tag and a closing tag that show where the element begins and ends. The closing tag is just the opening tag with a forward slash (/) before the element name. We can generalize the format of an HTML element as follows:
Here, content is something we add. It can be anything, like “Hello world” in our h1 example; ‘element name’, however, has to be one of the predefined tags like h1, h3, p or strong.
Let’s take a look at a few important things to know about HTML elements before we dive in and use them.
HTML elements can have certain attributes that modify their functionality and behavior. These attributes are written inside the opening tag. For example,
We have an image element with a “width” attribute with the value 300 and “height” attribute with value 200, which as you might guess, will make the image 300px wide and 200px tall. Let’s look at another example.
The very aptly named textarea element will display a text input field where our users can write text. In this example, rows and cols are attributes that define the number of rows and columns the textarea should span respectively.
Note that some elements don’t have any content in them, and hence they don’t have to have a closing tag. Images, for example, only need a “src” attribute (short for source, or the location to find the image).
Notice the /> at the end (instead of </img>). This is because image elements have a source attribute (src) which fetches the image to be displayed. There’s no content that needs to go inside. There are other elements, similar to img, that don’t require a closing tag.
HTML elements can be nested inside each other; in other words, one element can hold other elements. Take a look at the following block of code.
Notice how we have two strong elements in our paragraph element. That’s totally legal.
For ease of reading, we can format the previous block of code as follows:
HTML doesn’t care how much space or how many new lines you use. The previous two examples will display in the exact same way (but the latter is easier to read, so we prefer that).
Apart from these, there are a few basic rules that apply to all HTML pages. For example, The outermost HTML element needs to be <html> itself. Similarly, all ‘visible’ content goes into <body> while all configuration / metadata (data about the page itself) goes into <head>.
Remember our first webpage’s code from yesterday?
That was the reason <title> went into the <head>, and the browser picked it up and displayed it as the webpage’s title (while it wasn’t visible inside the page).
2. HTML elements
Now that we have a basic understanding of HTML elements, let’s look at some of the elements that we’ll be using in this course.
Headings are exactly as the name suggests. In HTML, there are six headings, ranging from h1 to h6. Heading 1, or h1, is the largest and most significant heading; it signals that this is the most important text on the page. The significance decreases gradually as we move towards h6.
The anchor element, a , enables the HyperText in HTML. It can link to another page on the same or a different website. Here’s how to create an anchor link to Google’s homepage:
This code will display as follows. Notice how hovering the mouse pointer on the link shows the anchor href value in the bottom left corner of the page. You must’ve clicked a couple of such anchor links to reach this very page!
The paragraph element, p , is used for text blocks. We usually style paragraphs such that they have a nice space between one another and between the first paragraph and its heading.
Lists are very useful for displaying data in an ordered or unordered list. For ordered lists (a list that uses numbers) we use <ol> and for unordered lists (a list with bullet points), we use <ul>. Within one of these elements, each list item is denoted by <li>. Here’s an example:
Here’s how our example ‘renders’ (which is just a fancy word meaning how it looks in our browser when we refresh the page).
Divisions and spans
Everything on a webpage can be imagined to be contained in a series of boxes. Our job as web developers is to arrange these boxes so that the whole page looks nice on all screens. These boxes contain text, images, and everything else that we see on webpages.
The names of these boxes are divisions (div) and spans (span) . Divs and spans don’t do anything on their own, but we add things to them, like text and images, and they let us position the text and images as we like.
A good analogy for divs and spans are bags. Bags like handbags or backpacks are not very useful by themselves. No one would carry an empty bag around. They become useful when we store stuff in them–they help us keep things organized. That’s how we like to think of divisions and spans. They’re containers for the actual functional elements on your webpage.
We’ll see how they work when we add them to our page below.
We fill in forms all the time on the internet. Forms and form elements allow us to accept user input. Whether it is for logging into our social media accounts or posting a tweet, anywhere you see a place to add text or click a button or toggle a checkbox, there’s an HTML form element in the background.
3. Your turn: Creating the basic page layout
Now we know enough HTML elements to start adding HTML to our portfolio page project! Before we get into writing code, let’s take a look at our wireframe. A wireframe is a low fidelity design that we use as a reference to code our website.
In the real world, your team may have dedicated designers who’ll come up with a design that is then handed over to you, the developer, for implementation (converting into actual code). In our case, we’ll use a hand drawn design as a starting point. The purpose it serves is similar: it gives us a broad outline for how our end result should look.
Looking at the mockup, we can roughly compartmentalize our page into sections.
- Profile picture
- Professional title
- What I like
- Links and contact form
It is generally helpful to think in terms of sections, because as you’ll see, each of these bullet points will become a box in itself, with the sub points getting nested inside the main points. Let’s take each of these points and tackle them separately.
The introduction section contains an image (profile picture), a heading (name), a subheading (professional title) and a line of text (quote). We can start with the introduction box and add each of the nested elements into it. Note that this code goes inside the body tag, that is, in between the opening and closing body tag (<body> and </body>).
Remember what we said about the div element? It’s just like a box that holds our content together. Inside the box, we have all the elements we mentioned above.
Notice the https://via.placeholder.com/150 in image source (<img src=)? That is a placeholder image that we use while we’re developing this website. We can replace it with our own image later once we’re happy with our design.
Let’s see how that looks in a browser.
Did you get that? That’s right. We have the first section of our website ready. You can see your code in the browser if you press Ctrl+F12 (in Windows or Linux) or Cmd+F12 in Mac OS.
This is the code that your browser interpreted. You can try clicking on each element (img, h1, etc) and see that the browser highlights them for you.
😎Pro tip: This window that popped up in our browser is called the developer tools menu and is used extensively in real world web development for checking code and debugging bugs. The best way to get used to this new tool is to play around with it.
Next, let’s look at the About section. It has two lists and a heading that goes with each list. Notice that this time we have two boxes (divs) nested within this one larger box. These are the left and the right box, each with its own heading (<h3>) and an unordered list (<ul>). Let’s write code for that just after the ending tag of the previous (Introduction) section </div> .
Let’s look at the result of that in our browser.
View code changes on GitHub >
Here’s a quick reminder: You can click the above Github link to see the exact change that was made. We recommend that you first try to write the code yourself and only look at the Github link if you’ve gotten stuck.
Great! Now let’s tackle the Portfolio section. This section will contain four of our chosen project screenshots. You’ll see in our wireframe that we’re planning to arrange them in a 2x2 grid. We’ll be able to do that with CSS later in the course. For now, let’s add a heading and four images using the <img> tag just below the previous section.
Notice we’re again using placeholder images here (but we’ve made them 300 now, which is their size, length and width, in pixels).
The result, after adding to our page, should look as follows:
Links and footer
Our final section is our footer (so called because it is the vertical end of the webpage). It contains some links to our online social profiles, like LinkedIn, Github, and Twitter, but you can replace them with your own custom links if you’d like!
Note the <user> placeholder in the href attribute of the anchor element. You have to replace that with your respective usernames for those sites. For example, https://twitter.com/<user> will become https://twitter.com/careerfoundry to link the anchor element to CareerFoundry’s Twitter page, and similarly for other links.
Place this section after the closing div tag of the Portfolio section.
We’ll also have a ‘Contact me’ form with input fields. On a real website, it would enable people to send us a message. For now, the form that we’re writing is just on the frontend. It won’t work since we do not have a backend for it yet.
We’ve introduced a few elements for the first time here. Let’s look at them one by one and understand what is happening in the lines of code above.
1. <form action=”#”>
- Form element defines an HTML form, which is what you use to login to Twitter or type in a message on Facebook. A form may have one or more inputs, buttons, checkboxes or dropdowns.
- A form can be ‘submitted’, which signals the browser that the user has done entering data into the form. The action attribute is the location where data needs to be sent when the form is submitted (which is our case is ‘#’, because we do not want to send the data anywhere).
2. <label for=””>
- Label marks the label for an input element. It can be the text next to the input fields, or an icon. The for attribute takes in the ‘id’ attribute of the enclosed input element.
3. <input type=””>
- Input defines an input element (an element take accepts data from the user). Input element has a type attribute which takes in many values. For example, type=”text” will render a text input field, while type=”submit” will render a button that submits the form when we click on it.
- As discussed already, textarea element will render a larger box to write text in. Follow the next section and try figuring out what’s the difference between <input type=”text” /> and <textarea>. Hint: One of the two accepts multi-line text input.
Putting the footer together
Just like with the About section, we need the links box and comment box to be aligned side by side, links on the left and comment box on the right. For now, we’ll need to add an opening and closing ‘div’ around these two sections, essentially wrapping each of these boxes in a bigger box. The end result should look something like this:
That’s it! We have the links section and then we have our inputs. Try typing something into the form fields and click Submit. Did you notice any change? Yes, the address bar of the browser now has a ‘#’ pound symbol. Remember where we used it? The form’s action attribute!
That just about concludes day two. Today we learned about various kinds of HTML elements. We created our first webpage and added the structure and information that we’ll work with throughout this course. What we did today is what you’ll generally do at the beginning of any web project: structure your data and put into the right HTML elements.
Now that this is done, we can focus on the style and functionality. In other words, now we can add more color, formatting, and positioning to our HTML document. Tomorrow, we’ll take a first look into the world of CSS, the language of styles on the internet.
Try replacing the About and Portfolio section images with your custom images. Ideally they should be square images and not super huge. If you’re having trouble finding nice images, download some images from here .
- HTML basics https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
Q. An element is not showing on the screen?
A. Check if that element is properly closed / there’s no mis-balanced HTML tags in the code. Use the Developer Tools in the browser for faster debugging
Q. Can we use more interesting / colorful images instead of the boring gray ones?
A. We’ll add the final images later when we study CSS. For now, it is easier if we focus on the data first, and get the structure of the page right.
Q. It is hard to remember so many HTML tags and their functionality. Should I learn them off by heart?
A. It happens to all of us in the beginning. The key is to keep practicing, and soon they’ll become second nature to you.
Q. The page looks very dull. Can we add some colors to it?
A. As mentioned previously, we’re only focusing on the content and structure in this tutorial as that’s what HTML is all about. Later in the course we’ll look into styling and colors!
Q. I’ve read about semantic HTML and elements like section, article and nav. Should we use them instead of divs and spans?
A. HTML5 defines a lot of new components that one can use instead of div or span. In the real world, we recommend using semantic HTML components whenever possible. For this course, we’d like to keep the number of new concepts we introduce to a minimum, hence, there’s no mention of semantic HTML. If you’d still like to learn about them, we can recommend this article .
You can become a job-ready web developer from scratch in as little as 6 months. Arrange a call with your program advisor today to discover how you can change your career from the comfort of your own home with the CareerFoundry Full-Stack Web Development Program .
Beginners’ Guide To Writing Good HTML
HTML Tutorial (for Beginners)
Freelance accessibility consultant . He co-authored the books 'Introducing HTML5' and 'Web Accessibility'.
Although HTML has changed greatly over 30 years, expanding from its original 18 tags to well over 120, it retains its central importance: it is the foundational technology for the web.
If your site is based on good HTML, it will load fast. Browsers incrementally render HTML—that is, they will display a partially downloaded web page to the user while the browser awaits the remaining files from the server.
Sites based on good HTML will also be robust – even if the styles and scripts fail to load, the content will be available. HTML is simultaneously backward compatible and future-proof.
No-one writes html by hand anymore, grandad, the structure of an html element, choosing the right html element, marking-up a common web page, what if there is no appropriate html element, deprecated elements.
Ready? Let’s go.
To demonstrate the future-proof nature of HTML, you can open the first-ever web browser , which was written by Sir Uncle Timbo himself in 1991. Open a web page by choosing Document > Open from Full Document Reference, and type a URL in the box.
A well-structured HTML document will still render. It won’t have any styles (CSS 1 wasn’t specified until 1996, and it was 2000 until IE5 for Mac shipped with an almost full implementation) and some of the more exotic punctuation marks or characters might be replaced by their character codes, but you can still read the content. And, for the vast majority of sites, the content is what users come for.
For example, here is the Web Accessibility Checklist review on this very site rendered in the 1991 browser:
To demonstrate HTML’s future-proof nature, let’s look at the first-ever web page in a modern browser—in this case, Firefox 77 (Developer Edition):
As you can see, it renders perfectly—and is completely responsive when narrowing the window:
I’m occasionally told that no-one really needs to learn HTML anymore, because nobody writes HTML by hand these days. And this is largely true – 35.8% of the web is powered by WordPress , which assembles pages from templates upon which various themes can be applied. Joomla and Drupal work similarly. Other developers use frameworks like React which glue together pre-written components.
But someone still has to write the templates and components. And developers using WordPress or React need knowledge of HTML in order to evaluate the quality of the templates or components they are planning to use.
An analogy is deciding not to cook and going out to a buffet restaurant. You’ll get much nicer food that’s far more nutritious if each of the dishes has been cooked by professional chefs using the best ingredients than if each is a frozen ready meal, microwaved by a bored kitchen-hand trainee who doesn’t care at all.
Before we begin looking at what constitutes good HTML, let’s take a look at the structure of an HTML element. (If you already know this, feel free to skip this section .)
Here’s an HTML tag that tells the browser “this is a paragraph”:
Browsers don’t care much about upper or lower case in HTML: <video>, <VIDEO>, <Video> and even <vIdEo> are all the same. But conventionally we use lower cases because capitals look like shouting. This one is an opening tag. Most —but not all— tags have a corresponding closing tag.
As with the opening tag, the closing tag is enclosed in angle brackets, but here the tag name is preceded by a backslash, which tells the browser that this is a closing tag:
As you can see, the tag name is surrounded by angle brackets. The opening tag, the content between the opening and closing tags, and the closing tag is an HTML element. Here, we have two paragraph elements:
By default, a web browser will display these with a blank line between the paragraphs. But this is only the default, the display can be changed using a separate language called Cascading Style Sheets (CSS) without changing the HTML in any way.
Tags can also have attributes that give the browser extra information about the tag. Some attributes are allowed on all tags, others are allowed only on a subset. Attributes have names and assigned values in the opening tag.
This tells the browser that this particular paragraph is in the English language:
Some attributes appear not to take a value. For example <audio loop> is a shorthand for <audio loop=”loop”>; either format is legitimate. Be careful with Boolean attributes; as the spec says,
A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value… To represent a false value, the attribute has to be omitted altogether.
Tags can have multiple attributes:
This tells the browser that this particular paragraph is in the English language, and it belongs to the class called “warning” (which we may, for example, color red to make it stand out from the surrounding paragraphs).
Some attributes can take multiple values, which are separated by spaces:
This paragraph is a member of the “discount” class (perhaps we want to style this to draw attention to it) and also is a member of the “seasonal” class (perhaps we want to show a picture of a Christmas tree next to it).
And that is all you need to know about the structure of an HTML tag.
Sometimes I like to think HTML is like the English language. It’s pretty easy to read, but much harder to write—there are so many quirks and irregularities.
Although HTML has such a small vocabulary (the average 2.5-year-old toddler speaks more words in their native language than are elements in HTML), many people’s HTML is imprecise. Vague HTML can make content harder to parse for search engines, assistive technologies such as screen readers for blind visitors, and non-traditional devices such as Apple Watch and voice assistants.
When I talk about “good” HTML, I really mean “semantic” HTML: tags that describe the content as precisely as possible. You need to ask the philosophical question: what is this content? And which tag best describes what it is, not what it looks like. Clear your mind of any thoughts of colors, spacing, borders, or typography; those are not what the content is, just its appearance, and are defined by CSS.
Sometimes, it’s very easy to describe what some content is. For example, consider this list of the top three best songs by The Cheeky Girls:
- Cheeky Song (Touch My Bum)
- (Hooray, Hooray!) It’s a Cheeky Holiday!
- Take Your Shoes Off
It’s easy to see that this is a list and the order of the entries matters. The song “Touch My Bum” is objectively better than “Cheeky Holiday” (and quite possibly the best song ever ). That’s why they’re numbered.
We would use the HTML <ol> (ordered list) tag to surround this whole list, and each entry will be enclosed in an <li> (list item):
Do you want a chart show style countdown to the number one? Simply use the reversed attribute on the <ol>:
Assuming you’re in a modern browser, you’ll see the list counting down:
Sometimes it’s not immediately obvious which tag to use. Consider this horizontal navigation menu on my Cheeky Girls fan site:
Of course, each of the menu items is a link, but what else? It’s another list—a list of pages on my site. But with this list, the order doesn’t matter; Gabriela could be first and Monica second.
For an unordered list, we use <ul>, with each entry an <li>, like this:
The benefit of using a list here is that assistive technology, that some disabled people need to use, the web knows what to do with them. A screen reader, for example, will say something like “List of five items”, and usually gives the user the opportunity to skip over the list, or skip to the next list.
On the subject of assistive technology, let’s give some extra information to screen reader users, and wrap our <ul> in a <nav>element, like this:
As you might imagine, <nav> tells the browser that this is primary navigation. A screen reader user will be told that they’re in the <nav> and they will probably have a keyboard shortcut to go straight to the <nav>, or to skip to the end of it.
Although this article is long, we don’t have space to go through all the elements of HTML. Mozilla Developer Network (MDN) has a useful set of tutorials and a superb reference site that is the go-to resource even for seasoned web pros who’ve forgotten the precise syntax of something.
So now, let’s make a real webpage, the kind you’ve seen hundreds of times before, whether it’s a video site, a newspaper site, a site selling products, or a humble blog. Ours is a small site that pays tribute to the musical genius of The Cheeky Girls.
You don’t need loads of expensive programs or a powerful computer to develop websites, just a code editor and a browser.
I use Microsoft’s free open-source code editor Visual Studio Code, but there are many others such as Sublime Text, Atom, BlueGriffon.
So, let’s dive in and get coding.
Setting Up the Scaffolding
Before we can write our content, there is some scaffolding required. If your code editor supports saving snippets or templates, this would be a good one to use for every web page you make:
- Line 1 is the equivalent of a magical incantation to tell the browser that the code coming up is the latest, greatest version of HTML.
- Line 2 tells the browser that the primary content of the webpage is in English. This is important for translation software and also for people who use a screen reader: the word “six” is pronounced very differently in English and French, for example. For most languages, the language tag is pretty easy to determine. The organization, W3C, that makes the standards that the Web relies on, has a guide to Choosing a Language Tag .
- Line 3 opens up the “head” of the web page—this is a block of information about the page that helps the browser process it properly.
- Line 4 tells the browser that we’re using a character encoding that can handle all the human languages and emojis that you could ever want. If you’ve ever seen a web page with weird characters like “ Â£”, �” or empty boxes in the middle of words, you know why we need this line.
- Line 5 is another magical incantation. It tells the browser to display the web page at the width of the device it’s being displayed on and helps sites reformat across wide desktop displays and narrow mobile screens.
- Line 6 is the only one you should change. The <title> of the page is the text that is first read out to a screen reader user, to assure them they’re on the right page. It also determines the sort order in browser bookmarks so I use a system that has site name first (so all bookmarks into the site are grouped together) and then the page title afterward,. For example <title>Cheeky Chap — Home</title>, <title>Cheeky Chap — About Monica</title>. There’s no one true way to write your <title>; the golden rule is to be consistent across all the pages in your site.
Adding Our Content
Now it’s time for us to add the code specific to our site. HTML is a markup language, so we often call the process of turning textual content into HTML as “marking it up”.
Now we’ve closed the <head>, let’s open the <body>. (Strictly speaking, the <head></head> and <body></body> tags aren’t necessary, but as you will see them on other people’s sites, it’s important that you know what they do).
Type <body> into your code editor. Depending on your editor and its settings, it might automatically generate a closing </body> tag for you. If so, put some blank lines between the opening and closing tag to make sure you don’t accidentally enter code after the closing </body> tag, as that won’t be displayed and will be annoying.
Remember when I said that when you write your HTML you should pay no attention to how the page will look?
There’s one exception to the rule: think about what order the content is in. By default, the browser will show all content in source order (you can change this, but it’s more work). So we’ll look at the content that comes first and write that HTML first.
The first discrete piece of content on our page is the banner at the top. This will be at the top of every page on our site.
The HTML for the whole banner will be wrapped in <header> </header> tags. As The HTML specification says “The header element represents a group of introductory or navigational aids”.
Inside it, we have an image of the cheeky girls that also serves as a link to the homepage, the main heading for the page (“I’m a Cheeky Chap!”), and some supplementary text.
Let’ s look at the image that’s a home page link.
Clickable links (somewhat confusingly) don’t use the <link> tag; they use the <a> tag, which stands for “anchor”. This tag has an attribute, href , that defines the destination of the link. A normal text link is structured like this:
The text “Home page” will appear on the screen, probably underlined in blue, and if you click on this, the browser will clear the screen and load up index.html .
However, our link doesn’t have any text, it’s purely a clickable image. The simplest way to put an image on the web is to use the <img> tag.
It’s structured like this:
The attribute src points to a file that will be pulled into the webpage at this point. The second attribute, alt, is for “alternate text”. This is for those who can’t see the image, due to visual impairment or because they’ve turned off images in their browser to make accessing the content faster and cheaper.
You don’t need to write a “picture of ..” or “image of…”; a screenreader will automatically prepend that. Every <img> must have an alt attribute. In older sites, you might see blank alt text ( alt=”” ). This indicates that the image conveys no information and has no function, it’s purely decorative.
In modern sites, decorative images are applied using CSS and are not in HTML, as they are purely about presentation and not content. WebAIM has a useful quiz-format introduction to writing good alternate text.
If your image is in the SVG format, old versions of Safari (pre-version 9.1.1 on desktop or iOS Version 9.3.2) need an extra role attribute (which is ignored by other browsers):
Notice that <img> doesn’t have a closing tag. In some older websites, you might see it written <img src=”dog.jpg” alt=”a nice dog” /> which is called “self-closing”. Either one is okay.
To make a clickable image that is a link to your home page, we need to nest one tag inside the other. There’s one change we need to make—if the image is a link, the alt text needs to describe the destination of the link (“Home”) rather than the content of the image.
The next part of our header is the name of the site – “I’m a Cheeky Chap”. As this is the heading for the entire page, we’ll give it the most important level of heading, <h1>I’m a cheeky chap</h1>.
HTML has 6 levels of heading, inventively named <h1>, <h2> etc. There should only be one <h1> on any particular page, and sub-headings should not ‘skip’ a level. The hierarchy of headings is very important for assistive technology users to navigate a page. If your page has sensible heading hierarchy, you can use it to automatically generate a table of contents so visitors can navigate around long texts— Stuart Langridge’s generated-toc script can be copied and pasted to do this.
Nearly all AT has a shortcut for ‘go to the next heading’; in the commercial screen reader JAWS and the free screen reader NVDA, the H key means ‘go to the next header’, pressing ‘2’ jumps to the next <h2> (amongst many other single-key navigation short cuts ).
Now all that’s left to do is mark up the text “A homage to the musical genius of The Cheeky Girls”. It’s not really a heading, it’s more like a strapline (“a short, easily remembered phrase used by an organization so that people will recognize it or its products” ).
Since HTML doesn’t have a dedicated strapline tag, we’ll wrap it in a <p> element, which gives us our full header:
Next on the page comes the navigation. We already know how to construct this:
The Main Content
Now it’s time to turn our attention to the main content—the actual meat of the page.
HTML has a special element for this, <main>, which will wrap all the content in the screenshot above. The heading for the series of three posts is “Why are the Cheeky Girls so great”, so we’ll give that a heading tag. We’ve already used an <h1> in the header, and there should only be one per page, so we’ll wrap this one in an <h2>.
Next, we have three posts, each self-contained, and with its own heading.
For each of these, we’ll use an <article> element. Don’t fall into the trap of thinking that <article> is only for news articles or blog posts; think of it like an article of clothing. You can wear a different shirt with the trousers you’re wearing; your trousers are one article of clothing, your shirt is another.
A page full of videos could wrap each video and synopsis in <article>; a page that is a product listing could wrap each product in <article>. Using an <article> element has the extra advantage of helping Apple Watch layout content in a visually appealing way.
We will give each article’s heading a heading tag. The next one in sequence is <h3> as we’ve used <h2> as the heading for the main content. We will give each heading a <h3> tag because they’re all on the same level in the hierarchy.
There’s now just one piece of content left to mark up: the footer.
Unsurprisingly, and pleasingly intuitively, HTML gives us the <footer> element for this. But what of the content inside it (which reads “Copyright Bruce Lawson. Header image by Matt Buck.”)?
The specification tells us of the <small> element:
The small element represents side comments such as small print. Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.
Copyright and attribution is exactly the purpose of this content, so we’ll mark up our footer like this:
And now that we’ve finished, let’s run a check on the quality of our code.
The W3C has a free HTML validator at which can either validate a page on the web, file upload, or copy and paste your code into a form. You should always check your code before applying styles, writing a script, or publishing it to the web.
If you also check the “outline” checkbox before clicking the “check” button, the validator will show you any errors and the heading hierarchy and logical structure of your page.
Don’t worry about the warning “[nav element with no heading]”; sighted users will understand that it’s navigation and assistive technology users will be informed automatically.
Occasionally, you’ll find that there is no appropriate HTML element for your content.
Suppose, for example, in the middle of a paragraph, we want to tell assistive technology and translation software that a snippet of content is in the French language. In such cases, there is a generic tag called <span>:
For wrapping larger components, there is another generic tag called <div>, short for “division”.
Imagine that you want to group your navigation and an ad together so you can style it as a sidebar on the left of your content. There is no <sidebar> element because HTML is concerned with the meaning of content, not its display. Our ad will go in an <aside> element, which the spec defines as ‘represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content”.
Our navigation will go inside <nav>, as you know. And we will group them thus:
One of the biggest barriers to access on the web is over-use of <div> instead of a precise HTML element. As the spec says:
The div element has no special meaning at all … Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
The latest version of HTML (often called HTML5) gave us a new mechanism to add ‘structured data’ attributes to our data to make its meaning clear to machines.
This is, perhaps, most usefully combined with vocabularies for different kinds of content written by Schema, co-founded by Google, Microsoft, Yahoo, and Yandex.
Search engines aren’t the only consumers of microdata. Apple uses it to decide how to display information on the Apple Watch. Browser extensions can also make use of it.
In a blog post with some eye-watering numbers showing how various organizations increased their search traffic with structured data, Google said:
When you add markup to your content, you help search engines understand the different components of a page.
Schema has a huge list of different types of vocabularies from Geospatial Geometry to Hindu meals through Airlines and COVID testing facilities. But let’s look at the schema for a blog post .
Each article is marked up like this:
Here, the itemscope attribute tells the search engine that the extent of this blog post is contained within this <article> element. The different itemprops are specified in the particular schema vocabulary, except the pubdate value on itemprop which isn’t from Schema but is required by Apple for WatchOS .
You’ll notice that I’ve used a <time> element in this example. The datetime attribute specifies a date (and potentially a time) in the unambiguous YYYY-MM-DD format, while the visible textual contents of the element can be anything: “The Cheeky Girls’ birthday”, “Tuesday”, “31 Oct 82”, “The Feast of Saint Karen and the Immaculate Surfboard”.
Forms are what make the web interactive and not just a read-only medium. No one enjoys filling in forms, and even fewer people enjoy coding them. The golden rule for forms is that every input field must have a corresponding label.
Here’s a demo I made of an unlabelled form field vs a labeled form field . They look identical, but the top one doesn’t have a proper label, whereas the second one does. Click into the text label of the bottom one, and you’ll see that it focuses on the associated input.
This makes focusing an input much easier for someone with motor control difficulties – or maybe for you, trying to check a tiny checkbox on a small screen on a bumpy train.
It’s also vital for screen reader users who will tab through fields in a form (by default, only links and form fields are focusable by tabbing). When they tab into an input field, the screen reader will announce the contents of the associated label, the type of field, and any other information such as whether it’s a required field.
The code for this is simple. The input field is given a unique ID, and the label is associated with it using the for attribute:
Putting this together, a simple one-field form would look like this:
The action attribute of the form is the URL of the page that will receive the form, do any work required, and probably say something like “thanks! Your info was received”. The method attribute tells the browser how to send this information to the server.
The name attribute on the <input> allows the server to access the information submitted in each field, and should, therefore, be unique in that form-except in the case of radio buttons, in which all mutually exclusive options share the same name (that’s how the browser knows they’re a group).
Occasionally, you might not want a visible label. Here’s an example when a label saying “Search” preceding the input feels like overkill.
We can associate the input field with the text “Search”, which is the contents of the submit button using aria-labelledby :
We could have used aria-label :
But it’s always better to prefer visible text on a page because that will be translated if the page is run through a translation tool, whereas text “hidden” in HTML attributes won’t be.
Grouping Form Fields
<fieldset> groups a cluster of related fields. For example, the three-date of birth field pattern, or any cluster of radio buttons or related checkboxes.
<legend> as the first child of <fieldset> provides an over-arching label for the whole group, which gives them context. Then the individual fields plus their labels let you know what choices/options, etc. are available. Optionally, <legend> may contain a heading <h2> – <h6> element.
This markup groups radio buttons that allow the visitor to express their preferred contact method:
Chromium-based browsers display this with the grouping highlighted:
In-Browser Input Validation
As with any other HTML, the type of element you choose should reflect the type of content you expect the visitor to enter into the form field. If you want them to select one option out of a few choices, radio buttons will allow this. Or a <select> allows choosing from a longer list of options (country of residence, for example).
<input> can take many attributes. The required attribute is very useful; the browser will automatically alert the user if they attempt to submit a form with an empty required field. You can limit the number of characters the user can enter with minlength and maxlength and even require a certain format of the input.
Other mechanisms exist to make the browser perform validation of input by using the type attribute to tell the browser what sort of input is expected:
- <input type=tel> tells the browser that a telephone number is expected.
- <input type=email> expects a valid email address.
- <input type=number> will hint to the browser to reject non-numeric input. Note that type=number should only be used for quantities – telephone numbers, credit card numbers, passport numbers are numeric, but not quantities.
On mobile, most browsers will use the input type to adjust the virtual keyboard that is offered:
- type=email shows an alphanumeric keyboard with an “@” symbol and a dot, as those are in all email addresses.
- type=number will show only numerals and a decimal separator appropriate to the user’s regions.
- type=date will display some sort of system date picker.
There are many types of input—too many to list here—but the underlying markup approach remains the same: think about what your content means, not how it will look.
Auto Filling Forms
Allowing browsers to auto-fill forms requires visitors to do less, so they’re more likely to complete a form and sign up/buy your product. Autofill on Browsers: A Deep Dive is a great article by eBay about this.
There are more HTML tags – the developer-focused specification lists them all.
It’s vital that you avoid using elements that are marked “deprecated” as these are outdated parts of HTML that still exist in the spec because they are used in some old (or badly-written) sites, but are now obsolete .
Over the course of this article, you’ve learned a few of the most commonly-used HTML tags.
Most importantly, you’ve learned the philosophy behind writing good semantic HTML: choose the HTML tag that most precisely represents the meaning of the content, without considering how it will be displayed.
So now go out and build fantastic websites that that are lightning-fast and have excellent SEO, and which work across all kinds of devices, for people of all different abilities and disabilities!
Leave a Comment
Your email address will not be published. Required fields are marked *
HTML for Beginners
HTML is used to create web pages.
This article will teach you the basics of HTML. I also created a 45-minute video course on the freeCodeCamp.org YouTube channel that teaches you HTML in the context of creating an actual web page.
If you are just learning HTML, I recommend both reading this article and watching the video course.
Here is a great interactive diagram from codeanalagies.com . Move the slider back and forth.
You can actually see the HTML that makes up any element on a webpage by right-clicking an element and then selecting "Inspect".
Here is the HTML that makes up a very basic webpage:
Let's break things down even more.
HTML is made up of HTML elements. An element is an individual component of HTML.
Here is an HTML element from the code above:
HTML tags mark the beginning and end of an element (and are considered part of the element). Tags are containers. They tell you something about the content between the opening & closing tags.
In the element above, the tags are <p> (opening tag) and </p> (closing tag). You will notice that the closing tag has a / . This particular tag is a p aragraph tag. It specifies a paragraph in the HTML document. The words between the opening and closing tags are a paragraph.
Kinds of Elements
Elements can be either container elements (they hold content) or stand-alone elements, sometimes called self-closing elements.
Paragraph elements are containers: <p>Hi, I contain content</p>
Image elements are stand-alone: <img src="beau.jpg" />
Notice in the stand-alone img element, there is no closing tag but there is a / before the final angle bracket.
Attributes provide additional information about HTML elements. Attribute tags include class , id , style , lang , and src (source).
Here is an example of an HTML element with the attribute tag id :
Some things to note about attributes:
- Attributes are positioned inside the opening tag, before the right bracket.
- Attributes are paired with values (in this example, the value is info ).
- Key / value pairs are an important concept in programming.
- Attributes are selected from a pre-defined set of possible attributes depending on the element.
- Values are assigned to attributes and they must be contained inside quotation marks.
Here is another example of an element with at attribute:
HTML elements 'nest' inside of one another. The element that opens first closes last.
When nesting elements, spaces and tabs are often used to show the level of nesting. However, the spacing is not required and is only used to make HTML easier to read for humans.
Here is an example of some HTML with a few levels of nesting elements:
Common HTML Tags
Here are some common tags that are in almost all HTML documents.
doctype : This is the first element on every HTML page. It tells the browser to expect HTML and what version to use. For the newest version of HTML, the element should look like this: <!doctype html>
html : After the doctype, all page content must be contained in the <html> tags.
head : This element contains the page title and metadata.
body : This element contains all the visible content in a page.
title : This optional element is the name of your page. It is always nested in the head tag.
div : This tag is one of the most used tags. It is used to create a basic container of other HTML or content.
p : A paragraph or section of body copy.
h1 - h6 : These designate different levels of headings or titles.
ol : Creates an ordered (numbered) list.
ul : Creates an unordered list.
li : List element.
Anchor elements ( <a></a> ) are used to link to other sites on the web or within your project.
This element links to another website:
This element links to another page of your website:
<a href="about.html">About Me</a>
The <link> element is a different type of link. Unlike the anchor element, it specifies relationships between the current document and an external resource.
It is often used to link a CSS file with an HTML file so that the external CSS file is used to style the HTML.
Here is an example:
<link src="main.css" rel='stylesheet' />
Like any other good coding language, HTML offers comments. They operate like comments in any other language. They are ignored by the browser engine.
<!-- Hello, I am a comment. -->
Tables are a way to represent complex information in a grid format. They are made of rows and columns.
Tables are compound elements (similar to lists) they are made up of several elements.
table : Table element.
tr : Table row.
td : Table cell.
th : Table header cell (optional).
Here is an example of a table. First you will see the HTML. Then you will see how the HTML displays.
- What is wrong with this code?
2. What is wrong with this code?
3. What is wrong with this code?
You've now learned the basics of HTML syntax.
Next you should watch this HTML crash course I created that teaches HTML in the context of building a simple web page.
I'm a teacher and developer with freeCodeCamp.org. I run the freeCodeCamp.org YouTube channel.
If you read this far, tweet to the author to show them you care. Tweet a thanks
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
Here is a free HTML tutorial that will teach you HTML (HyperText Markup Language) to start creating your website step by step. You can find everything related to HTML illustrated with examples for each chapter separately to help you fully understand the markup language.
HTML, an acronym for HyperText Markup Language, is a primary markup language for creating websites. It consists of a series of codes used to structure texts, images, and other content to be displayed in a browser.
Our HTML Book consists of several sections that cover all the needed information to enrich your HMTL knowledge.
In the HTML Basics section, you will have a full understanding of Editors and Tools that you need when working on building web pages. It will inform you about the professional editors that web developers use for coding.
Elements are the fundamentals of HTML. Each HTML document is made of elements, which are defined using tags. HTML Elements teaches you the types of HTML elements. It also highlights the difference between HTML tags and HTML elements that are often confused.
HTML Basic Tags are used to structure website content (text, hyperlinks, images, media, etc). Tags only "instruct" browsers how to show the content of the web page. HTML Tags chapter suggests the most frequently used tags in HTML with their examples.
HTML Attributes are added to an HTML element to provide additional information about it. Book suggests lots of examples and the list of the most used attributes.
HTML Formatting sophisticated chapter lets you explore the categories of formatting tags with a brief description and examples.
Websites contain different types of links that take you directly to other pages or allow navigating to a specific part of the page. Find out how you can define hyperlinks in the HTML Links chapter and how to use different attributes with links and how to apply links on the image.
Our next HTML Color Names chapter shows the ways of changing the color of the text in HTML. Also, find a 216 cross-browser color palette used for creating pages of websites.
HTML Tables section suggests the list of deprecated attributes, which means that they are no longer used in the mentioned tags and are replaced by other alternative attributes.
HTML Scripts section highlights the way to embed script or reference to an executable script within an HTML document and to trigger scripts.
This part of the book provides a collection of HTML Layout Templates and Form Templates that presents basic website layouts and various kinds of forms that are created using only HTML and CSS.
HTML 5 includes the introduction to HTML, as well as suggesting the main benefits and content models. Each of these models describes the type of elements it contains. You can also find a list of HTML5 Tags with their descriptions and semantic elements presented with examples. HTML5 allows embedding audio files without connecting third-party plugins.
The part suggests character sets that are required to show the HTML page correctly. You can find ASCII printable characters with their equivalent HTML entity codes, ISO 8859-1 symbols, characters, the list of the UTF-8 character codes, the collection of character entities, math symbols, Greek letters with their entity numbers and names. The chapter also covers HTTP Methods , HTTP Status Messages , Table of MIME Types and Table of HTML Tags divided into categories. Another HTML Images chapter provides required and recommended image attributes, image floating, and modern image formats to choose from. On the XHTML page, you will gain an understanding of benefits and the difference between HTML and XHTML.
HTML Tags presents the largest section with all HTML tags, including the deprecated ones. In the Deprecated Tags chapter, you will read about the set of HTML deprecated tags with their alternative suggestions. Two other chapters include HTML Global Attributes and Event Attributes where you can find everything related to these topics.
In our website, you can find the HTML editor , where you can edit the HTML code, and click "Submit" to see the result.
HTML is not so difficult, so we are sure you will enjoy learning. After successfully completing the HTML book, you will have a challenge!
Test yourself with this HTML Basic Quiz and see how much you have learned.
Start learning just now!
We have gathered a variety of HTML exercises (with answers) for each HTML Chapter. Try to solve an exercise by editing some code. Get a "hint" if you're stuck, or show the answer to see what you've done wrong. Count Your Score You will get 1 point for each correct answer. Your score and total score will always be displayed. Start HTML Exercises
HTML forms are an important part of many websites. Create a form for a survey on the topic of your choice. Include a variety of answer options, including text fields, dropdowns, radio buttons, checkboxes, and a submit button. Don't forget to add a title, and consider using CSS to improve the look of your form. Here's an example. 5.
All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>. Example <!DOCTYPE html> <html> <body> <h1> My First Heading </h1> <p> My first paragraph. </p> </body> </html> Try it Yourself »
How to create an HTML document First, let's open Visual Studio Code (or your favorite code editor). In the folder of your choice, create a new file and name it index.html. In the index.html file, type ! (exclamation mark) and press enter. You will see something like this:
Our step-by-step guide teaches you the basics of HTML and how to build your first website. That means how to layout an HTML page, how to add text and images, how to add headings and text formatting, and how to use tables. We'll get you building your new website in minutes, not hours. HTML for Absolute Beginners
Here are a few fun activities you can try to get your feet wet in the world of HTML coding! 1. Make your first webpage using HTML! The first thing you need to know is that websites are built using a coding language called HTML. HTML is a coding language that uses tags. Tags are kind of like boxes.
Initially, beginners enjoy making buttons, adding the links, adding images, working with layout and a lot of cool stuff in web designing but when it comes to making a project using only HTML and CSS they get stuck and confuse about what they should make to practice all these stuff. Afterall their knowledge is just limited to HTML and CSS.
Best HTML Projects for Beginners A Tribute Page A Questionnaire Technical Documentation A Landing Page The Event or Conference Web Page Intermediate HTML Projects with Source Code A Website with a Parallax Effect Your Own Portfolio Restaurant's Official Webpage Music Shop Page A Photography-Related Website Advanced HTML Projects with Source Code
30 HTML Best Practices for Beginners All WordPress AJAX Authentication Design Patterns XML Code HTML & CSS 30 HTML Best Practices for Beginners Jeffrey Way Last updated May 27, 2021 19 likes Read Time: 14 min HTML & CSS Web Development HTML This tutorial is specifically for those who are just diving into web development.
10 HTML Project Ideas For Beginners 1. A tribute page This is one of the most simple HTML projects you can make. As you can guess by the name, a tribute page shows respect for someone who inspires you, or someone you admire and revere. To make a tribute page, you only need to know fundamental HTML concepts. First, you have to create a webpage.
7 Projects to try out even if you just know HTML and CSS 1. A tribute page Tribute page screenshot Write a tribute of someone you admire and publish as a web page. This project will involve...
Complete beginners start here! Getting started with the web. Getting started with the web; ... it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks. If you get stuck, ... A descriptive title such as "Assessment wanted for HTML text basics skill test 1".
HTML basics. HTML ( H yper T ext M arkup L anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.
3. <input type="">. Input defines an input element (an element take accepts data from the user). Input element has a type attribute which takes in many values. For example, type="text" will render a text input field, while type="submit" will render a button that submits the form when we click on it. 4. <textarea>.
Future-Proof HTML. To demonstrate the future-proof nature of HTML, you can open the first-ever web browser, which was written by Sir Uncle Timbo himself in 1991. Open a web page by choosing Document > Open from Full Document Reference, and type a URL in the box. A well-structured HTML document will still render.
HTML tags mark the beginning and end of an element (and are considered part of the element). Tags are containers. They tell you something about the content between the opening & closing tags. In the element above, the tags are <p> (opening tag) and </p> (closing tag). You will notice that the closing tag has a /.
Learn HTML. Here is a free HTML tutorial that will teach you HTML (HyperText Markup Language) to start creating your website step by step. You can find everything related to HTML illustrated with examples for each chapter separately to help you fully understand the markup language. HTML, an acronym for HyperText Markup Language, is a primary ...