homework html tags

Skip to main content
Skip to search
Skip to select language
Sign up for free
English (US)

HTML Cheat Sheet

While using HTML it can be very handy to have an easy way to remember how to use HTML tags properly and how to apply them. MDN provides you with an extended HTML documentation as well as a deep instructional HTML how-to . However, in many cases we just need some quick hints as we go. That's the whole purpose of the cheat sheet, to give you some quick accurate ready to use code snippets for common usages.

Note: HTML tags must be used for their semantic, not their appearance. It's always possible to totally change the look and feel of a given tag using CSS so, when using HTML, take the time to focus on the meaning rather than the appearance.

Inline elements

An "element" is a single part of a webpage. Some elements are large and hold smaller elements like containers. Some elements are small and are "nested" inside larger ones. By default, "inline elements" appear next to one another in a webpage. They take up only as much width as they need in a page and fit together horizontally like words in a sentence or books shelved side-by-side in a row. All inline elements can be placed within the <body> element.

Block elements

"Block elements," on the other hand, take up the entire width of a webpage. They also take up a full line of a webpage; they do not fit together side-by-side. Instead, they stack like paragraphs in an essay or toy blocks in a tower.

Note: Because this cheat sheet is limited to a few elements representing specific structures or having special semantics, the div element is intentionally not included — because the div element doesn't represent anything and doesn't have any special semantics.

Created on November 6, 2016 Updated on September 26, 2021

HTML Content

Document type: <doctype html>, html content: <html>, page info: <head>, tab title: <title>, content: <body>, headings: <h1>, paragraphs: <p>, lists: <ul> and <li>, images: <img>, links: <a>, finding other tags.

Before you start writing HTML, think about webpages for a minute.

Generally, webpages contain different types of content. That content is often different types of text, but it can also be things like links, images, videos, and sound files.

Take a look at a few websites you use. (Or just start with this page!) What types of content do you see? Here are a few things to look for:

Normal text
Lists (like this one!)

What other types of content do you notice?

Let’s say you have two lines of text:

And now you want to show My Website as a heading, and Welcome to as normal text, and my website! as bold.

Welcome to my website !

In a word processor like Microsoft Word or Google Docs, you might highlight each line and then select some formatting options. But if you aren’t using a word processor, how do you specify how to display your content?

The answer is that you can include markup in your text to specify rules about the text’s formatting. This is similar to how you might “mark up” a physical copy of text, for example to correct spelling mistakes with a red pen.

(photo by Jo )

There are many different markup languages . Here are a few examples:

No matter what markup language you’re using, the idea is similar: you add markup to specify options about your content; that markup is used to format the output; but the markup itself is not shown in the output. (That’s what makes it markup and not content!)

Web browsers use a markup language called H yper T ext M arkup L anguage, abbreviated as HTML. Here’s the above example in HTML:

The things in <> angle brackets are called HTML tags , which are markup that tell the web browser how to display content.

As a starting point, here’s an example HTML file:

See the Pen by Happy Coding ( @KevinWorkman ) on CodePen .

Let’s go over these tags one by one.

This line tells your browser that it should treat the rest of the file as HTML. Technically this isn’t an HTML tag, but you should still add it as the very first line in your HTML files. If you don’t, things might not look right.

Similar to the DOCTYPE line, the <html> tag tells the browser that anything inside of it is HTML. Anything between <html> and </html> will be treated as HTML.

The <head> tag contains information that you don’t want to show as content, but is still important for the browser to know.

The <title> tag sets the title of the webpage, which the browser shows as the label of the tab.

The title does not show up in the content of the page, because it’s inside the <head> section.

The <body> tag contains all of the content that will show in your webpage.

The rest of the tags mentioned below should go inside the <body> tag.

The <h1> tag is a heading and is rendered in large bold text on its own line.

There are other heading tags: <h1> is the biggest, <h2> is the second-biggest, down to <h6> which is the smallest.

Content of h1 tag

Content of h2 tag, content of h3 tag, content of h4 tag, content of h5 tag, content of h6 tag.

The <p> tag tells the browser that the content is a paragraph . Any content between an opening <p> tag and a closing </p> tag will be rendered as a block of text. So this:

Is rendered as this:

Space: the final frontier. These are the voyages of the starship Enterprise. Its continuing mission: to explore strange new worlds. To seek out new life and new civilizations. To boldly go where no one has gone before!

You are traveling through another dimension, a dimension not only of sight and sound but of mind. A journey into a wondrous land whose boundaries are that of imagination. Your next stop, the Twilight Zone!

The <p> tag might not seem very important, but HTML ignores whitespace between tags. That makes it hard to split your text up into paragraphs. Try modifying this example to not include the <p> tags to see what I mean. You’ll see that the text gets combined into one big block of text, which makes it harder to read. Use the <p> tag to split your text up into smaller chunks!

The <ul> tag creates an unordered list , which is a list with bullet points in front of each item. The <li> tag is a list item inside that list. For example, this HTML:

Is rendered like this:

The <img> tag lets you add images to your webpage. To use the <img> tag, you need to know the URL of an image file. For example, I know I have an image located here: https://happycoding.io/images/stanley-2.jpg

So I can use it in an <img> tag like this:

Note: You can also use a relative path . For example, if your image file is next to your HTML file, you can use a path like <img src="image.jpg" /> , without the rest of the URL. This is handy if you’re writing HTML using a file on your computer!

The <img> tag is a little different from the other tags you’ve seen so far.

The <img> tag does not have any content.
It also doesn’t have a closing </img> tag. Instead, it has an optional slash / at the end of the tag. This is called a self-closing tag.
Instead of content, it contains an attribute named src that points to the url using the equals sign = followed by the URL inside " " quotation marks.

The internet is made up of a bunch of webpages that all link to each other, forming a web of pages. You can link to another page using the <a> tag.

The <a> tag has an href attribute that points to a URL, and content that specifies the text. The browser shows that text as a link, and when the user clicks it, the browser navigates to the href URL.

For example, this HTML:

Learn more at Happy Coding !

