html basic assignment pdf

The HTML Handbook – Learn HTML for Beginners

Introduction

Welcome! I wrote this book to help you quickly learn HTML and get familiar with the advanced HTML topics.

HTML, a shorthand for Hyper Text Markup Language, is one of the most fundamental building blocks of the Web.

HTML was officially born in 1993 and since then it evolved into its current state, moving from simple text documents to powering rich Web Applications.

This handbook is aimed at a vast audience.

First, the beginner. I explain HTML from zero in a succinct but comprehensive way, so you can use this book to learn HTML from the basics.

Then, the professional. HTML is often considered like a secondary thing to learn. It might be given for granted.

Yet lots of things are obscure to many people. Me included. I wrote this handbook to help my understanding of the topic, because when I need to explain something, I better make sure I first know the thing inside out.

Even if you don't write HTML in your day to day work, knowing how HTML works can help save you some headaches when you need to understand it from time to time, for example while tweaking a web page.

You can reach me on Twitter @flaviocopes .

My website is flaviocopes.com .

Note: you can download a PDF / ePub / Mobi version of this book so you can read it offline.

• HTML Basics
• The document heading
• The document body
• Tags that interact with text
• Container tags and page structure HTML
• Multimedia tags: audio and video
• Accessibility

HTML is the foundation of the marvel called the Web.

There is an incredible power underneath this rather simple and limited set of rules, which lets us -- developers, makers, designers, writers, and tinkerers -- craft documents, apps, and experiences for people all around the globe.

My first HTML book came out in 1997 and was called "HTML Unleashed". A big, lots-of-pages, long tome.

20+ years have passed, and HTML is still the foundation of the Web, with minimal changes from back then.

Sure, we got more semantic tags, presentational HTML is no longer a thing, and CSS has taken care of the design of things.

HTML's success is based on one thing: simplicity .

It resisted being hijacked into an XML dialect via XHTML, when eventually people realized that thing was way, way too complex.

It did so because of another feature it provides us: forgiveness . There are some rules, right, but after you learn those, you have a lot of freedom.

Browsers learned to be resilient and to always try to do their best when parsing and presenting HTML to the users.

And the whole Web platform did one thing right: it never broke backward compatibility. Pretty incredibly, we can go back to HTML documents written in 1991, and they look pretty much as they looked back then.

We even know what the first web page was. It's this: http://info.cern.ch/hypertext/WWW/TheProject.html

And you can see the source of the page, thanks to another big feature of the Web and HTML: we can inspect the HTML of any web page .

Don't take this for granted. I don't know any other platform that gives us this ability.

The exceptional Developer Tools built into any browser let us inspect and take inspiration from HTML written by anyone in the world.

If you are new to HTML this book aims to help you get started. If you are a seasoned Web Developer this book will improve your knowledge.

I learned so much while writing it, even though I've been working with the Web for 20+ years, and I'm sure you'll find something new, too.

Or you'll re-learn something old you forgot.

In any case, the goal of the book is to be useful to you, and I hope it succeeds.

HTML BASICS

HTML is a standard defined by the WHATWG , an acronym for Web Hypertext Application Technology Working Group, an organization formed by people working on the most popular web browser. This means it's basically controlled by Google, Mozilla, Apple and Microsoft.

In the past the W3C (World Wide Web Consortium) was the organization in charge of creating the HTML standard.

The control informally moved from W3C to WHATWG when it became clear that the W3C push towards XHTML was not a good idea.

If you've never heard of XHTML, here's a short story. In the early 2000s, we all believed the future of the Web was XML (seriously). So HTML moved from being an SGML-based authoring language to an XML markup language.

It was a big change. We had to know, and respect, more rules. Stricter rules.

Eventually browser vendors realized this was not the right path for the Web, and they pushed back, creating what is now known as HTML5.

W3C did not really agree on giving up control of HTML, and for years we had 2 competing standards, each one aiming to be the official one. Eventually on 28 May 2019 it was made official by W3C that the "true" HTML version was the one published by WHATWG.

I mentioned HTML5. Let me explain this little story. I know, it's kind of confusing up to now, as with many things in life when many actors are involved, yet it's also fascinating.

We had HTML version 1 in 1993. Here's the original RFC .

HTML 2 followed in 1995.

We got HTML 3 in January 1997, and HTML 4 in December 1997.

Busy times!

20+ years went by, we had this entire XHTML thing, and eventually we got to this HTML5 "thing", which is not really just HTML any more.

HTML5 is a term that now defines a whole set of technologies, which includes HTML but adds a lot of APIs and standards like WebGL, SVG and more.

The key thing to understand here is this: there is no such thing (any more) as an HTML version now. It's a living standard. Like CSS, which is called "3", but in reality is a bunch of independent modules developed separately. Like JavaScript, where we have one new edition each year, but nowadays, the only thing that matters is which individual features are implemented by the engine.

Yes we call it HTML5, but HTML4 is from 1997. That's a long time for anything, let alone for the web.

This is where the standard now "lives": https://html.spec.whatwg.org/multipage .

HTML is the markup language we use to structure content that we consume on the Web.

HTML is served to the browser in different ways.

• It can be generated by a server-side application that builds it depending on the request or the session data, for example a Rails or Laravel or Django application.
• It can be generated by a JavaScript client-side application that generates HTML on the fly.
• In the simplest case, it can be stored in a file and served to the browser by a Web server.

Let's dive into this last case. Although in practice it's probably the least popular way to generate HTML, it's still essential to know the basic building blocks.

By convention, an HTML file is saved with a .html or .htm extension.

Inside this file, we organize the content using tags .

Tags wrap the content, and each tag gives a special meaning to the text it wraps.

Let's make a few examples.

This HTML snippet creates a paragraph using the p tag:

This HTML snippet creates a list of items using the ul tag, which means unordered list , and the li tags, which mean list item :

When an HTML page is served by the browser, the tags are interpreted, and the browser renders the elements according to the rules that define their visual appearance.

Some of those rules are built-in, such as how a list renders or how a link is underlined in blue.

Some other rules are set by you with CSS.

HTML is not presentational. It's not concerned with how things look . Instead, it's concerned with what things mean .

It's up to the browser to determine how things look, with the directives defined by who builds the page, with the CSS language.

Now, those two examples I made are HTML snippets taken outside of a page context.

HTML page structure

Let's make an example of a proper HTML page.

Things start with the Document Type Declaration (aka doctype ), a way to tell the browser this is an HTML page, and which version of HTML we are using.

Modern HTML uses this doctype:

Then we have the html element, which has an opening and closing tag:

Most tags come in pairs with an opening tag and a closing tag. The closing tag is written the same as the opening tag, but with a / :

There are a few self-closing tags, which means they don't need a separate closing tag as they don't contain anything in them .

The html starting tag is used at the beginning of the document, right after the document type declaration.

The html ending tag is the last thing present in an HTML document.

Inside the html element we have 2 elements: head and body :

Inside head we will have tags that are essential to creating a web page, like the title, the metadata, and internal or external CSS and JavaScript. Mostly things that do not directly appear on the page, but only help the browser (or bots like the Google search bot) display it properly.

Inside body we will have the content of the page. The visible stuff .

Tags vs elements

I mentioned tags and elements. What's the difference?

Elements have a starting tag and a closing tag. In this example, we use the p starting and closing tags to create a p element:

So, an element constitutes the whole package :

• starting tag
• text content (and possibly other elements)
• closing tag

If an element has doesn't have a closing tag, it is only written with the starting tag, and it cannot contain any text content.

That said, I might use the tag or element term in the book meaning the same thing, except if I explicitly mention starting tag or ending tag.

The starting tag of an element can have special snippets of information we can attach, called attributes .

Attributes have the key="value" syntax:

You can also use single quotes, but using double quotes in HTML is a nice convention.

We can have many of them:

and some attributes are boolean, meaning you only need the key:

The class and id attributes are two of the most common you will find used.

They have a special meaning, and they are useful both in CSS and JavaScript.

The difference between the two is that an id is unique in the context of a web page; it cannot be duplicated.

Classes, on the other hand, can appear multiple times on multiple elements.

Plus, an id is just one value. class can hold multiple values, separated by a space:

It's common to use the dash - to separate words in a class value, but it's just a convention.

Those are just two of the possible attributes you can have. Some attributes are only used for one tag. They are highly specialized.

Other attributes can be used in a more general way. You just saw id and class , but we have other ones too, like style which can be used to insert inline CSS rules on an element.

Case insensitive

