Skip to content

HTML Structure: Elements

Jump to bottom
Kay edited this page Jan 20, 2016 · 2 revisions

HTML Structure: Elements | W3schools.com

20 min

Elements are the individual parts of an HTML document. They define the structure of the page. http://i.imgur.com/PL0rLJl.png

Some elements are required:

<!DOCTYPE html>
<html>
<head>
  <title>BEST WEBSITE EVERRR</title>
</head>
<body>
  <!-- Contents of the page go here -->
</body>
</html>

Nesting Elements

<h1>My Favorite Food</h1>
<p>I love spaghetti. Those wet noodles and topped with my <i>favorite</i> sauce and vegetables are <u>all</u> I need in life. Especially when there's garlic involved! <b>Lots</b> of garlic!</p>

<p>My second favorite food is hotdogs. But that's a super distant second!</p>

Display a reference on the screen with a list of HTML elements.

Semantics | MDN Reference

Note how each element is well described by it's name. Paragraphs get the p tag, italics get the i tag. Good mark-up has strong semantics. This makes it easier to read and understand.

Keep that idea in mind as you learn tags. Semantic code is easier to learn.

Vocabulary: DOM, element, hierarchy, web browser, tag

Think about any word processor you've used such as Microsoft Word. You can make text bold, underlined, big or small, red or blue. If you could see the elements on the words and paragraphs, you'd see the markup looks very similar to what we see with HTML.

Structure: Inline vs Block Items | MDN Reference

These refer to different types of elements. Block elements are elements which always start a new line and occupy the width of it. Inline elements do not.

Explore: h1, a, span, br, b, i, u, form, input, button, img, nav, footer, header, ul, ol, table, td, tr

These refer to different types of elements. Block elements are elements which always start a new line and occupy the width of it. Inline elements do not.

Frontend Crash Course

Clone this wiki locally