Note: Similar to images, you can also use a relative path for the href attribute. So if you have an HTML file named other-page.html that’s next to the current file, you can use a link like this:

This comes in handy if you’re writing HTML using a file on your computer!

This tutorial introduced a few of the tags you’ll see most often, but there are a TON of other tags. Check out W3Schools or Mozilla Developer Network for a complete list.

When you’re coding, a big part of the process is looking information up and learning more as you need it. Don’t try to memorize every single HTML tag! Instead, get into the habit of searching for tags when you need them, and then reading through documentation to learn more. Experiment, see how it works, and then add it to your code!

For example, let’s say I wanted to highlight a section of my webpage, but I wasn’t sure how to do that. I would search the internet for terms like “html highlight tag” and read through the results. I might find the W3Schools page for the <mark> tag , and I’d read through that and try it out to see how it works. Then I’d write something like this:

And it would display like this:

Some of this text is highlighted!

Being able to search the internet, read documentation, and experiment are all very important skills when you’re writing code. Rather than trying to memorize a bunch of tags, try to practice that process!

Try to use all the tags you’ve learned so far in your webpage. List a few of the things you enjoy, add a picture of your cat, etc.
Look at W3Schools and Mozilla Developer Network to find some other tags. A lot of programming is using resources like these and trying things out. Try to figure out what the <hr> tag does. What does the <details> tag do?

HTML Tags Examples

Check out my basic personal webpage.

Add your own example to Happy Coding.

Happy Coding is a community of folks just like you learning about coding. Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum . This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!

HTML Basics

HTML Web Design Basics
HTML Paragraphs
HTML Headings
HTML Comments
HTML Unordered List
HTML Ordered List
HTML Description List
HTML Line Break
HTML Pre Tag
HTML Horizontal Line

HTML Inline

HTML Block and Inline
HTML Images
HTML Italic
HTML Superscript and Subscript
HTML Formatting
HTML Meta Elements
HTML Favicon
HTML Form Elements
HTML Form Action

Semantic HTML

HTML Semantic HTML
HTML div Tag
HTML aside Tag
HTML section Tag
HTML footer Tag
HTML main Tag
HTML figure and figcaption
HTML Accessibility

HTML, CSS & JavaScript

HTML Layout
HTML Responsive Web Design
HTML and JavaScript

Graphics & Media

HTML Canvas

HTML Miscellaneous

HTML Iframes
HTML Entities
HTML Quotations
HTML File Paths
HTML Emojis
HTML Symbols

HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links.

HTML Hierarchy

HTML elements are hierarchical, which means that they can be nested inside each other to create a tree-like structure of the content on the web page.

This hierarchical structure is called the DOM (Document Object Model), and it is used by the web browser to render the web page. For example,

Browser Output

A simple HTML example to demonstrate hierarchy

In this example, the html element is the root element of the hierarchy and contains two child elements: head and body . The head element, in turn, contains a child element called the title , and the body element contains child elements: h1 and p .

Let's see the meaning of the various elements used in the above example.

<html> : the root element of the DOM, and it contains all of the other elements in the code
<head> : contains metadata about the web page, such as the title and any linked CSS or JavaScript files
<title> : contains the title of the web page, which will be displayed in the web browser's title bar or tab
<body> : contains the main content of the web page, which will be displayed in the web browser's window
<p> : contains the paragraphs of text on the web page
<strong> , <em> : child elements of the <p> elements, they are used to mark text as important and emphasized respectively

Note : Only the elements inside the <body> tag renders in the web browser.

What are HTML elements?

HTML elements consist of several parts, including the opening and closing tags, the content, and the attributes. Here is an explanation of each of these parts:

The opening tag : This consists of the element name, wrapped in angle brackets. It indicates the start of the element and the point at which the element's effects begin.
The closing tag : This is the same as the opening tag, but with a forward slash before the element name. It indicates the end of the element and the point at which the element's effects stop.
The content : This is the content of the element, which can be text, other elements, or a combination of both.
The element: The opening tag, the closing tag, and the content together make up the element.
What are HTML Attributes?

HTML elements can have attributes, which provide additional information about the element. They are specified in the opening tag of the element and take the form of name-value pairs. Let's see an example:

The href is an attribute. It provides the link information about the <a> tag. In the above example,

href - the name of attribute
https://www.programiz.com - the value of attribute

Note : HTML attributes are mostly optional.

HTML Syntax

We need to follow a strict syntax guidelines to write valid HTML code. This includes the use of tags, elements, and attributes, as well as the correct use of indentation and white space. Here are some key points about HTML syntax:

1. HTML tags consist of the element name, wrapped in angle brackets. For example, <h1> , <p> , <img> are some HTML tags.

2. HTML elements are created by enclosing the content of the element inside the opening and closing tags of the element. For example,

is an HTML element.

3. HTML attributes are used to provide additional information about HTML elements and are specified in the opening tag of the element. For example,

Here, target is an attribute.

4. HTML code should be well-formed and properly indented, with each element on its own line and each level of hierarchy indented by one level. This makes the code easier to read and understand, and can help to avoid errors. For example,

HTML All Exercises & Assignments

Write an HTML program to display hello world.

Description: You need to write an HTML program to display hello world on screen.

Hint : You need to type Hello World inside the body tag.

Write a program to create a webpage to print values 1 to 5

Description: Write a program to create a webpage to print values 1 to 5 on the screen.

Hint: Put values inside the body tag.

Write a program to create a webpage to print your city name in red color.

Description: Write a program to create a webpage to print your city name in red color.

Hint: You need to put the city name inside the body tag and use color attribute to provide the color.

Write a program to print a paragraph with different font and color.

Description: Create a webpage to print a paragraph with 4 – 5 sentences. Each sentence should be in a different font and color.

Hint: Put the paragraph content inside the body tag and paragraph should be enclosed in <p> tag.

HTML Exercises Categories
HTML Basics
HTML Top Exercises
HTML Paragraphs

Getting started with HTML

Dave Raggett , revised 24 May 2005.

