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.).
An HTML tag has 3 major components:
<>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.
\symbol to denote the closing tag. It contains the name of the element between the
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.
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|
||These are heading tags that act like text section headers.
||This paragraph text defines a paragraph content, or regular text on a page.||
||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
||This element create a line break on your page. The
||The image tag allows you to add an image on your page. 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:
divelement makes it easier for code reviewers to see defined sections to help identify bugs, or isolate features to sections on the website.
In order for our style sheet, or CSS file, to identify the different
div sections, we use custom selectors. This is where attributes like
class come in!
idattribute: An id is a name that is unique to an element. This means that no two elements can share the same
classattribute: Unlike the
idattribute, multiple elements can share the same
classname. 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
class names in the next section. For now, let’s set up the structure of our client’s personal website based on our wireframe.