Detailed introduction to HTML elements
HTML documents are defined by HTML elements.
HTML elements
Start tag * | Element content | End tag * |
---|---|---|
This is a paragraph | ||
This is a link | ||
|
*The opening tag is often called opening tag, and the ending tag is often called closing tag.
HTML Element Syntax
HTML elements start with tags start with
- ##
HTML elements end with the
tag terminated
- element
is the content between the start tag and the end tag
- empty content
- are closed in the opening tag
(end with the end of the opening tag)
-
## Most HTML elements can have the - attribute
: You will learn more about properties in the next chapter of this tutorial. Nested HTML elements
HTML documents are composed of nested HTML elements.
HTML document example
This is my first paragraph.
The above example contains three HTML elements.
HTML example analysis
The
element:
This is my first paragraph.
element defines a paragraph in an HTML document.
This element has an opening tag
and an ending tag
. The element content is: This is my first paragraph.
The
This is my first paragraph.
The
This element has an opening tag and an ending tag . The element content is another HTML element (the p element).
The element:
This is my first paragraph.
The element defines the entire HTML document.
This element has an opening tag and an ending tag .
The element content is another HTML element (the body element).
Don’t forget the closing tag
Even if you forget to use the closing tag, most browsers will display the HTML correctly:
This is a paragraph
This is a paragraph
The above example also displays fine in the browser because closing the tag is optional.
But don't rely on this approach. Forgetting to use a closing tag can produce unpredictable results or errors.
HTML empty element
An HTML element with no content is called an empty element. Empty elements are closed in the opening tag.
is an empty element without a closing tag (
tag definition wraps).
In XHTML, XML, and future versions of HTML, all elements must be closed.
Adding a slash in the opening tag, such as
, is the correct way to close an empty element, and is accepted by HTML, XHTML, and XML.
Even though
works in all browsers, using
is actually safer in the long run.
HTML Tip: Use lowercase tags
HTML tags are not case-sensitive:
is equivalent to
. Many websites use uppercase HTML tags.
W3CSchool uses lowercase tags because the World Wide Web Consortium (W3C) recommends the use of lowercase in HTML 4, and will mandatory use it in future (X)HTML versions lower case.
The above is the detailed content of Detailed introduction to HTML elements. For more information, please follow other related articles on the PHP Chinese website!

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

Hot Tools

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



We will also cover another way to execute a PHP function through the onclick() event using the Jquery library. This method calls a javascript function, which will output the content of the php function in the web page. We will also demonstrate another way to execute a PHP function using the onclick() event, calling the PHP function using pure JavaScript. This article will introduce a way to execute a PHP function, use the GET method to send the data in the URL, and use the isset() function to check the GET data. This method calls a PHP function if the data is set and the function is executed. Using jQuery to execute a PHP function through the onclick() event we can use

How to read excel data in html: 1. Use JavaScript library to read Excel data; 2. Use server-side programming language to read Excel data.

The difference between appendChild and append in JS requires specific code examples. In JavaScript, when we need to dynamically add child elements to the DOM (Document Object Model), we usually use the appendChild and append methods. Although their purpose is to add child elements to parent elements, there are some differences in their use. 1. appendChild method The appendChild method is one of the methods of the DOM node object. Use

Use the <br> tag in Dreamweaver to create line breaks, which can be inserted through the menu, shortcut keys or direct typing. Can be combined with CSS styles to create empty rows of specific heights. In some cases, it is more appropriate to use the <p> tag instead of the <br> tag because it automatically creates blank lines between paragraphs and applies style control.

Usage of Transform in CSS The Transform property of CSS is a very powerful tool that can perform operations such as translation, rotation, scaling and tilting of HTML elements. It can dramatically change the appearance of elements and make web pages more creative and dynamic. In this article, we will introduce the various uses of Transform in detail and provide specific code examples. 1. Translate (Translate) Translate refers to moving an element a specified distance along the x-axis and y-axis. Its syntax is as follows: tran

jQuery is a widely used JavaScript library that provides many convenient methods to manipulate HTML elements. In the process of developing web pages, we often encounter situations where we need to determine whether there are sub-elements within an element. In this article, we will introduce how to use jQuery to achieve this function and provide specific code examples. To determine whether there are child elements within an element, we can use jQuery's children() method. The children() method is used to obtain matches

Ridge is a border style in CSS that is used to create a 3D border with an embossed effect, which is manifested as a raised ridge-like line.

The hover pseudo-class in CSS is a very commonly used selector that allows us to change the style of an element when the mouse is hovering over it. This article will introduce the usage of hover and provide specific code examples. 1. Basic Usage To use hover, we need to first define a style for the element, and then use the :hover pseudo-class to specify the corresponding style when the mouse is hovering. For example, we have a button element. When the mouse hovers over the button, we want the background color of the button to change to red and the text color to white.
