HTML Elements
HTML Elements （HTML元素）
Elements are the fundamentals of HyperText Markup Language (HTML). Each HTML document is made of elements that are specified using tags. （元素是超文本标记语言(HTML)的基础。每个HTML文档由使用标记指定的元素组成。）
HTML elements and HTML tags are often confused. The tags are used to open and close the object, whereas the element includes both tags and its content. Let’s consider an example with the <h1> tag: <h1> Title of the document </h1> - is an element, and <h1>, </h1> - are tags.
Types of HTML Elements
Types of HTML Elements （HTML元素的类型）
HTML elements can come in pairs or be empty. The paired elements have an opening (<>) and (</>) closing tags, and the content of the element is placed in between them.
Do not forget the closing tag! Though some HTML elements are displayed correctly, even without the closing tag, however, do not rely on this. It might lead to unexpected results or errors. （>别忘了最后的标签！尽管某些HTML元素显示正确，但即使没有结束标记，也不依赖于此。这可能会导致意想不到的结果或错误。）
The empty elements have no closing tags. In XHTML the empty elements are “closed” in the opening tag like this: <br/> .
The empty elements in HTML are: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track> and <wbr>.
Example of the HTML empty elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p>The second paragraph, <br/> where line break is inserted </p>
</body>
</html>
Result
In the above-mentioned example we used 4 paired elements:
the <html> element, which includes all other HTML elements of the webpage,
the <body> element, which contains the body of the webpage,
the <p> element, that define a paragraph,
the <h1> element, which contains the heading of the webpage.
In the given example we also used an empty <br> tag to insert a line-break.
Block-level and Inline HTML Elements
Block-level and Inline HTML Elements （块级和内联HTML元素）
For the purpose of styling, all HTML elements are divided into two categories: block-level elements and inline elements.
Block-level elements are those that structure the main part of your web page, by dividing your content into coherent blocks. They always start on a new line and take up the full width of a page, from left to right; they also can take up one line or multiple lines and have a line break before and after the element. Block-level elements can include both block-level & inline elements. （块级元素是通过将内容划分为连贯的块来构建网页主要部分的元素。它们总是从一行开始，从左到右占据页面的整个宽度；它们还可以占用一行或多行，并在元素之前和之后有一个换行符。块级元素可以包括块级和内联元素。）
Block-level elements are <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
All block-level elements have opening and closing tags. （所有块级元素都有开始和结束标签。）
Example of the HTML block-level elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<footer>
<p>Author: w3cdoc team</p>
<p><a href="[email protected]">Send message to the author</a>.</p>
</footer>
</body>
</html>
Result
In the example we used <footer> block-level element to define the footer of the web page and its content.
Inline elements are used to distinguish part of a text, to give it a particular function or meaning. Inline elements usually include a single or a few words. They do not cause a line break and do not take up the full width of a page, only the space bounded by its opening and closing tag. The inline elements are usually used within other HTML elements. （内联元素用于区分文本的一部分，赋予其特定的功能或含义。内联元素通常包括一个或几个单词。它们不会导致换行，也不会占用页面的全部宽度，只占用由其开始和结束标记限定的空间。内联元素通常用于其他HTML元素。）
Inline elements are: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt> and <var>.
Nested HTML elements
Nested HTML elements （嵌套的HTML元素）
HTML elements can contain other elements, i.e. be nested. For example, if you want to give a text a strong emphasis and tell the browser to display it as bold, you can use the <strong> tag nested in the <p> tag.
Example of the HTML nested elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p><strong>This part of the sentence</strong> has a strong emphasis and is displayed as bold.</p>
</body>
</html>
HTML tags should be “nested” in proper order, meaning that the tag opened most recently is always the next tag to close. （> HTML标记应按正确的顺序“嵌套” ，这意味着最近打开的标记始终是下一个要关闭的标记。）
In our example, we closed the <strong> tag first, and then the <p> tag.
The end tag
The end tag （结束标记）
In the end you should put the end tag. However, even if you forget about it, some HTML elements will still show correctly. The closing tag is considered to be optional, so the example below will work in all the browsers. But don’t rely on this. If you want to avoid unexpected errors try not to forget about the end tag. （最后，您应该放置结束标记。但是，即使您忘记了它，一些HTML元素仍然会正确显示。结束标记被认为是可选的，因此以下示例适用于所有浏览器。但不要依赖这个。如果您想避免意外错误，请尽量不要忘记结束标记。）
Example where the HTML end tag is absent:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML end tag </h1>
<p>We forgot to put the end tag.
</body>
</html>
Empty HTML Elements
Empty HTML Elements （空HTML元素）
The HTML elements that don’t have any content are called empty elements. The <br>, which defines a line break, is an empty element that doesn’t have a closing tag.
Example of the HTML <br> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML <br> tag</h1>
<p>This tag <br> defines a line break.</p>
</body>
</html>