This is a short introduction to writing HTML. What is HTML? It is a special kind of text document that is used by Web browsers to present text and graphics. The text includes markup tags such as <p> to indicate the start of a paragraph, and </p> to indicate the end of a paragraph. HTML documents are often refered to as "Web pages". The browser retrieves Web pages from Web servers that thanks to the Internet, can be pretty much anywhere in World.

Many people still write HTML by hand using tools such as NotePad on Windows, or TextEdit on the Mac. This guide will get you up and running. Even if you don't intend to edit HTML directly and instead plan to use an HTML editor such as Netscape Composer, or W3C's Amaya, this guide will enable you to understand enough to make better use of such tools and how to make your HTML documents accessible on a wide range of browsers. Once you are comfortable with the basics of authoring HTML, you may want to learn how to add a touch of style using CSS, and to go on to try out features covered in my page on advanced HTML

p.s. a good way to learn is to look at how other people have coded their html pages. To do this, click on the "View" menu and then on "Source". On some browsers, you instead need to click on the "File" menu and then on "View Source". Try it with this page to see how I have applied the ideas I explain below. You will find yourself developing a critical eye as many pages look rather a mess under the hood!

For Mac users, before you can save a file with the ".html" extension, you will need to ensure that your document is formatted as plain text. For TextEdit, you can set this with the "Format" menu's "Make Plain Text" option.

This page will teach you how to:

start with a title
add headings and paragraphs
add emphasis to your text
add links to other pages
use various kinds of lists

If you are looking for something else, try the advanced HTML page.

Start with a title

Every HTML document needs a title. Here is what you need to type:

Change the text from "My first HTML document" to suit your own needs. The title text is preceded by the start tag <title> and ends with the matching end tag </title>. The title should be placed at the beginning of your document.

To try this out, type the above into a text editor and save the file as "test.html", then view the file in a web browser. If the file extension is ".html" or ".htm" then the browser will recognize it as HTML. Most browsers show the title in the window caption bar. With just a title, the browser will show a blank page. Don't worry. The next section will show how to add displayable content.

Add headings and paragraphs

If you have used Microsoft Word, you will be familiar with the built in styles for headings of differing importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.

Here is how to add an important heading:

and here is a slightly less important heading:

Each paragraph you write should start with a <p> tag. The </p> is optional, unlike the end tags for elements like headings. For example:

Adding a bit of emphasis

You can emphasize one or more words with the <em> tag, for instance:

Adding interest to your pages with images

Images can be used to make your Web pages distinctive and greatly help to get your message across. The simple way to add an image is using the <img> tag. Let's assume you have an image file called "peter.jpg" in the same folder/directory as your HTML file. It is 200 pixels wide by 150 pixels high.

The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:

The alt attribute is used to give the short description, in this case "My friend Peter". For complex images, you may need to also give a longer description. Assuming this has been written in the file "peter.html", you can add one as follows using the longdesc attribute:

You can create images in a number of ways, for instance with a digital camera, by scanning an image in, or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files.

Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined.

Adding links to other pages

What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!

Links are defined with the <a> tag. Lets define a link to the page defined in the file "peter.html" in the same folder/directory as the HTML file you are editing:

The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.

If the file you are linking to is in a parent folder/directory, you need to put "../" in front of it, for instance:

If the file you are linking to is in a subdirectory, you need to put the name of the subdirectory followed by a "/" in front of it, for instance:

The use of relative paths allows you to link to a file by walking up and down the tree of directories as needed, for instance:

Which first looks in the parent directory for another directory called "college", and then at a subdirectory of that named "friends" for a file called "john.html".

To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to www.w3.org you need to write:

You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:

This uses "/" to refer to the root of the directory tree, i.e. the home page.

Three kinds of lists

HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list . It uses the <ul> and <li> tags, for instance:

Note that you always need to end the list with the </ul> end tag, but that the </li> is optional and can be left off. The second kind of list is a numbered list, often called an ordered list . It uses the <ol> and <li> tags. For instance:

Like bulletted lists, you always need to end the list with the </ol> end tag, but the </li> end tag is optional and can be left off.

The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance:

The end tags </dt> and </dd> are optional and can be left off. Note that lists can be nested, one within another. For instance:

You can also make use of paragraphs and headings etc. for longer list items.

HTML has a head and a body

If you use your web browser's view source feature (see the View or File menus) you can see the structure of HTML pages. The document generally starts with a declaration of which version of HTML has been used, and is then followed by an <html> tag followed by <head> and at the very end by </html>. The <html> ... </html> acts like a container for the document. The <head> ... </head> contains the title, and information on style sheets and scripts, while the <body> ... </body> contains the markup with the visible content. Here is a template you can copy and paste into your text editor for creating your own pages:

Tidying up your markup

A convenient way to automatically fix markup errors is to use HTML Tidy which also tidies the markup making it easier to read and easier to edit. I recommend you regularly run Tidy over any markup you are editing. Tidy is very effective at cleaning up markup created by authoring tools with sloppy habits. Tidy is available for a wide range of operating systems from the TidyLib Sourceforge site , and has also been integrated into a variety of HTML editing tools.

Getting Further Information

If you are ready to learn more, I have prepared some accompanying material on advanced HTML and adding a touch of style .

W3C's Recommendation for HTML 4.0 is the authoritative specification for HTML. However, it is a technical specification. For a less technical source of information you may want to purchase one of the many books on HTML, for example " Raggett on HTML 4 ", published 1998 by Addison Wesley. " Beginning XHTML " , published 2000 by Wrox Press, which introduces W3C's reformulation of HTML as an application of XML.--> XHTML 1.0 is now a W3C Recommendation.

Best of luck and get writing!

Dave Raggett < [email protected] >

Copyright © 1994-2003 W3C ® ( MIT , ERCIM , Keio ), All Rights Reserved. W3C liability , trademark , document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.

Fun HTML Activities for Beginners

Have you ever wanted to build your own website? Today we’re going to show you some fun HTML activities for beginners to help you get a better understanding of HTML coding and get you started building a site of your very own!

These days, there are lots of cool apps out there that make building a simple website quick and easy. But if you want to build something really cool and unique, knowing how to code in HTML is super important!

