HTML5 is the introductory foundation for front-end development, suitable for beginners to get started quickly. 1. The basic structure includes four key tags: , ,
and ; 2. Common semantic tags such as <header>, <nav>, <main>, <section>, <article>, <aside> and <footer> can improve the clarity of web page structure; 3. The form function is enhanced, supporting multiple input types such as text, email, password, number, etc., and have verification attributes; 4. Natively support multimedia, and easily embed audio and video content through <audio> and <video> tags.

HTML5 is the foundation of modern web development. If you are new to front-end development, starting with HTML5 is the most natural choice. It not only has a clear structure and is easy to use, but it can also help you quickly build a complete web page. Don't worry about how "technical" it sounds. In fact, you can start writing code by just understanding a few core concepts.

1. Basic structure: the skeleton required for every HTML page
Regardless of whether you are going to do a simple introduction page or a complex interactive page, the basic structure of HTML5 is similar. You only need to remember a few key tags:
-
: Tell the browser that this is an HTML5 document
-
: The root element of the entire web page
-
: Meta-information of the page, such as title, encoding method, style sheet link, etc.
-
: Put content that users can see, such as text, pictures, buttons, etc.
A basic example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My first HTML5 page</title>
</head>
<body>
<h1>Welcome to my website! </h1>
<p>This is my first HTML paragraph. </p>
</body>
</html>
You can save this code into a .html
file and open it in a browser to see the effect.
2. Commonly used tags: building blocks for content
HTML5 provides many semantic tags to make the web page structure clearer. Compared to the previous pile of <div>
s, we can now organize the content with more meaningful tags:

-
<header>
: The header of a page or block -
<nav>
: Navigation bar -
<main>
: Main content area -
<section>
: Content block -
<article>
: Independent content unit, such as a blog post -
<aside>
: Sidebar or additional content -
<footer>
: Bottom information
While these tags don't directly affect the style (unless you write CSS), they help search engines and screen readers better understand your page structure.
For example:
<header>
<h1>My Blog</h1>
<nav>
<a href="#">Home</a>
<a href="#">About me</a>
</nav>
</header>
<main>
<article>
<h2>First article</h2>
<p>This is a short article. </p>
</article>
</main>
<footer>
<p>? 2025 My Blog</p>
</footer>
In actual projects, you often need to ask users to enter information, such as registering, logging in, or submitting feedback. HTML5 has made many improvements in form, and has added a lot of input types and verification functions.
Common input types include:
-
<input type="text">
: Text input box -
<input type="email">
: The mailbox input box will automatically check the format -
<input type="password">
: Password input box -
<input type="number">
: digital input -
<textarea>
: Multi-line text input -
<select>
<option>
: drop-down selection box
Example:
<form action="/submit" method="post">
<label>Name: <input type="text" name="name" required></label><br>
<label>Email: <input type="email" name="email" required></label><br>
<label>Age: <input type="number" name="age"></label><br>
<button type="submit">Submit</button>
</form>
Note the required
property here, which means that this field is a required item. The browser will give a prompt if the user does not fill in it.
One of the biggest highlights of HTML5 is that it supports multimedia content natively and does not need to rely on Flash or other plug-ins. You can use <audio>
and <video>
tags to insert audio and video files directly.
For example, insert a video:
<video src="movie.mp4" controls width="600">
Your browser does not support the video tag.
</video>
The controls
property displays the playback control. You can add multiple <source>
tags to support different formats:
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Basically that's it. The learning curve of HTML5 is not steep, the key is to write code and practice more. At first you may feel that there are too many labels to remember, but as you work more and more projects, these labels will naturally become familiar. When you encounter problems, you might as well check the documents or see how others write them, and you will get started slowly.
The above is the detailed content of Getting Started with HTML5. For more information, please follow other related articles on the PHP Chinese website!