HTML Elements
Basics
HTML
<html>
This element will always encapsulate the entirety of your HTML code. Everything except for your <!DOCTYPE html> element.
- 100% required
- Parent to all other elements (barring <!DOCTYPE html>)
<!DOCTYPE html>
<html>
<everything-else />
</html>
Head
<head>
This element is reserved to include information about the page that is to be understood by both browsers and search engines.
- Always placed before the <body> element
- Contains meta data
<!DOCTYPE html>
<html>
<head>
<all-of-your-meta-data />
<head>
<everything-else> />
</html>
Body
<body>
This element will contain all of the content of the page, both visual and interactable.
<!DOCTYPE html>
<html>
<head>
<all-of-your-meta-data />
<head>
<body>
<everything-else />
</body>
</html>
Main
<main>
This element contains the primary content of the <body> of the page. It typically excludes the <nav> element
<!DOCTYPE html>
<html>
<head>
<all-of-your-meta-data />
</head>
<body>
<other-content />
<main>
<primary-content />
</main>
<other-content />
</body>
</html>
<header>
This element introduces the content of the page and contains a navigation menu in some cases.
- Placed before the <main> element
<!DOCTYPE html>
<html>
<head>
<all-of-your-meta-data />
</head>
<body>
<header>
<title-and-navigation />
</header>
<main>
<primary-content />
</main>
<other-content />
</body>
</html>
Div
<div>
This element is incredibly versitile. It can be used to create shapes or, more typically, as a container for content on a page.
- Used primarily for design/layout purposes
- Could potentially act as a page within a page
<!DOCTYPE html>
<html>
<head>
<all-of-your-meta-data />
</head>
<body>
<header>
<title-and-navigation />
</header>
<main>
<div></div>
</main>
<other-content />
</body>
</html>
The above example places the <div> element within <main>.
Section
<section>
This element helps to organize the <body>'s content for styling as well as accessibility purposes.
<!DOCTYPE html>
<html>
<head>
<all-of-your-meta-data />
</head>
<body>
<header>
<title-and-navigation />
</header>
<main>
<div>
<section>
<relavent-content />
</section>
</div>
</main>
<other-content />
</body>
</html>
You may have noticed that the <section> element was nested into the <div> here. This would be an example of using a <div> element as a container and is completely optional.
<footer>
This element typically contains information such as copyright, references, and/or the <address> of a company.
- Always placed at the bottom of a page
- After <main>
<!DOCTYPE html>
<html>
<head>
<all-of-your-meta-data />
</head>
<body>
<header>
<title-and-navigation />
</header>
<main>
<div>
<section>
<relavent-content />
</section>
</div>
</main>
<footer>
<page-related-information />
</footer>
</body>
</html>
Text Formatting
Style
<style>
This element allows you to nest CSS code without the need to link a .css file. It is typically used only when very little styling is needed.
- Uses syntax identical to that of a .css file
- Is placed within the <head> element
<!DOCTYPE html>
<html>
<head>
<style>
selector {
property: value;
property: value;
}
selector {
property: value;
property: value;
}
</style>
</head>
</html>
Headings
<h1> through <h6>
These elements are used to format text for headings. <h1> and <h2> elements are often used within <header> elements.
- Ranked by priority and font size
- <h1> is bigger than <h2>, is bigger than <h3>, and so on...
- Text is automatically emboldened
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Basics
HTML
<html>
Hello
Basics
HTML
<html>
Hello
Basics
HTML
<html>
Hello
Basics
HTML
<html>
Hello
Basics
HTML
<html>
Hello