An HTML element is a marked-up unit of a web page. It can define an area, such as a header or footer, or hold content, such as a heading or paragraph. Elements are written with tags around their content, and together they give a page structure that a browser can display. section 12.2.1
Common page-layout elements include:
- header contains introductory content such as a site title, logo, or tagline. section 12.2.1
- nav contains navigation links to other parts of a site. section 12.2.1
- main contains the content unique to the current page; a page can have only one main element. section 12.2.1
- section groups a heading and related content into a part of the page outline. section 12.2.1
- p marks a chunk of text as a paragraph, while footer contains closing content such as copyright or contact information. section 12.2.1
A small page structure
A book-club page might place its logo and title in a header, put the welcome message and reading information inside main, divide those topics into sections, and finish with a footer containing copyright and social links. A simple element might look like <h1>Welcome to Code & Prose!</h1>; the text between the tags appears as the page’s main heading. section 4.2.6 section 2.2.1
<header>
<img src="super-baker.png" alt="The Super Baker Logo">
<h1>The Super Baker</h1>
<p>The ultimate guide to super-powered baking. Learn how to
make delicious treats that will boost your energy,
strength, and speed.</p>
</header>
Inspect a complete header element containing an image, heading, and tagline. section 12.2.1
HTML elements provide the structure; CSS can style that structure. For example, a CSS rule can change the font size of a selected element, while the element’s tags and text remain in the HTML. section 2.2.1