Learning HTML is important because the internet was created on and continues to rely heavily on HTML code. Automated WYSIWIG (What you See is What You Get) website editors are helpful but they have their limitations. Fortunately, many automated website editors also have the ability to also use custom HTML code. So, if you want more control of your website, learning how to code HTML for yourself is key!

Find out how to build web pages with HTML and CSS in our award-winning online class, Build Your Web , designed by Google, Stanford, and MIT professionals, and led live by an expert.

Discover HTML activities for beginners with this tutorial for kids

Learning HTML sometimes involves a lot of trial and error. Today’s activities will give you a chance to:

experiment and make mistakes in a safe environment
explore some key HTML concepts

Here are a few fun activities you can try to get your feet wet in the world of HTML coding!

1. Make your first webpage using HTML!

The first thing you need to know is that websites are built using a coding language called HTML. HTML is a coding language that uses tags. Tags are kind of like boxes. There are lots of kinds of boxes that have different “attributes” like color or size and different boxes can be used to hold different things. Some boxes are even used to hold other boxes. When using boxes to hold things in the real world, it’s important to have a bottom and a cover for the box so it works properly and so that things inside the boxes don’t spill out. HTML tags are the same way.

In this first activity we will customize a pre-built web page to make your first web page! To customize this web page and make it your own, we will be customizing an < h1 > tag and a < p > tag. An < h1 > tag is for making a large heading or title section on your page and the < p > tag is for making paragraphs.

Before experimenting with the tags, keep in mind that every tag needs an opening tag and a closing tag. The opening tag is like the top of a box and the closing tag is like the bottom. The opening and closing tags keep everything contained just like the lid and bottom of a box.

For example, the large heading tag starts like this < h > and ends like this </ h >.

Do you see the “/”? This tells the computer that we are closing the heading tag.

Now that you have the basics, click over to this page and start customizing.

Start by changing the words inside the < h1 > tag. You can put something like, “Welcome to my first web page!”
Then, try changing the text in the < p > tag right below your heading. Write a paragraph sharing your favorite outdoor activity. :)
When you’re ready to test your web page, hit the big green button that says “Run”.

Be very careful with the opening and closing tags. If you accidentally erase a “<” or the “/” it may make the page render funny. You have to be very precise with your typing.
HTML doesn’t work the same as a typical text editor like Microsoft Word or Apple Pages or Google Docs. If you press the “Return” button on your keyboard to get a new line, the web browser won’t do as you expect. If you’d like to add a new line after a sentence, you will need to use a line break tag. < br >

So for example if you type this:

The page will render like this:

Hello, I’m Ray. I like to play lacrosse. To render properly, you’ll want to use the line break tag < br > like this:

This will work correctly, too.

2. Dress Up Your Text

In this activity you’ll learn how to make your words in your paragraph stand out by making words bold, or italic , or underlined.

To do this, you will use use the following tags:

< b > for bold text

< i > for italic text

< u > for underlined text

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 :

Remember, whenever you use an HTML tag, don’t forget to use a closing tag to let the computer know when you want the text effect to stop.
You can also NEST tags. For example, what if you wanted some text to be both bold AND italic ? You can insert a tag, followed by another tag, followed by the text you want to decorate, followed by the closing tags like this:

The above code will render like this:

The following text will be both bold and italic .

3. Adding links to your page.

No webpage would be complete without links to other pages, right?! So let’s explore creating links.

To create a tag, we will need to use the anchor tag < a >.

Until now, we have only been using simple container tags. A box is a type of container. The tags we have been using so far have contained text. The anchor tag < a > is also a container tag but it is special because it is the first tag that we have encountered so far that has attributes . Attributes can change the personality or actions that can be applied to and by a tag.

The attributes we will be playing with for the anchor tag are href and target.

href stands for “Hypertext REFerence”. We can use the href attribute to reference another location in the webpage or another webpage.

target is used to specify where the href will be displayed.

Attributes are similar to variables and you can set their value using an equal sign “=”.

As an example:

This code will create a link to the USA Lacrosse website that looks like this:

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.

Be careful with the " symbols. Each attribute should have two. If you forget one, the web browser will get confused.
Also remember to make sure you have matching < and > brackets for all your tags.

4. Exploring RGB Hex Colors

In this activity you’ll learn how to change colors in HTML using RGB Hexadecimal numbers.

Normally, we count from 0-10 and then move on to 11, 12, 13, 14, etc. In hexadecimal, the numbers go from 0 to 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

So for example, A in hex is the same as 10 in decimal. F in hex is the same as 15 in decimal.

Hexadecimal is useful because it allows us to express the same numerical value with fewer digits or characters. 15 in decimal requires 2 digits while saying the same number with “F” uses only one digit.

HTML uses hex numbers to give you very specific control of your colors. Lots of other programs like Adobe Photoshop and other graphics and video programs use hex numbers for colors as well, so learning hex colors is a very useful skill.

You may be wondering, “What is ‘RGB’? What does that mean?”

RGB stands for Red Green Blue. The first two characters in a six character RGB code give the amount of red. The second two give the amount of green. The last two characters give the amount of blue. So if you have the color code FF0000, that is true red. 00FF00 is all green. 0000FF is all blue.

FFFFFF means all the reds, all the greens, and all the blues, which makes white.

000000 means no reds, no greens, and no blues, which makes black.

You can create all kinds of combinations with the numbers to get a very specific color.

Ready to try playing around with RGB hexadecimal colors? Try it here.

Be careful not to get confused with the color attribute code and the label. The numbers you want to change are the numbers connected to this code: “background-color:#ff0000;”
Hit the green “Run” button to run your code
You can reload the page if you mess up and want to start over

5. Adding color to your text

Now that you know how colors are handled in HTML, let's add some more fun and personality to your plain text. Before, we started off by playing around with HEX color codes. These are great if you want complete control over your color choices. But for your convenience, you can ALSO use CSS (Cascading Style Sheet) color keywords to use “pre-mixed” colors. For a complete list of CSS Color Keywords, check out this link .

