What is an HTML file? A preliminary understanding of HTML files

Aug 13, 2018 pm 07:28 PM

This is an introductory tutorial on HTML5. In order to allow more beginners to find the right direction, this article is all about how beginners can learn HTML5 systematically.

1. What is an HTML file?

The full English name of TML is Hypertext Marked Language, and the Chinese name is "Hypertext Markup Language".

The difference from ordinary text is that an HTML file not only contains text content, but also contains some Tags, which are called "tags" in Chinese.

The suffix of an HTML file is .htm or .html.

You can write HTML files using a text editor.

2. Write an HTML file

The full English name of TML is Hypertext Marked Language, and the Chinese name is "Hypertext Markup Language".

The difference from ordinary text is that an HTML file not only contains text content, but also contains some Tags, which are called "tags" in Chinese.

The suffix of an HTML file is .htm or .html.

You can write HTML files using a text editor.

<html>
<head>
<title>PHP中文网</title>
</head>
<body>
This is my first homepage.<b>This text is bold</b> 
</body>
</html>

To view the first.html file, double-click it. Or open the browser, select Open from the File menu, and then select the file.

The first Tag of this file is . This Tag tells your browser that this is the header of the HTML file. The last Tag of the file is , indicating that the HTML file ends here.

The content between

and is Head information. Head information is not displayed and you cannot see it in the browser. But that doesn't mean the information isn't useful. For example, you can add some keywords to the Head information to help search engines search for your web page.

The content between

and is the title of this file. You can see this title in the title bar at the top of your browser.

The information between

and is the main text.

The text between and is in bold. As the name suggests, it means bold.

HTML files look similar to ordinary text, but they have more tags than ordinary text, such as , , etc. Through these tags, you can tell the browser how to display this file.

HTML Elements

HTML Elements are used to mark text and represent the content of the text. For example, body, p, and title are HTML elements.

HTML elements are represented by Tag, which starts with .

Tag usually appears in pairs, such as

. The starting one is called Opening Tag, and the ending one is called Closing Tag.

Currently, HTML Tags are not case-sensitive. For example, and are actually the same.

Attributes of HTML Elements

HTML elements can have attributes. Attributes extend the capabilities of HTML elements.

For example, you can use a bgcolor attribute to make the background color of the page red, like this:

Another example , you can use the border attribute to set a table to a borderless table. As follows:

Attributes usually appear in pairs of attribute name and value, like this: name="value". In the above example, bgcolor and border are name, red and 0 are value. Attribute values are generally marked with double quotes. The attribute is usually attached to HTML's Opening Tag, not the Closing Tag.

Text title

This example shows you how to define the text title in an HTML file.

HTML uses tags from

to

to define the text title, from large to small. Each text title is its own paragraph.

<h1>This is a heading</h1>
<h2 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h2>
<h3 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h3> 
<h4 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h4> 
<h5 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h5> 
<h6 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h6>

Paragraph division

Use

and

to divide paragraphs in HTML.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Line break

By using the
tag, you can wrap the line without creating a new paragraph.
No Closing Tag. It is a bad habit to use

for line breaks. The correct thing is to use
.

This
is a para
graph with line breaks

HTML comments

In HTML In the file, you can write code comments to explain your code, which will help you and others better understand your code in the future.

Comments can be written between . Browsers ignore comments, and you won't see your comments in the HTML body.

<!--This is a comment -->

Some tips

HTML files will automatically cut off extra spaces. No matter how many spaces you add, they are all counted as one space. A blank line is also considered a space.

Some Tags can separate the text into a paragraph without using

to segment it. For example, title tags such as

[Related recommendations]

The development history of HTML and HTML5

Basic elements of html, allowing you to learn HTML from scratch

The above is the detailed content of What is an HTML file? A preliminary understanding of HTML files. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

HTML5: The Standard and its Impact on Web DevelopmentApr 27, 2025 am 12:12 AM

The core features of HTML5 include semantic tags, multimedia support, offline storage and local storage, and form enhancement. 1. Semantic tags such as, etc. to improve code readability and SEO effect. 2. Simplify multimedia embedding with labels. 3. Offline storage and local storage such as ApplicationCache and LocalStorage support network-free operation and data storage. 4. Form enhancement introduces new input types and verification properties to simplify processing and verification.

H5 Code Examples: Practical Applications and TutorialsApr 25, 2025 am 12:10 AM

H5 provides a variety of new features and functions, greatly enhancing the capabilities of front-end development. 1. Multimedia support: embed media through and elements, no plug-ins are required. 2. Canvas: Use elements to dynamically render 2D graphics and animations. 3. Local storage: implement persistent data storage through localStorage and sessionStorage to improve user experience.

The Connection Between H5 and HTML5: Similarities and DifferencesApr 24, 2025 am 12:01 AM

H5 and HTML5 are different concepts: HTML5 is a version of HTML, containing new elements and APIs; H5 is a mobile application development framework based on HTML5. HTML5 parses and renders code through the browser, while H5 applications need to run containers and interact with native code through JavaScript.

The Building Blocks of H5 Code: Key Elements and Their PurposeApr 23, 2025 am 12:09 AM

Key elements of HTML5 include,,,,,, etc., which are used to build modern web pages. 1. Define the head content, 2. Used to navigate the link, 3. Represent the content of independent articles, 4. Organize the page content, 5. Display the sidebar content, 6. Define the footer, these elements enhance the structure and functionality of the web page.

HTML5 and H5: Understanding the Common UsageApr 22, 2025 am 12:01 AM

There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.

HTML5: The Building Blocks of the Modern Web (H5)Apr 21, 2025 am 12:05 AM

HTML5 is the latest version of the Hypertext Markup Language, standardized by W3C. HTML5 introduces new semantic tags, multimedia support and form enhancements, improving web structure, user experience and SEO effects. HTML5 introduces new semantic tags, such as, ,, etc., to make the web page structure clearer and the SEO effect better. HTML5 supports multimedia elements and no third-party plug-ins are required, improving user experience and loading speed. HTML5 enhances form functions and introduces new input types such as, etc., which improves user experience and form verification efficiency.

H5 Code: Writing Clean and Efficient HTML5Apr 20, 2025 am 12:06 AM

How to write clean and efficient HTML5 code? The answer is to avoid common mistakes by semanticizing tags, structured code, performance optimization and avoiding common mistakes. 1. Use semantic tags such as, etc. to improve code readability and SEO effect. 2. Keep the code structured and readable, using appropriate indentation and comments. 3. Optimize performance by reducing unnecessary tags, using CDN and compressing code. 4. Avoid common mistakes, such as the tag not closed, and ensure the validity of the code.

H5: How It Enhances User Experience on the WebApr 19, 2025 am 12:08 AM

H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

1 months agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

1 months agoByDDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks agoByDDD

InZoi: How To Apply To School And University

3 weeks agoByDDD

Hot Tools

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Dreamweaver Mac version

Visual web development tools

WebStorm Mac version

Useful JavaScript development tools

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),