HTML Elements and Syntax

Defining HTML Elements

In order to add elements to our website, we add HTML tags. There are many different types of tags that represent different types of elements (i.e text, images, buttons, containers, etc.).

Image of different phases of lego illustrating HTML, CSS, and JS

An HTML tag has 3 major components:

  • Opening Tag: The opening tag identifies the type of HTML element. The element name between the <> symbols. To customize an HTML element, attributes may also be defined within the opening tags. Attributes may give the element properties that include the width, size, class or id selectors, style, etc. You can read more about various HTML element attributes on MDN Docs.
  • Contents: This is the information that you want displayed. Depending on the type of elements the contents can be text that is visible to the user or other nested HTML elements for container-like elements.
  • Closing Tag: The closing tag must be identical to the opening tab with the use of a backslash \ symbol to denote the closing tag. It contains the name of the element between the <\> symbols.

While most HTML elements require both the opening and closing tag, there are a few elements that do not require a closing tag and they are called void elements and use self-closing tags. These elements have no content, like the br element which represents a line break. Check out W3’s documentation on void elements to learn more.

Common HTML Elements

In this lab, we will introduce you to a few common HTML elements and their syntax, but we highly recommend you check out MDN docs for a full list of HTML elements.

Element Tag Description Syntax Example
h1,h2,...,h6 These are heading tags that act like text section headers. h1 is the largest header with a default font size of 2em and h6 is the smallest header with a default font size of 0.67em. <h1>Header 1</h1>
p This paragraph text defines a paragraph content, or regular text on a page. <p>This is a paragraph text</p>
a An anchor tag is used to add links to another page. These can be another html file in your project or outside links. We use the href attribute to link to the website URL. Be sure to add the URL address in double quotation marks! <a href=””> Website</a>
br This element create a line break on your page. The br element is a void and therefore uses a self-closing tag. This means that you do not need a closing tag when adding the br element. <br>
img The image tag allows you to add an image on your page. The src attribute takes in the image address (either local or online) in double quotation marks. You may add other attributes like width and height to control the size of the image. <img src="./codepathlogo.jpg" width="40px" height="40px">

Introducing the div element

The div, or content division element, is used to define sections or divisions of content on the webpage. When using these elements you may not see a difference from the user-view but it helps organize groups of elements within the html page.

But why is it necessary to organize your html elements?

There are many reasons why developers might use the div element in their code. Some of which may include:

  • Creating more readable code. Using the div element makes it easier for code reviewers to see defined sections to help identify bugs, or isolate features to sections on the website.
  • For styling! By creating defined sections, it allows developers to add custom styling to each section of their website. This is perhaps one of the most common reasons developers use div tags.

In order for our style sheet, or CSS file, to identify the different div sections, we use custom selectors. This is where attributes like id and class come in!

  • id attribute: An id is a name that is unique to an element. This means that no two elements can share the same id.
  • class attribute: Unlike the id attribute, multiple elements can share the same class name. This can be helpful when styling similar types of sections or elements.

We will explore more about the CSS syntax used to apply styling to id and class names in the next section. For now, let’s set up the structure of our client’s personal website based on our wireframe.

Fork me on GitHub