html task for beginners

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:

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 :

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.

Ordered List

The first is an <ol> : This is an ordered list of contents. For example:

Inside the <ol> tag we list each item on the list inside <li> </li> tags.

For example:

Unordered List

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:

Definition List

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.

What’s Next?

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.

Troubleshooting

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.

HTML tables

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.

This detailed tutorial will guide you from the very basics to the most advanced uses of forms with CSS and JavaScript.

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:

CSS tutorials

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.

JavaScript is arguably the most important web coding language after HTML. Most websites you visit employ at least a little bit of JavaScript coding.

Along with HTML and CSS, JavaScript makes the trinity of webpage design and construction .

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.

Semantic Markup

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.

Logical tags

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:

A tag that puts a button onto a webpage. It must be combined with JavaScript in order to do anything. This page provides all the details you need.

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.

Image Manipulation

Although HTML makes displaying images easy with the img tag, by using some JavaScript, you can change images on the fly .

This tutorial shows you how.

Character Codes

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.

Horizontal Rule

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:

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.

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

For example:

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 :

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:

USA Lacrosse

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.

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.

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.

Featured Articles

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

Java Tutorial for Beginners

Kids Learn HTML: The Getting Started Guide

Top 10 Projects For Beginners To Practice HTML and CSS Skills

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.

10. Technical Documentation

If you have a little bit of knowledge of Javascript then you can create a webpage of technical documentation. It requires knowledge of HTML, CSS and basic javascript. Divide the whole webpage into two sections. The left side creates a menu with all the topics listed from top to bottom. Right side you need to mention the documentation or description for the topics. The idea is once you click on one of the topics in the left section it should load the content on the right. For click, you can use either javascript or CSS bookmark option. You don’t need to make it too fancy, just give it a simple and descent look, that looks good for technical documentation. You can take help from the links given below.

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.

Presentational instructions should be kept separate from semantic and structural markup, as advised by software best practices. Web developers cannot construct a website just using HTML. For a website to be aesthetically beautiful and effective, HTML data must be formatted using CSS or Javascript. HTML isn’t a programming language either. Looking for projects that will stand out in your portfolio? Within the following blog sections, you’ll discover various vital HTML projects for developers of all levels.

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.

You can create a technical documentation page if you have a working grasp of HTML, CSS, and JavaScript. The underlying concept of this project is to develop a technical documentation page where you can click on any subject on the page, and it will load the relevant material on the page. The project is a plain and easy technical documentation website; nothing particularly exciting about it. You must split the website into two sections to complete this HTML homework. You can use backend and fetch data from DB and make it full fledge project

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.

15+ exciting c projects ideas with source code, top 20 iot projects with source code [2022].

Unsupported browser

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

5. Consider Placing JavaScript Files at the Bottom

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.

6. Never Use Inline JavaScript. It's Not 1996!

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!

By zipping your CSS and JavaScript files, you can reduce the size of each file by a substantial 25% or so. Please don't bother doing this while still in development. However, once the site is more or less complete, use a few online compression programs to save yourself some bandwidth.

JavaScript Compression Services

CSS Compression Services

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.

The amazing "AHA" moments, at least for me, always occur late at night. This was the case when I first began to understand exactly what JavaScript closures were. It's a great feeling that you need to experience, if you haven't already.

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.)

Notice any cool JavaScript effects that you'd like to learn? It's likely that they're using a plugin to accomplish the effect. View the source and search the HEAD tag for the name of the script. Then Google it and implement it into your own site! Yay.

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:

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.

30. Don't Use a Framework... Yet

Frameworks, whether they be for Javascript or CSS, are fantastic; but please don't use them when first getting started. Though it could be argued that jQuery and Javascript can be learned simultaneously, the same can't be said for CSS. I've personally promoted the 960 CSS Framework , and use it often. Having said that, if you're still in the process of learning CSS—meaning the first year—you'll only make yourself more confused if you use one.

CSS frameworks are for experienced developers who want to save themselves a bit of time. They're not for beginners.

This post has been updated with contributions from Monty Shokeen . Monty is a full-stack developer who also loves to write tutorials, and to learn about new JavaScript libraries.

10 Interesting HTML Project Ideas & Topics For Beginners [2023]

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.

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.

While HTML projects are best for practicing your HTML coding skills, simultaneously, you practice CSS and Javascript through these projects. Here is what you learn through working on HTML projects:

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

You can build a technical documentation page if you have the basic knowledge of HTML, CSS, and JavaScript. The main idea behind this project is to create a technical documentation page wherein you can click on any topic on the left side of the page, and it will load the associated content on the right.

The project is a simple and straightforward technical documentation page, nothing to fancy. To build this HTML project, you must divide the webpage into two parts. While the left side will contain the menu listing all the topics, arranged in the top-to-bottom style, the right side will have the documentation (description) corresponding to each topic. To include the click function, you can use CSS bookmark or Javascript.

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:

You can find these HTML projects for students PDF and practice them to strengthen your resume.

Also Read: 16 Exciting Javascript Project Ideas & Topics

Final Thoughts

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?