For most HTML tags, you can use the style attribute to control different tag properties such as color, size, font, font decoration, etc. In fact, this is the PREFERRED way to style your HTML code because it gives you much more flexibility when you decide you want to give your website a new look. In this activity, we will focus on the style attribute to control the color of the text in a heading and a couple paragraphs.

The style attribute can take several “key/value pair” values. The key is the property you want to change and the value tells the browser how to change that property.

This bit of code will render a small heading like this:

Do you see how the key/value pair is entered inside the " " marks? The key is color and the value is red.They are separated by a “:”. If you wanted to add another property to change, you can separate the key/values with a semi-colon “;” like this:

This bit of code will render like this:

Ready to give it a try? Click this link and try changing the colors on the < h3 > heading and the two < p > paragraphs.

If you’d like to play around with more text-decoration properties, you can see more options here .

And here are some other ways you can make your text bold or italic.

Get started with HTML activities for beginners

We hope you enjoyed creating your first webpage with HTML! You now know how tags work, how to create headings and paragraphs, how to make your text fancy, and how to change colors. Want to learn more? Check out our tutorial for learning HTML . And join our award-winning live online, small group Build Your Web class , designed by professionals from Google, Stanford, and MIT.

Written by Ray Regno, who earned his B.S. in Computer Science at the University of California San Diego in 2003. Only two years after graduation, Ray left his career as a software engineer to pursue his true passion: inspiring and educating others. For almost two decades Ray has taught students of all ages a wide variety of topics and disciplines including coding, fitness, music, automotive repair, and leadership development.

You Might Also Like...

Java Tutorial for Beginners

Kids Learn HTML: The Getting Started Guide

HTML for Beginners – How to Get Started with Web Development Basics

Have you always been interested in learning HTML but didn't know where or how to start? Well, this guide is for you.

In it, we will look at:

An introduction to HTML

A Brief History of HTML

Why learn html.

Prerequisites for learning HTML
A simple HTML page
How to get started with HTML

Introduction to HTML

HTML is an abbreviation for HyperText Markup Language.

This acronym is composed of two main parts: HyperText and Markup Language.

What does “HyperText” mean?

HyperText refers to the hyperlinks or simply links that an HTML page may contain. A HyperText can contain a link to a website, web content, or a web page.

What is a “Markup language”?

A markup language is a computer language that consists of easily understood keywords, names, or tags that help format the overall view of a page and the data it contains. In other words, it refers to the way tags are used to define the page layout and elements within the page.

Since we now know what HyperText and Markup Language mean, we can also understand what these terms mean when put together.

What is HTML?

HTML or HyperText Markup Language is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser.

HTML consists of a series of elements that tell the browser how to display the content. These elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", and so on. They usually have opening and closing tags that surround and give meaning to each piece of content.

There are different tag options you can use to wrap text to show whether the text is a heading, a paragraph, or a list. Tags look like <h1> (opening tag) and </h1> (closing tag).

Let's see some other examples:

The first version of HTML was written in 1993; since then, many different versions of HTML have been released, allowing developers to create interactive web pages with animated images, sound, and gimmicks of all kinds.

The most widely used version throughout the 2000's was HTML 4.01, which became an official standard in December 1999.

Another version, XHTML, was a rewrite of HTML as an XML language.

In 2014, HTML5 was released, and it took over from previous versions of HTML. This version includes new elements and capabilities added to the language. These new features allow you to create more powerful and complex websites and web apps, while keeping the code easier to read.

HTML is the foundation of all web pages. Without HTML, you would not be able to organize text or add images or videos to your web pages. HTML is the root of everything you need to know to create great-looking web pages!

As the name suggests, hypertext refers to cross-referencing (or linking) between different related sections or webpages on the world-wide-web.

HyperText mark-up language is a standard mark-up language that allows developers to structure, link, and present webpages on the world-wide-web. So it is important to know the structure and layout of the website that you would like to build.

Prerequisites for Learning HTML

HTML is a relatively easy language and does not require any formal education. So basically, there are no prerequisites for learning it.

HTML is text-based computer coding, and anyone can learn and run it, as long as they understand letters and basic symbols. So, all you need is basic computer knowledge and the ability to work with files.

Of course, any knowledge of other programming languages will enhance your abilities with HTML and web development, but this is not a prerequisite for learning HMTL.

What a Simple HTML Page Looks Like

Alright let's see what's going on here:

Note: In HTML, an opening tag begins a section of page content, and a closing tag ends it.

For example, to markup a section of text as a paragraph, you would open the paragraph with an opening paragraph tag, which is "<p>", and close it with a closing paragraph tag, which is "</p>".

In closing tags, the element is always preceded by a forward slash ("/").

How to Get Started with HTML

There are many different online resources that can help you learn HTML. I recommend the following ones:

freeCodecamp : an interactive and free learning platform that aims to make learning web development possible for anyone. This platform has well-structured content, good exercises to help you grasp the concept, and a supportive community that can help you in case of any difficulties during the course.
W3Schools : a learning platform that covers all the aspects of web development. It explains HTML tags in a very understandable and in-depth way, which also makes it easier to learn how to use them well.

Learning some of the basics of HTML may not take much time for some people. But getting really good at HTML, like any skill, definitely takes time. You might be able to grasp the basic HTML tags in a few hours, but make sure to take the time to learn how to properly work with them.

My name is Patrick Cyubahiro, I am a software & web developer, UI/UX designer, technical writer, and Community Builder.

I hope you enjoyed reading this article; and if it was helpful to you, feel free to let me know on Twitter: @ Pat_Cyubahiro or via email: ampatrickcyubahiro[at]gmail.com

Thanks for reading and happy learning!

Community Builder, Software & web developer, UI/IX Designer, Technical Writer.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Basic Links

Inter-document links, specifying a point in a document.

This attribute is used as a courtesy to those who cannot see graphics for various reasons. Keep the description brief but make sure it is a good description of the graphic. The text will appear if the user has graphics turned off on their browser or if they are using a web page reader for the blind.

These two attributes should be used to specify the actual size of a graphic. This allows the webpage to load more quickly. They can also be used to display a smaller version of the graphic. Be aware that this does not change the size or download time of the graphic. It should be used with care.

