导航|地址|刷新
Structuring content with HTML - Learn we…


Skip to main content

Skip to search



MDN





HTML

HTML: Markup language

HTML reference
Elements

Global attributes

Attributes

See all…
HTML guides
Responsive images

HTML cheatsheet

Date & time formats

See all…
Markup languages
SVG

MathML

XML




CSS

CSS: Styling language

CSS reference
Properties

Selectors

At-rules

Values

See all…
CSS guides
Box model

Animations

Flexbox

Colors

See all…
Layout cookbook
Column layouts

Centering an element

Card component

See all…




JavaScriptJS

JavaScript: Scripting language

JS reference
Standard built-in objects

Expressions & operators

Statements & declarations

Functions

See all…
JS guides
Control flow & error handing

Loops and iteration

Working with objects

Using classes

See all…




Web APIs

Web APIs: Programming interfaces

Web API reference
File system API

Fetch API

Geolocation API

HTML DOM API

Push API

Service worker API

See all…
Web API guides
Using the Web animation API

Using the Fetch API

Working with the History API

Using the Web speech API

Using web workers




All

All web technology

Technologies
Accessibility

HTTP

URI

Web extensions

WebAssembly

WebDriver

See all…
Topics
Media

Performance

Privacy

Security

Progressive web apps




Learn

Learn web development

Frontend developer course
Getting started modules

Core modules

MDN Curriculum

Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module

CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module




Tools

Discover our tools


Playground

HTTP Observatory

Border-image generator

Border-radius generator

Box-shadow generator

Color format converter

Color mixer

Shape generator




About

Get to know MDN better


About MDN

Advertise with us

Community

MDN on GitHub




Blog





Toggle sidebar
Learn

Core learning modules

HTML

Theme

OS default

Light

Dark



English (US)

Remember language Learn more

Deutsch

English (US)

Español

Français

日本語

한국어

Português (do Brasil)

Русский

中文 (简体)

正體中文 (繁體)







Structuring content with HTML


Overview: Core learning modules

Next

HTML is the technology that defines the content and structure of any website. Written properly, it should also define the semantics (meaning) of the content in a machine-readable way, which is vital for accessibility, search engine optimization, and making use of the built-in features browsers provide for content to work optimally. This module covers the basics of the language, before looking at key areas such as document structure, links, lists, images, forms, and more.



In this article

Prerequisites

Tutorials and challenges

Test your skills

Additional tutorials

See also



Prerequisites

Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in Installing basic software), and understand how to create and manage files (as detailed in Dealing with files). Both are parts of our Getting started with the web complete beginner's module.


Note: If you are working on a computer, tablet, or another device where you can't create files, you can try running the code in an online editor such as CodePen or JSFiddle.




Tutorials and challenges
Basic HTML syntax
Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!
What's in the head? Web page metadata
The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains metadata information such as the page <title>, links to CSS (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).
Headings and paragraphs
One of HTML's main jobs is to give text structure so that a browser can display an HTML document the way its developer intends. This article explains how HTML can be used to provide fundamental page structure by defining headings and paragraphs.
Emphasis and importance
The previous article looked at why semantics are important in HTML, and focused on headings and paragraphs. This article continues on the theme of semantics, looking at HTML elements that apply emphasis and importance to text (parallel to italics and bold text in print media).
Lists
Lists are everywhere in life—from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! It may not surprise you that HTML has a convenient set of elements that allows us to define different types of list. On the web, we have three types of lists: unordered, ordered, and description lists. This lesson shows you how to use the different types.
Advanced text features
There are many other elements in HTML for defining text semantics, which we didn't get to in the Emphasis and importance article. The elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). Here you'll learn about marking up quotations, computer code and other related text, subscript and superscript, contact information, and more.
Marking up a letterChallenge
We all learn to write a letter sooner or later; it is also a useful example to test our text formatting skills. In this challenge, you'll have a letter to mark up as a test for your HTML text formatting skills, as well as hyperlinks and proper use of the HTML <head> element.
Structuring documents
In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). This article looks into how to plan a basic website structure, and write the HTML to represent this structure.
Creating links
Links (also known as hyperlinks) are really important — they are what makes the Web a web. This article shows the syntax required to make a link, and discusses link best practices.
Structuring a page of contentChallenge
Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this challenge you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.
HTML images
In the beginning, the web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. In this article we'll look at how to use the <img> element in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to CSS background images.
HTML video and audio
Now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your HTML documents! In this article we'll look at doing just that with the <video> and <audio> elements; we'll then finish off by looking at how to add captions/subtitles to your videos.
Creepy-crawly splash pageChallenge
In this challenge, we'll test your knowledge of some of the techniques discussed in the last couple of lessons, getting you to add some images and video to a splash page all about bugs and other creepy crawlies.
HTML table basics
This article gets you started with HTML tables, covering the very basics such as rows, cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
HTML table accessibility
In this article we look at more HTML table accessibility features such as captions/summaries, grouping your rows into table head, body and footer sections, and scoping columns and rows.
Structuring a planet data tableChallenge
In this challenge, we provide you with some data on the planets in our solar system. Your job is to structure it into an accessible HTML table.
Forms and buttons in HTML
HTML forms and buttons are powerful tools for interacting with users — most commonly they are used for collecting data from users or allowing them to control a user interface. In this article we provide an introduction to the basics of forms and buttons.
Debugging HTML
Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help you find and fix errors in HTML.



