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 <\> 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.
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=”https://codepath.org/”>CodePath.org 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"> |
div elementThe 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:
div element makes it easier for code reviewers to see defined sections to help identify bugs, or isolate features to sections on the website. 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.