These two attributes put a buffer around the graphic. A value of "5" is useful when you have text and graphics butted up against each other. Hspace defines the buffer horizontally and vspace defines the buffer vertically.

This is the most complicated attribute for graphics. It is used to specify how text and graphics will line up with each other. Small graphics that are included in a block of text use the first three attributes (top, middle, bottom) to specify how the text will line up with them. Example: Top Middle Bottom Many times, one will want to wrap text around graphics. This is done using the last two align attributes: Left Left Left Left Right Right Right Right

For more information on HTML Tags, visit the Bare Bones Guide to HTML (http://werbach.com/barebones/barebone.html) .

HTML Lab Assignments

HTML Assignment and HTML Examples for Practice

Text formatting, working with image, working with link.

Lesson 1 Website building blocks

Curriculum > KS3 > Unit > Lesson

We use web pages every day without questioning how they work. This lesson looks behind the curtain to help learners start to understand how web pages are constructed using HTML tags, and how they can be modified to start to resemble the websites they are accustomed to. Learners will begin by considering the power of automation for repetitive tasks, before delving into some practical web page formatting activities using HTML tags. Firstly, they will practise formatting sections of text to improve readability. Learners will then modify tags to change their appearance in a document, to make them different from the defaults provided.

Learning objectives

Describe what HTML is
Use HTML to structure static web pages
Modify HTML tags using inline styling to improve the appearance of web pages

Package contents

Lesson plans
Learning graphs
Unit overviews

Not registered yet?

Create an account and get access to over 500 hours of free teaching resources.

Help us make these resources better

Or email us at [email protected]

Public health alumna Caitlin Sharkey brings her homework into the real world

Sarah Boudreau
Share on Facebook
Share on Twitter
Copy address link to clipboard

As health administrator at the Bradley Free Clinic in Roanoke, Caitlin Sharkey, who earned her Master of Public Health in 2023, puts her education into practice every day — literally.

What started as an assignment has become part of the clinic’s standard operating procedure as Sharkey adapted a project she completed as part of her master's degree into an infection control plan.

The Master of Public Health (MPH) program is housed within the Virginia-Maryland College of Veterinary Medicine , which emphasizes a One Health framework. One Health is the principle that human, environmental, and animal health are inextricably linked.

As part of her Infection Prevention and Control class, Audrey Ruple , associate professor of quantitative epidemiology and Metcalf Professor of Veterinary Medical Informatics, asked her students to create an infection control plan for a setting of their choice.

Sharkey chose the Bradley Free Clinic, where she’s been involved since she began an internship in January 2020 as a public health major at Roanoke College.

Founded in 1974, the Bradley Free Clinic provides free medical, dental, behavioral health, and pharmacy services in the Roanoke Valley. Health care professionals volunteer to provide services to people with low income, no insurance, or with Medicaid, and a large portion of the clinic’s patients are refugees and immigrants.

Fast-forward to early 2023, and, as a newly minted health administrator, Sharkey was in the process of updating the clinic’s standard operating procedures for the new year. She discovered the infection control plan was minimal and needed substantial revision.

"Throughout the clinic, this plan is the standard for infection prevention and control of bloodborne and airborne pathogens,” Sharkey said. “In the population we serve, we have many patients who have hepatitis C and HIV, so it's very important to not only have the proper precautions in place to prevent infection, but also to know what to do in case there is an exposure.”

Sometimes, the worst-case scenario actually happens. The infection control plan came into play last summer, when a student volunteer was injured by a used needle. Thanks to Sharkey’s plan, clinic staff had clear and specific guidelines to follow. Both student and patient received immediate testing, and the student was referred to a local hospital to receive post-exposure prophylaxis to prevent contracting HIV.

"Principles of Infectious Disease is where I learned about all of these disease states, and Infection Prevention and Control is where I learned what you do when exposure happens — every class I took in my two years of the MPH went into this infection control plan,” said Sharkey.

As health administrator at the clinic, Sharkey wears many hats. She handles scheduling and onboarding for about 300 volunteers, including students from the clinic’s partnerships with the Virginia Tech Carilion School of Medicine , Virginia Commonwealth University School of Dentistry, and Virginia Western Community College. She’s responsible for compliance with Medicaid, the Occupational Safety and Health Administration, privacy rules, and local, state, and federal laws. She also manages the clinic’s electronic health records and IT needs.

She applies her lessons from her Master of Public Health to multiple facets of her job, including, for example, the ability perform a more robust analysis of the data for grant writing and state reporting purposes.

One major focus of the degree program is the social determinants of health, which are nonmedical factors that influence health, such as poverty, housing and food security, and employment. Over recent years, the Bradley Free Clinic has shifted to include social determinants of health when treating patients. For example, the clinic uses a recent grant to provide patients with rideshare transportation for appointments, grocery trips, and more. Sharkey said this approach looks at “the whole person.”

“Nobody's worried about what their A1C [blood sugar level] is if they don't know when their next meal is going to be,” Sharkey said. “They're not worrying about eating something healthy — they're just making sure they have something to eat. Addressing those issues is the first step in being able to take care of the patient in the manner that they need.”

In her work at the Bradley Free Clinic, Sharkey lives the Virginia Tech motto, Ut Prosim (That I May Serve).

When the pandemic hit the United States in spring 2020, Sharkey was an intern at the clinic. She rolled up her sleeves and got to work screening patients and providing testing in a tent outside the building. Through the hard work of volunteers like Sharkey, the clinic never closed its doors.

When the COVID-19 vaccine became readily available, the clinic was awarded a grant to provide free vaccines regardless of insurance status. Sharkey was named COVID vaccine director, promoting the vaccine, educating patients on its efficacy, and reporting vaccination numbers to state authorities.

Sharkey had previously intended to become a physician assistant, but after interning at the clinic, she realized her passion was in administration. To take on more responsibility at the clinic and pursue a career in administration, she would need a graduate degree. Hannah Menefee, the public health program coordinator at the time, visited Sharkey’s class at Roanoke College to talk about the Master of Public Health program, and Sharkey applied the next day.

When Sharkey entered the program, she discovered a passionate — and compassionate — learning environment.

"My professors really cared about public health,” Sharkey said. “They didn't care about memorizing things for a test, they wanted to create people who cared about public health and were going into the community to make a difference when we left."

Andrew Mann

540-231-9005

Infection and Immunology
Population Health Sciences
Public Health
Public Health Graduate Program
Quality Education
Reduce Inequalities
Roanoke, Va.
Sustainable Cities and Communities
Top News - Virginia-Maryland College of Veterinary Medicine
Virginia Tech Carilion School of Medicine
Virginia-Maryland College of Veterinary Medicine
Young Alumni

Things on Sale

Everything Worth Buying From Sephora’s Savings Event Everything Worth Buying From Sephora’s S…
24 Things on Sale to Buy: From Brooklinen to Sandy Liang 24 Things on Sale to Buy: From Brookline…
This Brightening Vitamin-C Serum Is Just $14 This Brightening Vitamin-C Serum Is Just…
12 Things on Sale You’ll Want to Buy: From Merrell to Parade 12 Things on Sale You’ll Want to Buy: Fr…
Our Favorite Foot Mask Is $13 Our Favorite Foot Mask Is $13
12 Things on Sale You’ll Want: From Anthropologie to iRobot 12 Things on Sale You’ll Want: From Anth…
Our Favorite Compact Water Flosser Is 30 Percent Off Our Favorite Compact Water Flosser Is 30…
13 Things on Sale You’ll Want to Buy: From Kosas to Madewell 13 Things on Sale You’ll Want to Buy: Fr…
This Vegan Protein Powder Is 40 Percent Off Right Now This Vegan Protein Powder Is 40 Percent…
13 Things on Sale You’ll Want: From Le Creuset to Iittala 13 Things on Sale You’ll Want: From Le C…
Everything Worth Buying From Sephora’s Savings Event

It’s that time of year when Beauty Insiders everywhere get the chance to score big during the Sephora Savings Event . And I, for one, have been waiting for weeks to snap up some of my favorite rarely on-sale products from brands like Rare Beauty , Summer Fridays , Ilia , and even Dyson .

Before you start shopping, here’s a reminder of how the sale works: Starting today, Rouge members (those spending upward of $1,000 per year) can receive 20 percent off their entire purchase. Starting on April 9, VIB members (those who’ve spent at least $350) and Insider members (all other members) will earn 15 percent and 10 percent off, respectively. And finally, everyone can save 30 percent on Sephora Collection products until April 15 — no account necessary.

To unlock your discount, use the code YAYSAVE at checkout (there’s no limit to how many purchases you can make using the code throughout the sale). As you scroll on below, you’ll notice that I’ve applied the 20 percent Rogue discount to all of the items here. Next week, I’ll be back to update this post with more Strategist-approved products — but until then, here’s a list of all the very best deals I’ve spotted.

If your post-winter hands are feeling dry and scaly, our writer and resident beauty expert Tembe Denton-Hurst says nothing compares to Nécessaire’s “practically perfect” cream . It’s deeply moisturizing, and leaves her hands with a “subtle sheen without going greasy.”

First Aid Beauty Ultra Repair Hydra-Firm Night Cream

Speaking of creams, here’s one of our favorite night creams that’s paraben-free and noncomedogenic, meaning it’s safe for sensitive skin and acne-prone skin.

Merit Clean Lash Lengthening Tubing Mascara

There’s no better time to trade your old mascara for a tubing formula such as Merit’s Clean Lash. It won’t smudge or flake, and our writer Kitty Guo says it’s her pick for an everyday “your lashes but better” look.

If you’re already a fan of the vanilla lip balm from Summer Fridays, go for this tinted shade that Denton-Hurst — a self-proclaimed “ lip-balm aficionado” — always carries with her.

Our beauty columnist Rio Viera-Newton swears by this Banana Bright+ Eye Cream to banish dark under-eye circles. (She also loves to use it to help under-eye concealer stay put for longer.)

Hyper Skin Brightening Clearing Vitamin C Serum

Another brightening treatment is Hyper Skin’s vitamin-C serum, which is designed to rapidly fade dark spots. After five months of using this formulation, Denton-Hurst says she noticed less hyperpigmentation on her skin, particularly around her chin.

We found Rare Beauty’s liquid blush to be the most buildable in our roundup of the best in the category. It’s available in two finishes (matte and radiant) and ten shades, which can even be applied as an eyeshadow or lip tint.

Thanks to its moringa and jojoba seed oil-packed formula, Verb’s Ghost conditioner moisturizes, detangles, and smoothes hair after a single wash. It also “doesn’t weigh down your hair whatsoever,” says our writer Rachael Griffiths , who adds that it’s suitable for all hair types.

Sephora Collection Best Skin Ever Full Coverage Multi-Use Concealer

When we spoke to Sephora employees about what TikTok-recommended products are actually worth it, they told us about this dupe for Tarte’s Shape Tape. And when our writer Arielle Avila tried it for herself, she reported that it’s actually better: “It’s long-lasting and buildable, and it keeps my under eyes hydrated and glowing,” she says.

Kulfi Free The Brow Volumizing & Laminating Brow Gel

I wrote about Kulfi’s non-flakey brow gel-slash-serum in this week’s edition of our Beauty Brief newsletter. The formula makes my brows look like I just left a lamination appointment, meaning they’re ultrafeathery yet more defined. (Fair warning: It tends to sell out quickly, so I’d snag one ASAP.)

Last year, Avila swapped her old aerosol dry shampoo for Crown Affair’s talc-free formula and never looked back. “I’m able to go days after washing my hair without an oily or irritated scalp,” she says.

Danessa Myricks Beauty Yummy Skin Blurring Balm Powder Flushed

After testing over 20 cream blushes to find one that actually lasts, Rio crowned this formula the winner. She says the high pigment, in conjunction with the soft, powdery finish, is what makes this Danessa Myricks blush really stick to the skin.

I own our best overall humidifier from Canopy and don’t go a day without using it. It’s compact, easy to clean, and keeps my complexion super hydrated.

First Aid Beauty KP Bump Eraser Body Scrub With 10% AHA

In my new roundup of the best body scrubs , I crowned this my top choice for treating keratosis pilaris . It contains tiny pumice buffing beads that work to brush away dead skin cells, so it also works for clearing up buttne ( butt acne ) and loosening ingrown hairs.

Shark FlexStyle Air-Drying & Styling System, Powerful Hair Blow-Dryer, and Multi-Styler

Last but not least, I’ve got my eye on Shark’s powerful blow-dryer brush . It’s half the price of Dyson’s Airwrap and utilizes the same high-speed airflow technology and variety of attachments.

The Strategist is designed to surface the most useful, expert recommendations for things to buy across the vast e-commerce landscape. Some of our latest conquests include the best acne treatments , rolling luggage , pillows for side sleepers , natural anxiety remedies , and bath towels . We update links when possible, but note that deals can expire and all prices are subject to change.

the strategist
micro sales
sales sales sales

Every product is independently selected by (obsessive) editors. Things you buy through our links may earn us a commission.

Deal of the Day

Greatest hits, most viewed stories.

How to Watch the Solar Eclipse Without Burning Your Eyes
The Very Best Body Washes for Dry Skin
24 Things on Sale You’ll Actually Want to Buy: From Brooklinen to Sandy Liang
What Jimmy Butler Can’t Live Without

Shop with Google

2024 WWE Hall of Fame: Thunderbolt Patterson, Lonnie Ali get their due

PHILADELPHIA — Paul Heyman. Bull Nakano. Thunderbolt Patterson. The U.S. Express. Lia Maivia. Muhammad Ali.

All were immortalized into wrestling history as they were inducted into the 2024 WWE Hall of Fame class on Friday, one of the most honorable achievements in the business. It's already been an emotional night filled with laughs, tears and quite the amount of expletives. But there's still several stars set to take their place among the greats of wrestling. The Hall of Fame ceremony is the perfect way to get WrestleMania weekend going.

Here are the highlights from the 2024 WWE Hall of Fame ceremony:

Paul Heyman gets emotional, drops an F-bomb

It's rare to see the Undisputed WWE Universal Champion Roman Reigns show his softer side, but the "Tribal Chief" opened up about his perspective on Paul Heyman. Reigns shared a story of when Heyman told him that he didn't need him to succeed, he just needed to believe he could do it. Still, Reigns had to acknowledge what he did for his rise to the top.

"The Tribal Chief doesn't happen if I'm not with The Wiseman," Reigns said .

Heyman came out to his old-school ECW theme and the crowd erupted in an ECW chant, while he hugged some of the former ECW stars who helped him make the promotion a success decades ago. Heyman soaked it all in, getting teary eyed before he even said a word. The crowd chanted "you deserve it," then he dropped one of the best F-bombs in WWE history.

"You're damn right I (expletive) deserve it," he said.

Heyman gave credit to WWE chief content officer Paul "Triple H" Levesque for leading the company, but also took a dig at him by telling his wife, Stephanie McMahon, she "married the wrong Paul."

Even though Heyman is in the middle of a feud with Cody Rhodes, as he thought about the people that he wished to be here, he turned to Rhodes and said, "I so wish your father was here tonight." Both had tears in their eyes.

Paul Heyman rocks old ECW gear

After getting through the "mushy" stuff, Heyman then said it was time to acknowledge ECW, and it was then when he whipped out his coat, headset and hat that was his signature look when he ran the promotion.

Heyman then went on a profanity-filled promo that was filled with giving himself his flowers, and he finished by saying he will continue to disrupt the industry and he's not going anywhere.

Bull Nakano rocks signature face paint

The polarizing Japanese star Bull Nakano came out to receive her honor in her signature blue face paint, and said it was a moment that she had hoped would happen one day.

“I have waited a long time," she said.

The Undertaker inducts Muhammad Ali; wife Lonnie Ali gifts The Rock a title

Only one of the greatest in wrestling could induct one of the greatest in boxing.

The Undertaker made his electric entrance to induct Muhammad Ali and welcome Ali's wife, Lonnie, to accept the award.

Ali told the story of how The Rock had asked her husband if he could use "The People's Champ" nickname. She said the great boxer was thrilled and wanted him to use it. To pay it back, Ali presented The Rock with an actual championship belt.

Rotunda family honors late brother Bray Wyatt

With Mike Rotunda and Barry Windham inducted into the Hall of Fame, the Rotunda children, Mika and Taylor, better known as Bo Dallas, honored the tag team.

But Mika and Taylor made sure to recognize their brother Windham, known as Bray Wyatt, who died in August. As they spoke about feeling their brother's presence, the crowd lit up the arena with the fireflies that were always associated with Wyatt.

The U.S. Express also paid tribute to their fallen family member, lighting up the fireflies at the end of their speech as Wyatt's entrance music played throughout the arena.

Thunderbolt Patterson gets long deserved recognition

Thunderbolt Patterson received a warm welcome from the WWE Universe, earning his rightful place in wrestling history.

A pioneer in creating promos, his impact on professional wrestling is still felt today, evidenced by The New Day, which inducted him 31 years after his last television appearance. On Friday it felt like he never had left the ring. Patterson, who dealt with racism throughout the prime of his career, conducted an emphatic prayer with the crowd.

The Rock honors his grandmother

Lia Maivia took her place in the WWE Hall of Fame, posthumously inducted by her grandson, The Rock.

There was a quick stare down between The Rock and Rhodes, but The Rock turned the attention back to his family, and promised to take care of business at WrestleMania in their honor.

"I love you grandma, thank you so much," The Rock said to close out the show.

HTML Tutorial

Html graphics, html examples, html references.

HTML lists allow web developers to group a set of related items in lists.

An unordered HTML list:

An ordered HTML list:

Second item
Fourth item

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Try it Yourself »

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

HTML Exercises

Test yourself with exercises.

Add a list item with the text "Coffee" inside the <ul> element.

Start the Exercise

HTML List Tags

For a complete list of all available HTML tags, visit our HTML Tag Reference .

Video: HTML Lists

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]