Test your skills

You will find "Test your skills" articles placed between the tutorial articles to check whether you have retained the most important information before you move on. If you want to explore all of these together, you can find them listed at Test your skills: HTML.



Additional tutorials

These tutorials are not part of the learning pathway, but they are interesting nonetheless — you should consider these as stretch goals, to optionally study when you are done with the main Core articles.
Including vector graphics in HTML
Vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixelate when zoomed in or blown up to a large size. In this article we'll show you how to include one in your webpage.
From object to iframe — general embedding technologies
Developers commonly think of embedding media such as images, video and audio into web pages. In this article we take somewhat of a sideways step, looking at some elements that allow you to embed a wide variety of content types into your webpages: the <iframe>, <embed> and <object> elements. <iframe>s are for embedding other web pages, and the other two allow you to embed external resources such as PDF files.



See also
Learn HTML and CSS, Scrimba MDN learning partner
Scrimba'sLearn HTML and CSS course teaches you HTML and CSS through building and deploying five awesome projects, with fun interactive lessons and challenges taught by knowledgeable teachers.
Learn HTML, Codecademy
Another useful resource for learning HTML basics.
The basics of semantic HTML, Scrimba MDN learning partner
This interactive lesson provides a useful description of HTML, with particular emphasis on why the semantic aspect of it is important.

Overview: Core learning modules

Next






Help improve MDN
Was this page helpful to you?
Yes No
Learn how to contribute
This page was last modified on Aug 28, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content




Filter sidebar Clear filter input


Learn web development

MDN curriculum

Getting started modules

Environment setup
Installing software

Browsing the web

Code editors

Dealing with files

Command line


Your first website
What will it look like?

Creating the content

Styling the content

Adding interactivity

Publishing


Web standards
How the web works

The web standards model

How browsers load websites


Soft skills
Research and learning

Collaboration and teamwork

Workflows and processes

Finding a job


Core modules

Structuring content with HTML
Basic HTML syntax

Web page metadata

Headings and paragraphs

Emphasis and importance

Lists

Test: HTML text basics

Advanced text features

Test: Advanced HTML text

Challenge: Letter markup

Structuring documents

Creating links

Test: Links

Challenge: Bird watching site

Images

Test: Images

Video and audio

Test: Audio and video

Challenge: Splash page

Table basics

Table accessibility

Challenge: Planet data table

Forms and buttons

Test: Forms and buttons

Challenge: Feedback form

Debugging HTML

Test: HTML tests index

Additional tutorials
Vector graphics

Embedding technologies



CSS styling basics
What is CSS?

CSS getting started

Challenge: Biography page

Basic selectors

Attribute selectors

Pseudo-classes and elements

Combinators

Test: Selectors

Box model

Test: Box model

Handling conflicts

Test: Cascade

Challenge: Fixing blog styles

Values and units

Test: Values and units

Sizing

Test: Sizing

Backgrounds and borders

Test: Backgrounds and borders

Overflow

Test: Overflow

Challenge: Sizing and decorating

Images, media, forms

Test: Images and forms

Styling tables

Challenge: Styling color scheme search

Debugging CSS

Test: Styling basics tests index

Additional tutorials
Advanced styling effects

Cascade layers

Multiple text directions

Organizing your CSS



CSS text styling
Text and font fundamentals

Styling lists

Styling links

Web fonts

Challenge: Community school homepage


CSS layout
Introduction

Floats

Test: Floats

Positioning

Test: Positioning

Flexbox

Test: Flexbox

CSS grid layout

Test: CSS grid

Challenge: Fundamental layout

Responsive web design

Media queries

Test: RWD & media queries

Challenge: mobile-first

Test: Layout tests index

Additional tutorials
Multiple-column layout

Practical positioning examples

Legacy layout methods

Supporting older browsers



Dynamic scripting with JavaScript
What is JavaScript?

JavaScript walkthrough

Troubleshooting

Variables

Test: Variables

Numbers and operators

Test: Math

Strings

String methods

Test: Strings

Arrays

Test: Arrays

Challenge: Story generator

Conditionals

Test: Conditionals

Loops

Test: Loops

Functions

Build your own function

Function return values

Test: Functions

Events

Event bubbling

Test: Events

Objects

Test: Objects

DOM scripting

Challenge: Image gallery

Network requests

JSON

Test: JSON

Challenge: House data UI

Debugging and error handling

Test: JavaScript tests index


JavaScript frameworks and libraries
Introduction

Framework features

React getting started

React ToDo app

React components

React events and state

React editing, filtering, conditional UI

…(内容过长已截断)

------
导航页 打开网址