Dynamic HTML is the ability to change the content in a web page. Before HTML4.0, it was difficult to dynamically change contents of a page. But with the advent of DHTML and DOM, it became a lot easy to dynamically change contents of the page. DOM is a representation of the document written in a standard way in JavaScript. For example, you can have a tag

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

Our Trending Software Engineering Courses

Our Popular Software Engineering Courses

Get Free Consultation

Popular software development skills.

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

Career Planning

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.

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

This will require some knowledge of HTML CSS and bootstrap or JavaScript. The basic idea is: when you click on any topic on the left, it loads that content on the right.

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

HTML basics

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.

paragraph element including opening tag, content reading 'my cat is very grumpy', and a closing tag

The main parts of our element are as follows:

Elements can also have attributes that look like the following:

Paragraph opening tag with a class attribute highlighted: class=editor-note

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:

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.

Nesting elements

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!

Void elements

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:

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:

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  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:

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:

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)

Introduction

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.

Just like a building is only as strong as its foundation, HTML is the skeleton that holds everything together. To put it in a more web-based context, HTML makes sure the page is usable on a variety of devices and browsers and provides a structure for adding CSS, JavaScript, and the content of the website or application itself.

What are we going to do today?

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.

Element tags

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.

Element attributes

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.

Attributes like width and height for img, or rows and cols for textarea are useful directly within HTML. But some attributes have a special meaning—meaning that they don’t do anything on their own, but require us to write additional CSS or JavaScript, and thus connect the three pillars together—and we’ll be learning more about them later in this course.

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.

Nesting elements

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).

Other rules

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.

Anchor Links

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.

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.

Contact form

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=”#”>

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.

4. <textarea>

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.

🧐Daily challenge

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 .

📗References

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 .

Senior Program

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)

Bruce Lawson

Freelance accessibility consultant . He co-authored the books 'Introducing HTML5' and 'Web Accessibility'.

When Tim Berners-Lee invented the World Wide Web in 1989, there was no JavaScript , no CSS, only HTML.

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.

Modern fashionable development techniques, such as React, require a lot of JavaScript to be sent to the user. When it’s all downloaded, the user’s device must parse and execute the JavaScript before it can even start to construct the page. On a slow network, or on a cheaper, low-powered device, this can result in an excruciatingly slow load and is a heavy drain on the battery.

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.

Future-Proof HTML

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):

World Wide Web first webpage in modern browser FireFox 77

As you can see, it renders perfectly—and is completely responsive when narrowing the window:

World Wide Web first webpage in narrowed view

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:

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:

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.

Quality Assurance

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.

checker input: showing results for contents of text-input area

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.

HTML validator shows errors and heading hierarchy and logical structure

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.

unlabelled field form vs labelled field form

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).

Hiding Labels

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:

Grouping form fields in Chromium-based browsers

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.

For example:

Input Types

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:

On mobile, most browsers will use the input type to adjust the virtual keyboard that is offered:

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!

Cancel reply.

Your email address will not be published. Required fields are marked *

We use cookies to improve your browsing experience and serve personalized content. By using our site, you consent to the use of cookies. To find out more, read our cookie policy .

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.

HTML stands for Hyper Text Markup Language. Every website on the internet uses HTML & CSS. Most also use JavaScript.

In a website, HTML is the structure, CSS is the style, and JavaScript is the functionality.

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".

HTML Structure

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:

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:

<a href="https://freecodecamp.com">freeCodeCamp</a>

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:

Like any other good coding language, HTML offers comments. They operate like comments in any other language. They are ignored by the browser engine.

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.

Trivia time!

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.

After you learn HTML, you should learn CSS and JavaScript. I have also created courses on those topics. You can watch them next:

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.

HTML Basics

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.

HTML Templates

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.

HTML References

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!

IMAGES

Simple Practice Task in HTML with examples
Learn HTML table and It's Attributes tutorials and training step by step by Bapu Graphics
Top 7 Hands-on HTML CSS projects for beginners to practice
Simple HTML Code Example
Basic HTML Codes for Beginners
pure-css-to-do-list-with-checkbox

VIDEO

İsrafil Bedir Show 12, Kaynanaların Derdi
Word processor task beginners Links Bookmarks Page break
Oxxxymiron
How to make HTML5 and CSS3 From Scratch Day-01 |HTML & CSS Full Course
İsrafil Bedir Show 1, Sofra Başında
СД

COMMENTS

HTML Exercises
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
10 HTML and CSS Code Challenges for Beginners
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.
HTML Basic
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 »
Learn HTML Basics for Beginners in Just 15 Minutes
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:
HTML For Beginners The Easy Way: Start Learning HTML & CSS Today
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
5 HTML Activities for Beginners: HTML Tutorial
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.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
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.
15 Top HTML Projects For Beginners [With Source Code]
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
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 Interesting HTML Project Ideas & Topics For Beginners [2023]
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 practice HTML & CSS skills for beginners
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...
Test your skills: HTML text basics
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 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.
An Introduction To HTML (Free Tutorial)
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>.
HTML Tutorial for Beginners
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 for Beginners
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
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 ...