Link Search Menu Expand Document
HTML&CSS

HTML Structure

Class Agenda

  1. HTML Structure
  2. Anatomy of an HTML element
  3. HTML Page Structure

1. HTML Structure

“At its heart, HTML is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a document”. [1]

HTML is composed of elements. e.g a paragraph element looks like:

<p>Hello world!</p>

2. Anatomy of an HTML element

  • What is an HTML tag?
  • What is the opening tag?
  • What is the content?
  • What is the closing tag?
  • Do all elements contain a closing tag?
  • What is an Attribute?
  • What is a Semantic Tag?
  • What is an inline element and what is a block element? What is the difference between them?

3. HTML Page Structure

  • What is DOCTYPE tag?
  • What is the <html> tag?
  • What goes in the <head> tag?
  • What is the <body>?
  • What goes in the <body> tag?
  • What is the <title> tag
  • What is the common meta tag usage <meta name="description">, <meta charset="">.

4. Browser DevTools

If time allows it, we would look into browser code inspection via the dev tools. This is a useful way of debugging our html and css code. Therefore, we would need to know how to open the dev tools and work with the basic Elements tab of tools.

Exercise Description

  • Open a webpage and look in the dev tools, and identify tags discussed above.
  • Make sure you have set up your environment as we are about to start working more often with code.
  • Try reaching checkpoint 3, which contains the new things taught in class. Add the following tags also:
    • Add a Doctype tag to the page
    • Add a meta tag

Glossary & Terminology

  • Block HTML Element - A Block Element always starts on a new line and take up the entire width.
  • Browser Viewport - The browser viewport is the size of the rectangle that a web page fills on your screen
  • Charset Encoding - Character encoding is used to represent a repertoire of characters by some encoding system that assigns a number to each character for digital representation, you can read more about it here
  • Empty HTML Element - An Empty HTML Element has no child or text content
  • HTML Attribute - An HTML attribute is used to change the behavior of an HTML element or to provide metadata for that element
  • HTML Element - An HTML element is the fundamental functional unit in an HTML document
  • HTML Tag - An HTML tag is a word/text surrounded by angle brackets, they are used to create HTML elements
  • Inline HTML Element - An Inline Element does not start on a new line and take up as much width as necessary
  • Semantic HTML Element - A Semantic HTML Element describes its meaning to both the browser and the developer. In other words, the html tag of a semantic element is very easy to understand by developers. For example, <table> is a semantic element that would create a table on the page.

Homework

Resources