How to create a simple HTML5 webpage-H5 Tutorial-php.cn

Table of Contents

Basic HTML5 Document Structure

Adding Common Elements

Saving and Viewing the Page

Home

Web Front-end

H5 Tutorial

How to create a simple HTML5 webpage

Margaret Anne Kelly

Aug 12, 2025 am 11:51 AM

html5 Web page

To create a simple HTML5 web page, you need to first use to declare the document type, and then build a basic structure containing ,

and . The character encoding, viewport and title are set in , and add visible content such as title, paragraph, link, pictures and lists in . After saving it as a .html file, you can open it directly in the browser to view it without server support. This is the basis of a complete and effective HTML5 page. How to create a simple HTML5 webpage

Creating a simple HTML5 webpage is straightforward once you understand the basic structure and elements. Here's how to get started with a clean, valid HTML5 page.

Basic HTML5 Document Structure

Every HTML5 page starts with a document type declaration and follow a standard structure. Here's the minimum setup:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML5 Page</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a simple paragraph of text.</p>
</body>
</html>

Let's break down what each part does:

<ul>

<!DOCTYPE html> : Tells the browser this is an HTML5 document.

<html lang="en"> : The root element; the lang attribute specifies the language (English in this case).

<head> : Contains metadata, the page title, and links to external resources.<ul>

<meta charset="UTF-8"> : Ensures proper text encoding.

<meta name="viewport"> : Makes the page responsive on mobile devices.

<title> : Sets the title shown in the browser tab.

<body> : Contains all visible content.

Adding Common Elements

You can enhance your page by including common HTML elements:

<ul>

Headings : Use <h1> to <h6> for titles and subtitles.

Paragraphs : Wrap text in  tags.

Links : Use <a href="url">link text</a> .

Images : Insert with <img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="How to create a simple HTML5 webpage"> .

Lists : Use <ul> for bullet lists or <ol> for numbered ones.

Example with added content:

 <h2>About Me</h2>
<p>I&#39;m learning HTML5. Here are some things I enjoy:</p>
<ul>
    <li>Reading</li>
    <li>Coding</li>
    <li>Walking in nature</li>
</ul>

<p>Visit my <a href="https://example.com">example page</a>.</p>
<img src="/static/imghw/default1.png"  data-src="profile.jpg"  class="lazy" alt="My profile photo">

Saving and Viewing the Page

<ul>

Save the file with a .html extension, like index.html .

Open it in any web browser (Chrome, Firefox, etc.) by double-clicking the file.

You can edit it later using a text editor like Notepad, VS Code, or Sublime Text.

No server is needed for a basic page — it runs directly from your computer.

Basically, that's all you need for a simple, working HTML5 webpage. Add more elements as you learn, but this foundation covers the essentials.

The above is the detailed content of How to create a simple HTML5 webpage. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress images for free

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undresser.AI Undress

AI-powered app for creating realistic nude photos

ArtGPT

AI image generator for creative art from text prompts.

Stock Market GPT

AI powered investment research for smarter decisions

Hot Article

How to use AI Speech Enhancement in Premiere? (Audio Cleanup Guide)

1 months ago By 下次还敢

How to correctly migrate jQuery's drag and drop events to native JavaScript

4 weeks ago By DDD

What is 'EVM'? The significance of the Ethereum Virtual Machine

1 months ago By DDD

The Notepad upgrade, cheaper YouTube TV, and Nova Launcher's new owner: News roundup

3 weeks ago By DDD

How to dynamically set arbitrary depth value of nested array in PHP

1 months ago By DDD

Popular tool

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Douyin level price list 1-75

20516

wifi shows no ip assigned

13630

Virtual mobile phone number to receive verification code

11966

Where is the login entrance for gmail email?

8985

How to turn off windows security center

8505

Related knowledge

How to quickly create a virtual human explanation video with Synthesia_Synthesia virtual human video production guide [Quick] Dec 18, 2025 pm 06:54 PM

Synthesia can quickly generate high-quality virtual human explanation videos: 1. Select a virtual human and customize the voice intonation; 2. Paste the script to enable automatic lip synchronization; 3. Add dynamic backgrounds and graphic and text layers; 4. Generate multi-language versions in batches with one click; 5. Export MP4 or embed HTML5 code for publication.

What to do if the IE browser web page loads slowly? IE browser performance optimization Jan 15, 2026 pm 02:21 PM

Optimization methods for slow loading of IE web pages include: 1. Disable non-essential add-ons; 2. Reset IE settings; 3. Adjust connection and advanced parameters; 4. Clean system temporary files and DNS cache; 5. Turn off hardware acceleration and set to standard document mode.

Quark Browser video cannot be played. Steps to troubleshoot Quark Browser playback problems. Jan 22, 2026 am 09:30 AM

Solutions to abnormal video playback in Quark browser include: 1. Check network connection and access permissions; 2. Clear cache and website data; 3. Enable JavaScript and H5 playback support; 4. Switch to desktop version of UA; 5. Turn off hardware acceleration and reset media services.

3699 mini-games online play entrance, latest decompression mini-games updated daily Jan 13, 2026 pm 02:12 PM

The entrance address for online play of 3699 mini games is https://www.3699.com. The platform is based on HTML5 technology and runs without plug-ins. It supports multi-terminal adaptation, CDN acceleration, preloading optimization, and decompressed games are updated daily, classified according to emotional dimensions, and taking into account both interaction friendliness and privacy and security protection.

What to do if Microsoft Edge video clarity is blurred Microsoft Edge image quality adjustment Jan 04, 2026 am 10:24 AM

Edge video blur can be enabled by enabling VSR, using the enhancement button, configuring NVIDIARTX overclocking, turning off hardware acceleration or checking DRM restrictions. The corresponding solution needs to be selected based on the graphics card model, browser version and video encryption.

What should you pay attention to when collecting Shenma search on the mobile terminal? Tips for adapting to the mobile terminal [Instructions] Jan 04, 2026 am 11:00 AM

In order to improve the inclusion effect of Shenma Search mobile terminal, it is necessary to adopt independent adaptation (self-jumping), add mobile-agentMeta statement, submit corresponding Sitemap for PC and mobile pages, ensure that the basic quality of mobile pages meets the standards, and verify the effective status of adaptation.

Browser browser high-definition rendering version address browser browser organ network high-definition rendering version clearly presented Dec 20, 2025 am 09:30 AM

The address of browser browser HD rendering version is https://www.browser-hd-render.com, which features 4K sharp rendering, HDR video playback, Brotli compression optimization, end-to-end encrypted synchronization and accessibility auxiliary functions.

How to set full-screen mode in uc browser_Steps to set full-screen mode in uc browser [Compilation] Jan 14, 2026 pm 09:27 PM

There are five ways to solve the problem that UC Browser cannot go full screen: 1. Turn on the full screen switch through the toolbox; 2. Add UC smart components in the settings; 3. Switch UA to the computer version and refresh the page; 4. Use the F11 key or double-click the video and other system-level operations; 5. Clear the web page and GPU cache and then restart.