Introduction to HTML

Learning Goals

  • Understand structure of an HTML page
  • Understand difference between semantic/non-semantic tags

WarmUp

  • What does HTML stand for?
  • What do you know about HTML so far?

Intro (3-5 minutes)

  • What is HTML? Simply put, it is the skeleton structure of a web page.

  • What do we mean by semantic vs. non-semantic elements? Semantic elements help provide context for what they contain. Here are some example of semantic elements:

Non-semantic elements definitely still have a place in our HTML and are used. However, before reaching for non-semantic elements think “can a semantic one be used instead”.

Non-Semantic Elements:

Exploration

Take time to look at the HTML for each section and ask yourself these questions: Article

  • What is the skeleton of this section? How does it fit in with the other sections? Can you roughly sketch what the section falls within the page?

  • Do you have repeating elements? What are they and why do you think they are repeating?

  • Is there anything interesting you notice about the elements(excluding the content)?

  • Does your section have semantic elements what are they?

  • Does your section use non-semantic elements? What are they being used for?

What to take away?

HTML is how we structure our view’s content. Be conscientious of what elements you are using and if they logically make sense for what they are containing.

Lesson Search Results

Showing top 10 results