HTML is case insensitive. Tags can be written in all caps, or lowercase. In the early days, caps were the norm. Today lowercase is the norm. It is a convention.

You usually write like this:

not like this:

White space

Pretty important. In HTML, even if you add multiple white spaces into a line, it's collapsed by the browser's CSS engine.

For example the rendering of this paragraph:

is the same as this:

and the same as this:

> Using the white-space CSS property you can change how things behave. You can find more information on how CSS processes white space in the CSS Spec

I typically favor

Nested tags should be indented with 2 or 4 characters, depending on your preference:

Note: this "white space is not relevant" feature means that if you want to add additional space, it can make you pretty mad. I suggest you use CSS to make more space when needed.

Note: in special cases, you can use the   HTML entity (an acronym that means non-breaking space ) - more on HTML entities later on. I think this should not be abused. CSS is always preferred to alter the visual presentation.

THE DOCUMENT HEADING

The head tag contains special tags that define the document properties.

It's always written before the body tag, right after the opening html tag:

We never use attributes on this tag. And we don't write content in it.

It's just a container for other tags. Inside it we can have a wide variety of tags, depending on what you need to do:

The title tag

The title tag determines the page title. The title is displayed in the browser, and it's especially important as it's one of the key factors for Search Engine Optimization (SEO).

The script tag

This tag is used to add JavaScript into the page.

You can include it inline, using an opening tag, the JavaScript code and then the closing tag:

Or you can load an external JavaScript file by using the src attribute:

The type attribute by default is set to text/javascript , so it's completely optional.

There is something pretty important to know about this tag.

Sometimes this tag is used at the bottom of the page, just before the closing </body> tag. Why? For performance reasons.

Loading scripts by default blocks the rendering of the page until the script is parsed and loaded.

By putting it at the bottom of the page, the script is loaded and executed after the whole page is already parsed and loaded, giving a better experience to the user over keeping it in the head tag.

My opinion is that this is now bad practice. Let script live in the head tag.

In modern JavaScript we have an alternative this is more performant than keeping the script at the bottom of the page -- the defer attribute. This is an example that loads a file.js file, relative to the current URL:

This is the scenario that triggers the faster path to a fast-loading page, and fast-loading JavaScript.

Note: the async attribute is similar, but in my opinion a worse option than defer . I describe why, in more detail, on page https://flaviocopes.com/javascript-async-defer/

The noscript tag

This tag is used to detect when scripts are disabled in the browser.

Note: users can choose to disable JavaScript scripts in the browser settings. Or the browser might not support them by default.

It is used differently depending on whether it's put in the document head or in the document body.

We're talking about the document head now, so let's first introduce this usage.

In this case, the noscript tag can only contain other tags:

to alter the resources served by the page, or the meta information, if scripts are disabled.

In this example I set an element with the no-script-alert class to display if scripts are disabled, as it was display: none by default:

Let's solve the other case: if put in the body, it can contain content, like paragraphs and other tags, which are rendered in the UI.

The link tag

The link tag is used to set relationships between a document and other resources.

It's mainly used to link an external CSS file to be loaded.

This element has no closing tag.

The media attribute allows the loading of different stylesheets depending on the device capabilities:

We can also link to resources other than stylesheets.

For example we can associate an RSS feed using

Or we can associate a favicon using:

This tag was also used for multi-page content, to indicate the previous and next page using rel="prev" and rel="next" . Mostly for Google. As of 2019, Google announced it does not use this tag any more because it can find the correct page structure without it.

The style tag

This tag can be used to add styles into the document, rather than loading an external stylesheet.

As with the link tag, you can use the media attribute to use that CSS only on the specified medium:

The base tag

This tag is used to set a base URL for all relative URLs contained in the page.

The meta tag

Meta tags perform a variety of tasks and they are very, very important.

Especially for SEO.

meta elements only have the starting tag.

The most basic one is the description meta tag:

This might be used by Google to generate the page description in its result pages, if it finds it better describes the page than the on-page content (don't ask me how).

The charset meta tag is used to set the page character encoding. utf-8 in most cases:

The robots meta tag instructs the Search Engine bots whether to index a page or not:

Or if they should follow links or not:

You can set nofollow on individual links, too. This is how you can set nofollow globally.

You can combine them:

The default behavior is index, follow .

You can use other properties, including nosnippet , noarchive , noimageindex and more.

You can also just tell Google instead of targeting all search engines:

And other search engines might have their own meta tag, too.

Speaking of which, we can tell Google to disable some features. This prevents the translate functionality in the search engine results:

The viewport meta tag is used to tell the browser to set the page width based on the device width.

See more about this tag .

Another rather popular meta tag is the http-equiv="refresh" one. This line tells the browser to wait 3 seconds, then redirect to that other page:

Using 0 instead of 3 will redirect as soon as possible.

This is not a full reference; Other less-used meta tags exist.

After this document heading introduction, we can start diving into the document body.

THE DOCUMENT BODY

After the closing head tag, we can only have one thing in an HTML document: the body element.

Just like the head and html tags, we can only have one body tag in one page.

Inside the body tag we have all the tags that define the content of the page.

Technically, the start and ending tags are optional. But I consider it a good practice to add them. Just for clarity.

In the next chapters we'll define the variety of tags you can use inside the page body.

But before, we must introduce a difference between block elements and inline elements.

Block elements vs inline elements

Visual elements, the ones defined in the page body, can be generally classified in 2 categories:

• block elements ( p , div , heading elements, lists and list items, ...)
• inline elements ( a , span , img , ...)

What is the difference?

Block elements, when positioned in the page, do not allow other elements next to them. To the left, or to the right.

Inline elements instead can sit next to other inline elements.

The difference also lies in the visual properties we can edit using CSS. We can alter the width/height, margin, padding and border of block elements. We can't do that for inline elements.

Note that using CSS we can change the default for each element, setting a p tag to be inline, for example, or a span to be a block element.

Another difference is that inline elements can be contained in block elements. The reverse is not true.

Some block elements can contain other block elements, but it depends. The p tag for example does not allow such option.

TAGS THAT INTERACT WITH TEXT

This tag defines a paragraph of text.

It's a block element.

Inside it, we can add any inline element we like, like span or a .

We cannot add block elements.

We cannot nest a p element into another one.

By default browsers style a paragraph with a margin on top and at the bottom. 16px in Chrome, but the exact value might vary between browsers.

This causes two consecutive paragraphs to be spaced, replicating what we think of a "paragraph" in printed text.

The span tag

This is an inline tag that can be used to create a section in a paragraph that can be targeted using CSS:

This tag represents a line break. It's an inline element, and does not need a closing tag.

We use it to create a new line inside a p tag, without creating a new paragraph.

And compared to creating a new paragraph, it does not add additional spacing.

The heading tags

HTML provides us 6 heading tags. From most important to least important, we have h1 , h2 , h3 , h4 , h5 , h6 .

Typically a page will have one h1 element, which is the page title. Then you might have one or more h2 elements depending on the page content.

Headings, especially the heading organization, are also essential for SEO, and search engines use them in various ways.

The browser by default will render the h1 tag bigger, and will make the elements size smaller as the number near h increases:

All headings are block elements. They cannot contain other elements, just text.

The strong tag

This tag is used to mark the text inside it as strong . This is pretty important, it's not a visual hint, but a semantic hint. Depending on the medium used, its interpretation will vary.

Browsers by default make the text in this tag bold .

This tag is used to mark the text inside it as emphasized . Like with strong , it's not a visual hint but a semantic hint.

Browsers by default make the text in this italic .

The blockquote HTML tag is useful to insert citations in the text.

Browsers by default apply a margin to the blockquote element. Chrome applies a 40px left and right margin, and a 10px top and bottom margin.

The q HTML tag is used for inline quotes.

Horizontal line

Not really based on text, but the hr tag is often used inside a page. It means horizontal rule , and it adds a horizontal line in the page.

Useful to separate sections in the page.

Code blocks

The code tag is especially useful to show code, because browsers give it a monospaced font.

That's typically the only thing that browsers do. This is the CSS applied by Chrome:

This tag is typically wrapped in a pre tag, because the code element ignores whitespace and line breaks. Like the p tag.

Chrome gives pre this default styling:

which prevents white space collapsing and makes it a block element.

We have 3 types of lists:

• unordered lists
• ordered lists
• definition lists

Unordered lists are created using the ul tag. Each item in the list is created with the li tag:

Ordered lists are similar, just made with the ol tag:

The difference between the two is that ordered lists have a number before each item:

Definition lists are a bit different. You have a term, and its definition:

This is how browsers typically render them:

I must say you rarely see them in the wild, for sure not much as ul and ol , but sometimes they might be useful.

Other text tags

There is a number of tags with presentational purposes:

• the mark tag
• the ins tag
• the del tag
• the sup tag
• the sub tag
• the small tag

This is an example of the visual rendering of them which is applied by default by browsers:

You might wonder, how is b different than strong ? And how i is different than em ?

The difference lies in the semantic meaning. While b and i are a direct hint at the browser to make a piece of text bold or italic, strong and em give the text a special meaning, and it's up to the browser to give the styling. Which happens to be exactly the same as b and i , by default. Although you can change that using CSS.

There are a number of other, less used tags related to text. I just mentioned the ones that I see used the most.

Links are defined using the a tag. The link destination is set via its href attribute.

Between the starting and closing tag we have the link text.

The above example is an absolute URL. Links also work with relative URLs:

In this case, when clicking the link the user is moved to the /test URL on the current origin.

Be careful with the / character. If omitted, instead of starting from the origin, the browser will just add the test string to the current URL.

Example, I'm on the page https://flaviocopes.com/axios/ and I have these links:

• /test once clicked brings me to https://flaviocopes.com/test
• test once clicked brings me to https://flaviocopes.com/axios/test

Link tags can include other things inside them, not just text. For example, images:

or any other elements, except other <a> tags.

If you want to open the link in a new tab, you can use the target attribute:

CONTAINER TAGS AND PAGE STRUCTURE HTML

Container tags.

HTML provides a set of container tags. Those tags can contain an unspecified set of other tags.

and it can be confusing to understand the difference between them.

Let's see when to use each one of them.

The article tag identifies a thing that can be independent from other things in a page.

For example a list of blog posts in the homepage.

Or a list of links.

We're not limited to lists: an article can be the main element in a page.

Inside an article tag we should have a title ( h1 - h6 ) and

Represents a section of a document. Each section has a heading tag ( h1 - h6 ), then the section body .

It's useful to break a long article into different sections .

Shouldn't be used as a generic container element. div is made for this.

div is the generic container element:

You often add a class or id attribute to this element, to allow it to be styled using CSS.

We use div in any place where we need a container but the existing tags are not suited.

Tags related to page

This tag is used to create the markup that defines the page navigation. Into this we typically add an ul or ol list:

The aside tag is used to add a piece of content that is related to the main content.

A box where to add a quote, for example. Or a sidebar.

Using aside is a signal that the things it contains are not part of the regular flow of the section it lives into.

The header tag represents a part of the page that is the introduction. It can for example contain one or more heading tag ( h1 - h6 ), the tagline for the article, an image.

The main tag represents the main part of a page:

The footer tag is used to determine the footer of an article, or the footer of the page:

Forms are the way you can interact with a page, or an app, built with Web technologies.

You have a set of controls, and when you submit the form, either with a click to a "submit" button or programmatically, the browser will send the data to the server.

By default this data sending causes the page to reload after the data is sent, but using JavaScript you can alter this behavior (not going to explain how in this book).

A form is created using the form tag:

By default forms are submitted using the GET HTTP method. Which has its drawbacks, and usually you want to use POST.

You can set the form to use POST when submitted by using the method attribute:

The form is submitted, either using GET or POST, to the same URL where it resides.

So if the form is in the https://flaviocopes.com/contacts page, pressing the "submit" button will make a request to that same URL.

Which might result in nothing happening.

You need something server-side to handle the request, and typically you "listen" for those form submit events on a dedicated URL.

You can specify the URL via the action parameter:

This will cause the browser to submit the form data using POST to the /new-contact URL on the same origin.

If the origin (protocol + domain + port) is https://flaviocopes.com (port 80 is the default), this means the form data will be sent to https://flaviocopes.com/new-contact .

I talked about data. Which data?

Data is provided by users via the set of controls that are available on the Web platform:

• input boxes (single line text)
• text areas (multiline text)
• select boxes (choose one option from a drop-down menu)
• radio buttons (choose one option from a list always visible)
• checkboxes (choose zero, one or more option)
• file uploads

Let's introduce each one of them in the following form fields overview.

The input tag

The input field is one of the most widely used form elements. It's also a very versatile element, and it can completely change behavior based on the type attribute.

The default behavior is to be a single-line text input control:

Equivalent to using:

As with all the other fields that follow, you need to give the field a name in order for its content to be sent to the server when the form is submitted:

The placeholder attribute is used to have some text showing up, in light gray, when the field is empty. Useful to add a hint to the user for what to type in:

Using type="email" will validate client-side (in the browser) an email for correctness (semantic correctness, not ensuring the email address is existing) before submitting.

Using type="password" will make every key entered appear as an asterisk (*) or dot, useful for fields that host a password.

You can have an input element accept only numbers:

You can specify a minimum and maximum value accepted:

The step attribute helps identify the steps between different values. For example this accepts a value between 10 and 50, at steps of 5:

Hidden field

Fields can be hidden from the user. They will still be sent to the server upon the form submit:

This is commonly used to store values like a CSRF token, used for security and user identification, or even to detect robots sending spam, using special techniques.

It can also just be used to identify a form and its action.

Setting a default value

All those fields accept a predefined value. If the user does not change it, this will be the value sent to the server:

If you set a placeholder, that value will appear if the user clears the input field value:

Form submit

The type="submit" field is a button that, once pressed by the user, submits the form:

The value attribute sets the text on the button, which if missing shows the "Submit" text:

Form validation

Browsers provide client-side validation functionality to forms.

You can set fields as required, ensuring they are filled, and enforce a specific format for the input of each field.

Let's see both options.

Set fields as required

The required attribute helps you with validation. If the field is not set, client-side validation fails and the browser does not submit the form:

Enforce a specific format

I described the type="email" field above. It automatically validates the email address according to a format set in the specification.

In the type="number" field, I mentioned the min and max attribute to limit values entered to an interval.

You can do more.

You can enforce a specific format on any field.

The pattern attribute gives you the ability to set a regular expression to validate the value against.

I recommend reading my Regular Expressions Guide at flaviocopes.com/javascript-regular-expressions/ .

pattern=" https://.* "

Other fields

File uploads.

You can load files from your local computer and send them to the server using a type="file" input element:

You can attach multiple files:

You can specify one or more file types allowed using the accept attribute. This accepts images:

You can use a specific MIME type, like application/json or set a file extension like .pdf . Or set multiple file extensions, like this:

The type="button" input fields can be used to add additional buttons to the form, that are not submit buttons:

They are used to programmatically do something, using JavaScript.

There is a special field rendered as a button, whose special action is to clear the entire form and bring back the state of the fields to the initial one:

Radio buttons

Radio buttons are used to create a set of choices, of which one is pressed and all the others are disabled.

The name comes from old car radios that had this kind of interface.

You define a set of type="radio" inputs, all with the same name attribute, and different value attribute:

Once the form is submitted, the color data property will have one single value.

There's always one element checked. The first item is the one checked by default.

You can set the value that's pre-selected using the checked attribute. You can use it only once per radio inputs group.

Similar to radio boxes, but they allow multiple values to be chosen, or none at all.

You define a set of type="checkbox" inputs, all with the same name attribute, and different value attribute:

All those checkboxes will be unchecked by default. Use the checked attribute to enable them on page load.

Since this input field allows multiple values, upon form submit the value(s) will be sent to the server as an array.

Date and time

We have a few input types to accept date values.

The type="date" input field allows the user to enter a date, and shows a date picker if needed:

The type="time" input field allows the user to enter a time, and shows a time picker if needed:

The type="month" input field allows the user to enter a month and a year:

The type="week" input field allows the user to enter a week and a year:

All those fields allow to limit the range and the step between each value. I recommend checking MDN for the little details on their usage.

The type="datetime-local" field lets you choose a date and a time.

Here is a page to test them all: https://codepen.io/flaviocopes/pen/ZdWQPm

Color picker

You can let users pick a color using the type="color" element:

You set a default value using the value attribute:

The browser will take care of showing a color picker to the user.

This input element shows a slider element. People can use it to move from a starting value to an ending value:

You can provide an optional step:

The type="tel" input field is used to enter a phone number:

The main selling point for using tel over text is on mobile, where the device can choose to show a numeric keyboard.

Specify a pattern attribute for additional validation:

The type="url" field is used to enter a URL.

You can validate it using the pattern attribute:

The textarea tag

The textarea element allows users to enter multi-line text. Compared to input , it requires an ending tag:

You can set the dimensions using CSS, but also using the rows and cols attributes:

As with the other form tags, the name attribute determines the name in the data sent to the server:

The select tag

This tag is used to create a drop-down menu.

The user can choose one of the options available.

Each option is created using the option tag. You add a name to the select, and a value to each option:

You can set an option disabled:

You can have one empty option:

Options can be grouped using the optgroup tag. Each option group has a label attribute:

In the early days of the web tables were a very important part of building layouts.

Later on they were replaced by CSS and its layout capabilities, and today we have powerful tools like CSS Flexbox and CSS Grid to build layouts. Tables are now used just for, guess what, building tables!

The table tag

You define a table using the table tag:

Inside the table we'll define the data. We reason in terms of rows, which means we add rows into a table (not columns). We'll define columns inside a row.

A row is added using the tr tag, and that's the only thing we can add into a table element:

This is a table with 3 rows.

The first row can take the role of the header.

Column headers

The table header contains the name of a column, typically in a bold font.

Think about an Excel / Google Sheets document. The top A-B-C-D... header.

We define the header using the th tag:

The table content

The content of the table is defined using td tags, inside the other tr elements:

This is how browsers render it, if you don't add any CSS styling:

Adding this CSS:

makes the table look more like a proper table:

Span columns and rows

A row can decide to span over 2 or more columns, using the colspan attribute:

Or it can span over 2 or more rows, using the rowspan attribute:

Row headings

Before I explained how you can have column headings, using the th tag inside the first tr tag of the table.

You can add a th tag as the first element inside a tr that's not the first tr of the table, to have row headings:

More tags to organize the table

You can add 3 more tags into a table, to have it more organized.

This is best when using big tables. And to properly define a header and a footer, too.

Those tags are

They wrap the tr tags to clearly define the different sections of the table. Here's an example:

Table caption

A table should have a caption tag that describes its content. That tag should be put immediately after the opening table tag:

MULTIMEDIA TAGS: AUDIO AND VIDEO

In this section I want to show you the audio and video tags.

The audio tag

This tag allows you to embed audio content in your HTML pages.

This element can stream audio, maybe using a microphone via getUserMedia() , or it can play an audio source which you reference using the src attribute:

By default the browser does not show any controls for this element. Which means the audio will play only if set to autoplay (more on this later) and the user can't see how to stop it or control the volume or move through the track.

To show the built-in controls, you can add the controls attribute:

Controls can have a custom skin.

You can specify the MIME type of the audio file using the type attribute. If not set, the browser will try to automatically determine it:

An audio file by default does not play automatically. Add the autoplay attribute to play the audio automatically:

Note: mobile browsers don't allow autoplay

The loop attribute restarts the audio playing at 0:00 if set; otherwise, if not present, the audio stops at the end of the file:

You can also play an audio file muted using the muted attribute (not really sure what's the usefulness of this):

Using JavaScript you can listen for various events happening on an audio element, the most basic of which are:

• play when the file starts playing
• pause when the audio playing was paused
• playing when the audio is resumed from a pause
• ended when the end of the audio file was reached

The video tag

This tag allows you to embed video content in your HTML pages.

This element can stream video, using a webcam via getUserMedia() or WebRTC , or it can play a video source which you reference using the src attribute:

By default the browser does not show any controls for this element, just the video.

Which means the video will play only if set to autoplay (more on this later) and the user can't see how to stop it, pause it, control the volume or skip to a specific position in the video.

You can specify the MIME type of the video file using the type attribute. If not set, the browser will try to automatically determine it:

A video file by default does not play automatically. Add the autoplay attribute to play the video automatically:

Some browsers also require the muted attribute to autoplay. The video autoplays only if muted:

The loop attribute restarts the video playing at 0:00 if set; otherwise, if not present, the video stops at the end of the file:

You can set an image to be the poster image:

If not present, the browser will display the first frame of the video as soon as it's available.

You can set the width and height attributes to set the space that the element will take so that the browser can account for it and it does not change the layout when it's finally loaded. It takes a numeric value, expressed in pixels.

Using JavaScript you can listen for various events happening on an video element, the most basic of which are:

• pause when the video was paused
• playing when the video is resumed from a pause
• ended when the end of the video file was reached

The iframe tag allows us to embed content coming from other origins (other sites) into our web page.

Technically, an iframe creates a new nested browsing context. This means that anything in the iframe does not interfere with the parent page, and vice versa. JavaScript and CSS do not "leak" to/from iframes.

Many sites use iframes to perform various things. You might be familiar with Codepen, Glitch or other sites that allow you to code in one part of the page, and you see the result in a box. That's an iframe.

You create one this way:

You can load an absolute URL, too:

You can set a set of width and height parameters (or set them using CSS) otherwise the iframe will use the defaults, a 300x150 pixels box:

The srcdoc attribute lets you specify some inline HTML to show. It's an alternative to src , but recent and not supported in Edge 18 and lower, and in IE:

The sandbox attribute allows us to limit the operations allowed in the iframes.

If we omit it, everything is allowed:

If we set it to "", nothing is allowed:

We can select what to allow by adding options in the sandbox attribute. You can allow multiple ones by adding a space in between. Here's an incomplete list of the options you can use:

• allow-forms : allow to submit forms
• allow-modals allow to open modals windows, including calling alert() in JavaScript
• allow-orientation-lock allow to lock the screen orientation
• allow-popups allow popups, using window.open() and target="_blank" links
• allow-same-origin treat the resource being loaded as same origin
• allow-scripts lets the loaded iframe run scripts (but not create popups).
• allow-top-navigation gives access to the iframe to the top level browsing context

Currently experimental and only supported by Chromium-based browsers, this is the future of resource sharing between the parent window and the iframe.

It's similar to the sandbox attribute, but lets us allow specific features, including:

• accelerometer gives access to the Sensors API Accelerometer interface
• ambient-light-sensor gives access to the Sensors API AmbientLightSensor interface
• autoplay allows to autoplay video and audio files
• camera allows to access the camera from the getUserMedia API
• display-capture allows to access the screen content using the getDisplayMedia API
• fullscreen allows to access fullscreen mode
• geolocation allows to access the Geolocation API
• gyroscope gives access to the Sensors API Gyroscope interface
• magnetometer gives access to the Sensors API Magnetometer interface
• microphone gives access to the device microphone using the getUserMedia API
• midi allows access to the Web MIDI API
• payment gives access to the Payment Request API
• speaker allows access to playing audio through the device speakers
• usb gives access to the WebUSB API.
• vibrate gives access to the Vibration API
• vr gives access to the WebVR API

When loading an iframe, the browser sends it important information about who is loading it in the Referer header (notice the single r , a typo we must live with).

The misspelling of referrer originated in the original proposal by computer scientist Phillip Hallam-Baker to incorporate the field into the HTTP specification. The misspelling was set in stone by the time of its incorporation into the Request for Comments standards document RFC 1945

The referrerpolicy attribute lets us set the referrer to send to the iframe when loading it. The referrer is an HTTP header that lets the page know who is loading it. These are the allowed values:

• no-referrer-when-downgrade it's the default, and does not send the referrer when the current page is loaded over HTTPS and the iframe loads on the HTTP protocol
• no-referrer does not send the referrer header
• origin the referrer is sent, and only contains the origin (port, protocol, domain), not the origin + path which is the default
• origin-when-cross-origin when loading from the same origin (port, protocol, domain) in the iframe, the referrer is sent in its complete form (origin + path). Otherwise only the origin is sent
• same-origin the referrer is sent only when loading from the same origin (port, protocol, domain) in the iframe
• strict-origin sends the origin as the referrer if the current page is loaded over HTTPS and the iframe also loads on the HTTPS protocol. Sends nothing if the iframe is loaded over HTTP
• strict-origin-when-cross-origin sends the origin + path as the referrer when working on the same origin. Sends the origin as the referrer if the current page is loaded over HTTPS and the iframe also loads on the HTTPS protocol. Sends nothing if the iframe is loaded over HTTP
• unsafe-url : sends the origin + path as the referrer even when loading resources from HTTP and the current page is loaded over HTTPS

Images can be displayed using the img tag.

This tag accepts a src attribute, which we use to set the image source:

We can use a wide set of images. The most common ones are PNG, JPEG, GIF, SVG and more recently WebP.

The HTML standard requires an alt attribute to be present, to describe the image. This is used by screen readers and also by search engine bots:

You can set the width and height attributes to set the space that the element will take, so that the browser can account for it and it does not change the layout when it's fully loaded. It takes a numeric value, expressed in pixels.

The figure tag

The figure tag is often used along with the img tag.

figure is a semantic tag often used when you want to display an image with a caption. You use it like this:

The figcaption tag wraps the caption text.

Responsive images using srcset

The srcset attribute allows you to set responsive images that the browser can use depending on the pixel density or window width, according to your preferences. This way, it can only download the resources it needs to render the page, without downloading a bigger image if it's on a mobile device, for example.

Here's an example, where we give 4 additional images for 4 different screen sizes:

In the srcset we use the w measure to indicate the window width.

Since we do so, we also need to use the sizes attribute:

In this example the (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px string in the sizes attribute describes the size of the image in relation to the viewport, with multiple conditions separated by a semicolon.

The media condition max-width: 500px sets the size of the image in correlation to the viewport width. In short, if the window size is < 500px, it renders the image at 100% of the window size.

If the window size is bigger but < 900px , it renders the image at 50% of the window size.

And if even bigger, it renders the image at 800px.

The vw unit of measure can be new to you, and in short we can say that 1 vw is 1% of the window width, so 100vw is 100% of the window width.

A useful website to generate the srcset and progressively smaller images is https://responsivebreakpoints.com/ .

The picture tag

HTML also gives us the picture tag, which does a very similar job to srcset , and the differences are very subtle.

You use picture when instead of just serving a smaller version of a file, you completely want to change it. Or serve a different image format.

The best use case I found is when serving a WebP image, which is a format still not widely supported. In the picture tag you specify a list of images, and they will be used in order, so in the next example, browsers that support WebP will use the first image, and fallback to JPG if not:

The source tag defines one (or more) formats for the images. The img tag is the fallback in case the browser is very old and does not support the picture tag.

In the source tag inside picture you can add a media attribute to set media queries.

The example that follows kind of works like the above example with srcset :

But that's not its use case, because as you can see it's much more verbose.

The picture tag is recent but is now supported by all the major browsers except Opera Mini and IE (all versions).

ACCESSIBILITY

It's important we design our HTML with accessibility in mind.

Having accessible HTML means that people with disabilities can use the Web. There are totally blind or visually impaired users, people with hearing loss issues and a multitude of other different disabilities.

Unfortunately this topic does not take the importance it needs, and it doesn't seem as cool as others.

What if a person can't see your page, but still wants to consume its content? First, how do they do that? They can't use the mouse, they use something called a screen reader . You don't have to imagine that. You can try one now: Google provides the free ChromeVox Chrome Extension . Accessibility must also take care of allowing tools to easily select elements or navigate through the pages.

Web pages and Web apps are not always built with accessibility as one of their first goals, and maybe version 1 is released not accessible but it's possible to make a web page accessible after the fact. Sooner is better, but it's never too late.

It's important and in my country, websites built by the government or other public organizations must be accessible.

What does this mean to make an HTML accessible? Let me illustrate the main things you need to think about.

Note: there are several other things to take care about, which might go in the CSS topic, like colors, contrast and fonts. Or how to make SVG images accessible . I don't talk about them here.

Use semantic HTML

Semantic HTML is very important and it's one of the main things you need to take care of. Let me illustrate a few common scenarios.

It's important to use the correct structure for heading tags. The most important is h1 , and you use higher numbers for less important ones, but all the same-level headings should have the same meaning (think about it like a tree structure)

Use strong and em instead of b and i . Visually they look the same, but the first 2 have more meaning associated with them. b and i are more visual elements.

Lists are important. A screen reader can detect a list and provide an overview, then let the user choose to get into the list or not.

A table should have a caption tag that describes its content:

Use alt attributes for images

All images must have an alt tag describing the image content. It's not just a good practice, it's required by the HTML standard and your HTML without it is not validated.

It's also good for search engines, if that's an incentive for you to add it.

Use the role attribute

The role attribute lets you assign specific roles to the various elements in your page.

You can assign lots of different roles: complementary, list, listitem, main, navigation, region, tab, alert, application, article, banner, button, cell, checkbox, contentinfo, dialog, document, feed, figure, form, grid, gridcell, heading, img, listbox, row, rowgroup, search, switch, table, tabpanel, textbox, timer.

It's a lot and for the full reference of each of them I give you this MDN link . But you don't need to assign a role to every element in the page. Screen readers can infer from the HTML tag in most cases. For example you don't need to add a role tag to semantic tags like nav , button , form .

Let's take the nav tag example. You can use it to define the page navigation like this:

If you were forced to use a div tag instead of nav , you'd use the navigation role:

So here you got a practical example: role is used to assign a meaningful value when the tag does not convey the meaning already.

Use the tabindex attribute

The tabindex attribute allows you to change the order of how pressing the Tab key selects "selectable" elements. By defaults only links and form elements are "selectable" by navigation using the Tab key (and you don't need to set tabindex on them).

Adding tabindex="0" makes an element selectable:

Using tabindex="-1" instead removes an element from this tab-based navigation, and it can be pretty useful.

Use the aria attributes

ARIA is an acronym that means Accessible Rich Internet Applications and defines semantics that can be applied to elements.

This attribute is used to add a string to describe an element.

I use this attribute on my blog sidebar, where I have an input box for search without an explicit label, as it has a placeholder attribute.

aria-labelledby

This attribute sets a correlation between the current element and the one that labels it.

If you know how an input element can be associated to a label element, that's similar.

We pass the item id that describes the current element.

aria-describedby

This attribute lets us associate an element with another element that serves as description.

Use aria-hidden to hide content

I like a minimalistic design in my sites. My blog for example is mostly just content, with some links in the sidebar. But some things in the sidebar are just visual elements that don't add up to the experience of a person that can't see the page. Like my logo picture, or the dark/bright theme selector.

Adding the aria-hidden="true" attribute will tell screen readers to ignore that element.

Where to learn more

This is just an introduction to the topic. To learn more, I recommend these resources:

• https://www.w3.org/TR/WCAG20/
• https://webaim.org
• https://developers.google.com/web/fundamentals/accessibility/

You reached the end of the HTML Handbook.

Click here to get a PDF / ePub / Mobi version of this book to read offline !

Read more posts .

If this article was helpful, share it .

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

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

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.

The main parts of our element are as follows:

• The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets . This states where the element begins or starts to take effect — in this case where the paragraph begins.
• The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
• The content: This is the content of the element, which in this case, is just text.
• The element: The opening tag, the closing tag, and the content together comprise the element.

Elements can also have attributes that look like the following:

Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value . The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. Some attributes have no value, such as required .

Attributes that set a value always have:

• A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
• The attribute name followed by an equal sign.
• The attribute value wrapped by opening and closing quotation marks.

Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.

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:

• <!DOCTYPE html> — doctype . It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now.
• <html></html> — the <html> element. This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the lang attribute, setting the primary language of the document.
• <head></head> — the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
• <meta charset="utf-8"> — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
• <meta name="viewport" content="width=device-width"> — This viewport element ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.
• <title></title> — the <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
• <body></body> — the <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Let's turn our attention to the <img> element again:

As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.

We have also included an alt (alternative) attribute. In the alt attribute , you specify descriptive text for users who cannot see the image, possibly because of the following reasons:

• They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
• Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:

The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."

Try coming up with some better alt text for your image now.

Note: Find out more about accessibility in our accessibility learning module .

Marking up text

This section will cover some essential HTML elements you'll use for marking up the text.

Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1> - <h6> , although you'll commonly only use 3 to 4 at most:

Note: Anything in HTML between <!-- and --> is an HTML comment . The browser ignores comments as it renders the code. In other words, they are not visible on the page - just in the code. HTML comments are a way for you to write helpful notes about your code or logic.

Now try adding a suitable title to your HTML page just above your <img> element.

Note: You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO . Try to create a meaningful sequence of headings on your pages, without skipping levels.

As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:

Add your sample text (you should have it from What will your website look like? ) into one or a few paragraphs, placed directly below your <img> element.

A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:

• Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a <ul> element.
• Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.

Each item inside the lists is put inside an <li> (list item) element.

For example, if we wanted to turn the part of the following paragraph fragment into a list

We could modify the markup to this

Try adding an ordered or unordered list to your example page.

Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — <a> — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps:

• Choose some text. We chose the text "Mozilla Manifesto".
• Wrap the text in an <a> element, as shown below: html < a > Mozilla Manifesto </ a >
• Give the <a> element an href attribute, as shown below: html < a href = " " > Mozilla Manifesto </ a >
• Fill in the value of this attribute with the web address that you want the link to point to: html < a href = " https://www.mozilla.org/en-US/about/manifesto/ " > Mozilla Manifesto </ a >

You might get unexpected results if you omit the https:// or http:// part, called the protocol , at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.

Note: href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for h ypertext ref erence .

Add a link to your page now, if you haven't already done so.

If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also view it here ):

If you get stuck, you can always compare your work with our finished example code on GitHub.

Here, we have only really scratched the surface of HTML. To find out more, go to our Learning HTML topic.

• HTML Lab Assignments

HTML Assignment and HTML Examples for Practice

Text formatting, working with image, working with link.

• 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

Popular Tutorials

Learn python interactively, popular examples.

• Introduction
• What is HTML?

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

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,

Table of Contents

HTML Tutorial

Html graphics, html examples, html references, html basic examples.

In this chapter we will show some basic HTML examples.

Don't worry if we use tags you have not learned about yet.

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html> .

The HTML document itself begins with <html> and ends with </html> .

The visible part of the HTML document is between <body> and </body> .

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading: 

Advertisement

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

HTML links are defined with the <a> tag:

The link's destination is specified in the href attribute. 

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the <img> tag.

The source file ( src ), alternative text ( alt ), width , and height are provided as attributes:

How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

Click CTRL + U in an HTML page, or right-click on the page and select "View Page Source". This will open a new tab containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

HTML Exercises

Test yourself with exercises.

HTML elements are surrounded by a specific type of brackets, which one?

Start the Exercise

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]

Top Tutorials

Top references, top examples, get certified.

Academia.edu no longer supports Internet Explorer.

To browse Academia.edu and the wider internet faster and more securely, please take a few seconds to  upgrade your browser .

Enter the email address you signed up with and we'll email you a reset link.

• We're Hiring!
• Help Center

HTML EXERCISES

Related Papers

Youngky Dwi

Rivo Aries firmansyah

Fajar Prasetyo

Wiratama Dhiemas

Farkhan Nur Hasan

Hairul Akbar

Imas Nurhaerani

Makalah ini saya susun untuk anda yang sudah mengenal html maupun belum mengenalnya

CHANTHA CSIS

RELATED PAPERS

International Journal of Research in English Education ijreeonline , Sani Alhaji Garba

RELATED TOPICS

•   We're Hiring!
•   Help Center
• Find new research papers in:
• Health Sciences
• Earth Sciences
• Cognitive Science
• Mathematics
• Computer Science
• Academia ©2024

HTML Projects for Beginners: 10 Easy Starter Ideas

Published: December 11, 2023

Are you eager to level up your HTML skills? Embarking on HTML projects for beginners is an excellent way to start. As someone who once stood where you are now, I can confidently say that the journey from HTML novice to proficiency is both thrilling and immensely rewarding. It's not just about learning a language; it’s about creating and bringing your ideas to life. 

In my early days of exploring web development, HTML was the cornerstone that laid the foundation for my career. Now, with several years of experience in web development and a passion for being a resource for beginners, I understand the importance of starting with practical, easy-to-follow projects.

In this blog, I'm excited to share with you a curated list of HTML projects that are perfect for beginners. These projects are designed not only to increase your understanding of HTML but also to spark your creativity and enthusiasm for web development.

Table of Contents

• Understanding the Basics
• Project 1: Personal Portfolio Page
• Project 2: Simple Blog Layout
• Project 3: Landing Page
• Project 4: eCommerce Page
• Project 5: Recipe Page
• Project 6: Technical Documentation 
• Project 7: Small Business Homepage 
• Project 8: Simple Survey Form
• Project 9: Event Invitation Page
• Project 10: Parallax Website

The Road Ahead in Web Development

Understanding the basics: what is html.

Before I dive into the exciting world of HTML projects, I want to share why grasping the basics of HTML is crucial. HTML , which stands for HyperText Markup Language, is the foundational building block of the web. It’s not a programming language, but a markup language that I use to define the structure and layout of a web page through various elements and tags.

To me, HTML is like creating a framework for web content, similar to how an architect designs a building's blueprint. You would use tags to mark up text, insert images, create links, and lay out web pages in a format that browsers can understand and display. These tags , the basic units of HTML, help differentiate between headings, paragraphs, lists, and other content types, giving the web its versatile and user-friendly nature.

Every web developer starts somewhere, and for many, including myself, that starting point is HTML. It's a language that empowers me to create, experiment, and develop various digital experiences . So, as we embark on these beginner projects, remember that you're not just learning a new skill. You are stepping into a world full of endless possibilities and opportunities.

10 HTML Projects for Beginners: Your Journey Starts Here

As a web developer passionate about teaching, I‘m thrilled to guide you through this series. This section is crafted to progressively enhance your skills, offering a blend of creativity and learning. I’ve seen firsthand how these projects can transform beginners into confident creators, and I‘m excited to see the unique and innovative web experiences you’ll bring to life. Let's embark on this adventure together, turning code into compelling digital stories!

Project 1: Creating a Personal Portfolio Page

One of the best ways to start your HTML journey is by creating a personal portfolio page. This project allows you to introduce yourself to the world of web development while learning the basics of HTML. It’s not just about coding; it’s about telling your story through the web.

The objective here is to craft a web page that effectively portrays your personal and professional persona. This includes detailing your biography, showcasing your skills, and possibly even including a portfolio of work or projects you've completed. This page will be a cornerstone in establishing your online presence and can evolve as you progress in your career.

See the Pen HTML Project 1 by HubSpot ( @hubspot ) on CodePen .

• Showcase and Evolve : I'm selecting projects that best represent my abilities, and I plan to continually update my portfolio as I develop new skills.
• Simplicity and Clarity : My focus is on creating a clear, user-friendly layout that makes navigating my story and achievements effortless for visitors.

Project 2: Building a Simple Blog Layout

After creating a personal portfolio, the next step in your HTML journey is to build a simple blog layout. This project will introduce you to more complex structures and how to organize content effectively on a webpage.

The goal of this project is to create a basic blog layout that includes a header, a main content area for blog posts, and a footer. This layout serves as the foundation for any blog, providing a clear structure for presenting articles or posts.

See the Pen HTML Project 2 by HubSpot ( @hubspot ) on CodePen .

• Consistency is Key : In designing the blog, I'm focusing on maintaining a consistent style throughout the page to ensure a cohesive look.
• Content First : My layout will prioritize readability and easy navigation, making the content the star of the show.

Project 3: Designing a Landing Page

For the third project, let's shift gears and focus on creating a landing page. A landing page is a pivotal element in web design, often serving as the first point of contact between a business or individual and their audience. This project will help you learn how to design an effective and visually appealing landing page.

The objective is to create a single-page layout that introduces a product, service, or individual, with a focus on encouraging visitor engagement, such as signing up for a newsletter, downloading a guide, or learning more about a service.

See the Pen HTML Project 3 by HubSpot ( @hubspot ) on CodePen .

• Clear Call to Action : I'm ensuring that my landing page has a clear and compelling call to action (CTA) that stands out and guides visitors towards the desired engagement.
• Visual Appeal and Simplicity : My focus is on combining visual appeal with simplicity, making sure the design is not only attractive but also easy to navigate and understand.

Project 4: Crafting an eCommerce Page

Creating an eCommerce page is an excellent project for web developers looking to dive into the world of online retail. This project focuses on designing a web page that showcases products, includes product descriptions, prices, and a shopping cart.

The aim is to build a user-friendly and visually appealing eCommerce page that displays products effectively, providing customers with essential information and a seamless shopping experience. The page should include product images, descriptions, prices, and add-to-cart buttons.

See the Pen HTML Project 4 by HubSpot ( @hubspot ) on CodePen .

• Clarity and Accessibility : In designing the eCommerce page, my priority is to ensure that information is clear and accessible, making the shopping process straightforward for customers.
• Engaging Product Presentation : I'll focus on presenting each product attractively, with high-quality images and concise, informative descriptions that entice and inform.

Project 5: Developing a Recipe Page

One of the best ways to enhance your HTML and CSS skills is by creating a recipe page. This project is not only about structuring content but also about making it visually appealing. A recipe page is a delightful way to combine your love for cooking with web development, allowing you to share your favorite recipes in a creative and engaging format.

The aim of this project is to design a web page that effectively displays a recipe, making it easy and enjoyable to read. This includes organizing the recipe into clear sections such as ingredients and instructions, and styling the page to make it visually appealing. The recipe page you create can serve as a template for future culinary postings or a personal collection of your favorite recipes.

See the Pen HTML Project 5 by HubSpot ( @hubspot ) on CodePen .

• Clarity and Simplicity : My focus is on presenting the recipe in an organized manner, ensuring that the ingredients and instructions are easy to distinguish and follow.
• Engaging Visuals : I plan to use appealing images and a thoughtful layout, making the page not just informative but also a delight to the eyes.

Project 6: Creating a Technical Documentation 

Implementing a responsive navigation menu is a crucial skill in web development, enhancing user experience on various devices. This project focuses on creating a navigation menu that adjusts to different screen sizes, ensuring your website is accessible and user-friendly across all devices.

The goal is to create a navigation menu that adapts to different screen sizes. This includes a traditional horizontal menu for larger screens and a collapsible " hamburger " menu for smaller screens. Understanding responsive design principles and how to apply them using HTML and CSS is key in this project.

See the Pen HTML Project 6 by HubSpot ( @hubspot ) on CodePen .

• Flexibility is Key : I'm focusing on building a navigation menu that's flexible and adapts smoothly across various devices.
• Simplicity in Design : Keeping the design simple and intuitive is crucial, especially for the mobile version, to ensure ease of navigation.

Project 7: Building a Small Business Homepage 

Creating a homepage for a small business is a fantastic project for applying web development skills in a real-world context. This project involves designing a welcoming and informative landing page for a small business, focusing on user engagement and business promotion.

The aim is to create a homepage that effectively represents a small business, providing key information such as services offered, business hours, location, and contact details. The design should be professional, inviting, and aligned with the business's branding.

See the Pen HTML Project 7 by HubSpot ( @hubspot ) on CodePen .

• Clarity and Accessibility : My priority is ensuring that key information is presented clearly and is easily accessible to visitors.
• Brand Consistency : I plan to incorporate design elements that are in line with the business's branding, creating a cohesive and professional online presence.

Project 8: Setting Up a Simple Survey Form

Creating a simple survey form is a valuable project for practicing form handling in HTML and CSS. It's a fundamental skill in web development, essential for gathering user feedback, conducting research, or learning more about your audience.

The objective of this project is to create a user-friendly survey form that collects various types of information from users. The form will include different types of input fields, such as text boxes, radio buttons, checkboxes, and a submit button. The focus is on creating a clear, accessible, and easy-to-use form layout.

See the Pen HTML Project 8 by HubSpot ( @hubspot ) on CodePen .

• Simplicity in Design : I'm aiming for a design that's straightforward and intuitive, ensuring that filling out the form is hassle-free for users.
• Responsive Layout : Ensuring the form is responsive and accessible on different devices is a key consideration in its design.

Project 9: Creating an Event Invitation Page

Designing an event invitation page is a fantastic way to combine creativity with technical skills. This project involves creating a web page that serves as an online invitation for an event, such as a conference, workshop, or party.

The aim is to create a visually appealing and informative event invitation page. This page should include details about the event like the date, time, venue, and a brief description. The focus is on using HTML and CSS to present this information in an engaging and organized manner.

See the Pen HTML Project 9 by HubSpot ( @hubspot ) on CodePen .

• Visual Impact : I'm aiming for a design that captures the essence of the event, making the page immediately engaging.
• Clear Information Hierarchy : Organizing the event details in a clear and logical manner is crucial for effective communication.

Project 10: Building a Parallax Website

Creating a parallax website involves implementing a visual effect where background images move slower than foreground images, creating an illusion of depth and immersion. It's a popular technique for modern, interactive web design.

The objective of this project is to create a website with a parallax scrolling effect. This will be achieved using HTML and CSS, specifically focusing on background image positioning and scroll behavior. The key is to create a visually engaging and dynamic user experience.

See the Pen HTML Project 10 by HubSpot ( @hubspot ) on CodePen .

• Balance in Motion : While implementing parallax effects, I'll ensure the motion is smooth and not overwhelming, to maintain a pleasant user experience.
• Optimized Performance : I'll be mindful of optimizing images and code to ensure the parallax effect doesn't hinder the site's performance.

As we reach the end of our journey through various web development projects, it's clear that the field of web development is constantly evolving, presenting both challenges and opportunities. From creating basic HTML pages to designing dynamic, interactive websites, the skills acquired are just the beginning of a much broader and exciting landscape.

Embracing New Technologies: The future of web development is tied to the ongoing advancements in technologies. Frameworks like React, Angular, and Vue.js are changing how we build interactive user interfaces. Meanwhile, advancements in CSS, like Flexbox and Grid, have revolutionized layout design, making it more efficient and responsive.

Focus on User Experience: As technology progresses, the emphasis on user experience (UX) will become even more crucial. The success of a website increasingly depends on how well it engages users, provides value, and creates meaningful interactions. Web developers must continuously learn about the latest UX trends and apply them to their work.

The Rise of Mobile-First Development: With the increasing use of smartphones for internet access, mobile-first design is no longer an option but a necessity. This approach involves designing websites for smaller screens first and then scaling up to larger screens, ensuring a seamless experience across all devices.

Web Accessibility and Inclusivity: Making the web accessible to everyone, including people with disabilities, is a growing focus. This includes following best practices and guidelines for web accessibility, ensuring that websites are usable by everyone, regardless of their abilities or disabilities.

Performance and Optimization: As users become more demanding about performance, optimizing websites for speed and efficiency will continue to be a priority. This includes minimizing load times, optimizing images and assets, and writing efficient code.

Emerging Trends: The integration of artificial intelligence and machine learning in web development is on the rise, offering new ways to personalize user experiences and automate tasks. Additionally, the development of Progressive Web Apps (PWAs) is blurring the lines between web and mobile apps, offering offline capabilities and improved performance.

Continuous Learning: The only constant in web development is change. Continuous learning and adaptation are key to staying relevant in this field. Whether it's learning new programming languages, frameworks, or design principles, the ability to evolve with the industry is critical for any web developer.

As you continue on your path in web development, remember that each project is a step towards mastering this ever-changing discipline. Embrace the challenges, stay curious, and keep building, for the road ahead in web development is as exciting as it is limitless.

Don't forget to share this post!

Related articles.

HTML Tables: When to Use Them and How to Make & Edit Them

How to Create an Image Gallery With HTML

How to Clone Website Pages With HTML

15 Essential HTML Certifications

4 Ways to Get a URL for an Image

The What, Why, & How of Making a Favicon for Your Website

How to Create a Landing Page in HTML

5 Easy Ways to Insert Spaces in HTML

How to Use HTML Picture Tag

Everything You Need to Know about HTML Navigation Bars (+Code)

Tangible tips and coding templates from experts to help you code better and faster.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

• Share full article

Advertisement

Supported by

U.S. Sues Apple, Accusing It of Maintaining an iPhone Monopoly

The lawsuit caps years of regulatory scrutiny of Apple’s wildly popular suite of devices and services, which have fueled its growth into a nearly $3 trillion public company.

Garland Accuses Apple of Violating Federal Antitrust Law

Attorney general merrick b. garland said that apple has employed a strategy that relies on exclusionary anti-competitive conduct that hurts both consumers and developers..

Over the last two decades, Apple has become one of the most valuable public companies in the world. Today, its net income exceeds the individual gross domestic product of more than 100 countries. That is in large part due to the success of the iPhone, Apple’s signature smartphone product. But as our complaint alleges, Apple has maintained monopoly power in the smartphone market, not simply by staying ahead of the competition on the merits, but by violating federal antitrust law. Consumers should not have to pay higher prices because companies break the law. We allege that Apple has employed a strategy that relies on exclusionary, anticompetitive conduct that hurts both consumers and developers. For consumers, that has meant fewer choices, higher prices and fees, lower quality smartphones, apps and accessories, and less innovation from Apple and its competitors. For developers, that has meant being forced to play by rules that insulate Apple from competition. And as outlined in our complaint, we allege that Apple has consolidated its monopoly power, not by making its own products better, but by making other products worse.

By David McCabe and Tripp Mickle

David McCabe reported from Washington, and Tripp Mickle from San Francisco.

The federal government’s aggressive crackdown on Big Tech expanded on Thursday to include an antitrust lawsuit by the Justice Department against Apple, one of the world’s best-known and most valuable companies.

The department joined 16 states and the District of Columbia to file a significant challenge to the reach and influence of Apple, arguing in an 88-page lawsuit that the company had violated antitrust laws with practices that were intended to keep customers reliant on their iPhones and less likely to switch to a competing device. The tech giant prevented other companies from offering applications that compete with Apple products like its digital wallet, which could diminish the value of the iPhone, and hurts consumers and smaller companies that compete with it, the government said.

The Justice Department’s lawsuit is seeking to put an end to those practices. The government even has the right to ask for a breakup of the Silicon Valley icon.

Read the Lawsuit Against Apple

The antitrust suit is the federal government’s most significant challenge to the reach and influence of the company.

The lawsuit caps years of regulatory scrutiny of Apple’s wildly popular suite of devices and services, which have fueled its growth into a nearly $2.75 trillion public company that was for years the most valuable on the planet. It takes direct aim at the iPhone, Apple’s most popular device and most powerful business, and attacks the way the company has turned the billions of smartphones it has sold since 2007 into the centerpiece of its empire.

By tightly controlling the user experience on iPhones and other devices, Apple has created what critics call an uneven playing field, where it grants its own products and services access to core features that it denies rivals. Over the years, it has limited finance companies’ access to the phone’s payment chip and Bluetooth trackers from tapping into its location-service feature. It’s also easier for users to connect Apple products, like smartwatches and laptops, to the iPhone than to those made by other manufacturers.

“Each step in Apple’s course of conduct built and reinforced the moat around its smartphone monopoly,” the government said in the lawsuit, which was filed in the U.S. District Court for the District of New Jersey. It added that the company’s practices resulted in “higher prices and less innovation.”

Apple says these practices make its iPhones more secure than other smartphones. But app developers and rival device makers say Apple uses its power to crush competition.

“This lawsuit threatens who we are and the principles that set Apple products apart in fiercely competitive markets,” an Apple spokeswoman said. “If successful, it would hinder our ability to create the kind of technology people expect from Apple — where hardware, software, and services intersect. It would also set a dangerous precedent, empowering government to take a heavy hand in designing people’s technology.”

Apple is the latest company the federal government has tried to rein in under a wave of antitrust pressure in recent years from both the Justice Department and the Federal Trade Commission, to which the Biden administration has appointed heads sharply focused on changing the laws to fit the modern era. Google, Meta and Amazon are all facing similar suits, and companies from Kroger to JetBlue Airways have faced greater scrutiny of potential acquisitions and expansion.

The lawsuit asks the court to stop Apple from engaging in current practices, including blocking cloud-streaming apps, undermining messaging across smartphone operating systems and preventing the creation of digital wallet alternatives.

The Justice Department has the right under the law to ask for structural changes to Apple’s business — including a breakup, said an agency official, who spoke on condition of anonymity. The official declined to identify what additional action the agency could request in this case but any demands would be tied to how a court rules on the question of whether — and how — Apple broke the law.

It’s unclear what implications the suit — which is likely to drag out years before any type of resolution — would have for consumers. Apple plans to file a motion to dismiss the case in the next 60 days. In its filing, the company plans to emphasize that competition laws permit it to adopt policies or designs that its competitors oppose, particularly when those designs would make using an iPhone a better experience.

Apple has effectively fought off other antitrust challenges. In a lawsuit over its App Store policies that Epic Games, the maker of Fortnite, brought in 2020, Apple persuaded the judge that customers could easily switch between its iPhone operating system and Google’s Android system. It has presented data showing that the reason few customers change phones is their loyalty to the iPhone.

It also has defended its business practices in the past by highlighting how the App Store, which it opened in 2008, created millions of new businesses. Over the past decade, the number of paid app makers has increased by 374 percent to 5.2 million, which Apple has said is a testament to a flourishing marketplace.

Every modern-day tech giant has faced a major federal antitrust challenge. The Justice Department is also pursuing a case against Google’s search business and another focused on Google’s hold over advertising technology. The Federal Trade Commission filed a lawsuit accusing Meta, which owns Facebook, of thwarting competition when it bought Instagram and WhatsApp and another accusing Amazon of abusing its power over online retail. The F.T.C. also tried unsuccessfully to block Microsoft from acquiring Activision Blizzard, the video game publisher.

The lawsuits reflect a push by the regulators to apply greater scrutiny to the companies’ roles as gatekeepers to commerce and communications. In 2019, under President Donald J. Trump, the agencies opened antitrust inquiries into Google, Meta, Amazon and Apple. The Biden administration has put even more energy behind the effort, appointing critics of the tech giants to lead both the F.T.C. and the antitrust division of the Department of Justice.

In Europe, regulators recently punished Apple for preventing music streaming competitors from communicating with users about promotions and options to upgrade their subscriptions, levying a 1.8 billion-euro fine. App makers have also appealed to the European Commission , the European Union’s executive arm, to investigate claims that Apple is violating a new law requiring it to open iPhones to third-party app stores.

In South Korea and the Netherlands , the company is facing potential fines over the fees it charges app developers to use alternative payment processors. Other countries, including Britain, Australia and Japan, are considering rules that would undercut Apple’s grip on the app economy.

The Justice Department, which began its investigation into Apple in 2019, chose to build a broader and more ambitious case than any other regulator has brought against the company. Rather than narrowly focus on the App Store, as European regulators have, it focused on Apple’s entire ecosystem of products and services.

The lawsuit filed Thursday focuses on a group of practices that the government said Apple had used to shore up its dominance.

The company “undermines” the ability of iPhone users to message with owners of other types of smartphones, like those running the Android operating system, the government said. That divide — epitomized by the green bubbles that show an Android owner’s messages — sent a signal that other smartphones were lower quality than the iPhone, according to the lawsuit.

Apple has similarly made it difficult for the iPhone to work with smartwatches other than its own Apple Watch, the government argued. Once an iPhone user owns an Apple Watch, it becomes far more costly for them to ditch the phone.

The government also said Apple had tried to maintain its monopoly by not allowing other companies to build their own digital wallets. Apple Wallet is the only app on the iPhone that can use the chip, known as the NFC, that allows a phone to tap-to-pay at checkout. Though Apple encourages banks and credit card companies to allow their products to work inside Apple Wallet, it blocks them from getting access to the chip and creating their own wallets as alternatives for customers.

The government said that Apple refuses to allow game streaming apps that could make the iPhone a less valuable piece of hardware or offer “super apps” that let users perform a variety of activities from one application.

The government’s complaint uses similar arguments to the claims it made against Microsoft decades ago, in a seminal lawsuit that argued the company was tying its web browser to the Windows operating system, said Colin Kass, an antitrust lawyer at Proskauer Rose. He added that the most compelling allegation — and the one that brings it closest to the Microsoft case — is that Apple could be contractually preventing rivals from developing apps that work with other app providers, as “super apps” could.

Other legal experts noted that companies are legally allowed to favor their own products and services, so the government will have to explain why that is a problem with Apple.

“This case is about technology,” Mr. Kass said. “Can the antitrust laws force a company to redesign its product to make it more compatible with competitors’ products?”

Apple has defended itself against other antitrust challenges by arguing that its policies are critical to make its devices private and secure. In its defense against Epic Games, it argued that restraining the distribution of apps allowed it to protect the iPhone from malware and fraud. The practice benefited customers and made the iPhone more attractive than competing devices with Android’s operating system.

The government will try to show that the effect of Apple’s policies was to hurt consumers, not help them.

“Competition makes devices more private and more secure,” said Jonathan Kanter, assistant attorney general of the Justice Department’s antitrust division. “In many instances, Apple’s conduct has made its ecosystem less private and less secure.”

David McCabe covers tech policy. He joined The Times from Axios in 2019. More about David McCabe

Tripp Mickle reports on Apple and Silicon Valley for The Times and is based in San Francisco. His focus on Apple includes product launches, manufacturing issues and political challenges. He also writes about trends across the tech industry, including layoffs, generative A.I. and robot taxis. More about Tripp Mickle

How to Make Your Smartphone Better

These days, smartphones include tools to help you more easily connect with the people you want to contact — and avoid those you don’t. Here are some tips .

Trying to spend less time on your phone? The “Do Not Disturb” mode can help you set boundaries and signal that it may take you a while to respond .

To comply with recent European regulations, Apple will make a switch to USB-C charging for its iPhones. Here is how to navigate the change .

Photo apps have been using A.I. for years to give you control over the look of your images. Here’s how to take advantage of that .

The loss of your smartphone can be disruptive and stressful. Taking a few simple steps ahead of time can make things easier if disaster strikes .

Many default settings make us share superfluous amounts of data with tech companies. Here’s how to shut those off .