The Palace Museum
The Palace Museum is a national museum housed in the Forbidden City at the core of Beijing, China. It was established in 1925 after the last Emperor of China was evicted from his palace, and opened its doors to the public.
HTML Elements are components that make up a web page.
Elements start with an opening tag and end with a closing tag.
Opening tags looks like this: <tagname>. And closing tags: </tagname>.
Element examples include <table>, <div>, <input>, and <img>.
An <article> element with nested <h3> and <p> elements.
The Palace Museum is a national museum housed in the Forbidden City at the core of Beijing, China. It was established in 1925 after the last Emperor of China was evicted from his palace, and opened its doors to the public.
<article>
<h3>The Palace Museum</h2>
<p>
The Palace Museum is a national museum housed in
the Forbidden City at the core of Beijing, China.
It was established in 1925 after the last Emperor
of China was evicted from his palace, and opened
its doors to the public.
</p>
</article>
Some commonly used elements:
| Tag | Description |
|---|---|
| <a> | Creates a link (hyperlink) to another page |
| <aside> | Creates an area for content that is related to the primary content on a page |
| <audio> | Creates a player for music, sound effects, etc |
| <br> | Creates a line break |
| <button> | Creates a clickable button |
| <div> | Creates a division or section on a page |
| <form> | Defines a data entry area with input elements |
| <h1>-<h6> | Defines text headings in 6 different sizes |
| <input> | Creates an input field for data entry |
| <label> | Creates a brief description before input elements |
| <ol> | Creates a numerically or alphabetically ordered list |
| <p> | Creates a paragraph |
| <script> | Adds JavaScript to a page |
| <section> | Defines and area for stand-alone content |
| <select> | Creates a dropdown control |
| <span> | A container for inline text elements |
| <textarea> | Creates a multi-line text input control |
| <title> | Specifies the title of the page |
| <video> | Creates a video player for movies, etc. |
For a complete list see our HTML Tag List.
Tip: There are about 100 HTML tags in total.
Images are defined with the <img> tag.
<img src="/img/html/vangogh.jpg"
alt="Van Gogh Self-Portrait" />
The <img> tag is self-closing without a separate closing tag.
The alt text displays if the image cannot be loaded.
Below are more examples of common HTML elements.
A paragraph is defined by an opening <p> tag and a closing </p> tag.
It formats the text as a paragraph with space between other paragraphs.
Two <p> elements.
The Louvre Museum is the world's largest art museum and a historic monument in Paris, France. A central landmark of the city, it is located on the Right Bank of the Seine in the city's 1st arrondissement (district or ward). Approximately 38,000 objects from prehistory to the 21st century are exhibited over an area of 72,735 square meters (782,910 square feet). In 2019, the Louvre received 9.6 million visitors, making it the most visited museum in the world.
The museum is housed in the Louvre Palace, originally built as the Louvre castle in the late 12th to 13th century under Philip II. Remnants of the fortress are visible in the basement of the museum. Due to urban expansion, the fortress eventually lost its defensive function, and in 1546 Francis I converted it into the primary residence of the French Kings.
<p>
The <b>Louvre Museum</b> is the world's largest
art museum and a historic monument in Paris,
France. A central landmark of the city, it is
located on the Right Bank of the Seine in the
city's 1st arrondissement (district or ward).
Approximately 38,000 objects from prehistory to
the 21st century are exhibited over an area of
72,735 square meters (782,910 square feet). In
2019, the Louvre received 9.6 million visitors,
making it the most visited museum in the world.
</p>
<p>
The museum is housed in the Louvre Palace,
originally built as the Louvre castle in the
late 12th to 13th century under Philip II.
Remnants of the fortress are visible in the
basement of the museum. Due to urban expansion,
the fortress eventually lost its defensive
function, and in 1546 Francis I converted it
into the primary residence of the French Kings.
</p>
Note: Paragraphs are displayed in block, meaning they start and end with a new-line. To create inline text -- without a new-line -- use the <span> tag.
For details on paragraphs, see our HTML p Tag Reference.
Links (hyperlinks) are defined with an anchor tag: <a>.
Link to <a href="https://google.com"
target="_blank">Google</a>.
Note: The href attribute specifies the page or site the user will be redirected to.
The <a> tag can also link to email.
This link opens your email client, such as, Outlook.
Send email to
<a href="mailto:debbie@company.com">
Deborah Walker
</a>
Note: The mailto: prefix indicates that an email must be sent instead of page redirection.
For details on links (the <a> tag), see our HTML anchor Tag Reference.
Headings have different sizes starting from <h1> (largest) to <h6> (smallest).
<h1> This is heading 1 </h1>
<h2> This is heading 2 </h2>
<h3> This is heading 3 </h3>
<h4> This is heading 4 </h4>
<h5> This is heading 5 </h5>
<h6> This is heading 6 </h6>
Each <h1> - <h6> tag has a default font size, but this can be changed with CSS.
Tip: A web page can have only one <h1> tag, but multiple <h2> - <h6> tags.
For details on heading tags, see our HTML h1 to h6 Tag Reference.
Some HTML elements are placed inside other tags.
In this example, the <th>, <td>, and <tr> tags (table columns and rows) are placed inside a <table> tag.
| FIRST NAME | LAST NAME |
|---|---|
| Denice | Hobermann |
| Paulo | Cornell |
<style>
table.tb { width:300px; border-collapse: collapse; }
.tb th, .tb td { border: solid 1px #777; padding: 5px; }
.tb th { background-color: aliceblue; }
</style>
<table class="tb">
<tr>
<th>FIRST NAME</th>
<th>LAST NAME</th>
</tr>
<tr>
<td>Denice</td>
<td>Hobermann</td>
</tr>
<tr>
<td>Paulo</td>
<td>Cornell</td>
</tr>
</table>
Most elements require a begin tag and end tag.
Others use a single tag, such as <img />, <br /> and <hr />.
These are called self-closing tags.
Some elements may display correctly without an end tag - but don't rely on this.
For a list of all tags, see our HTML Tag List.
Comments can be added to the HTML code. Developers use these for documentation purposes.
They are defined using a <!-- comment --> tag. Users do not see the comments.
This paragraph is visible. The above comment is not.
<!-- Comments are not displayed in the browser -->
<p>
This paragraph is visible.
The above comment is not.
</p>
Next is an example in which an entire block of code is commented out, i.e. nothing will show. Developers use this technique during development of complex pages.
<!--
This is a block of comments.
<p>This element will not be displayed.</p>
-->
For details on HTML comments, see our HTML comment Reference.
HTML allows you to create your own tags.
Here's how: first, define the new tag's attributes in CSS, like so:
product {
color: #f45d49;
font-size: 16px;
padding: 15px;
...
}
With this, you can use your custom tag freely.
It will render according to your CSS.
<product>Biscuits</product>
Tip: Although browsers do support custom tags, it's not officially supported by the HTML5 standard. For this reason, it is better not to use it.
