HTML Elements

Text Elements

Heading Tag

A header tag is like a header on a newspaper its a title or important text that is not the body of the content.

There are 6 different headers:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

h1 is the biggest in size, also signifies the most important

h6 is the smallest in size, also signifies the least importance

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

Paragraph Tag

The paragraph tag is used for regular text.

<p>Regular sentence using regular text</p>

Hr Tag

This tag is a little bit different in that its a self closing tag. What this is means is that it doesn't wrap anything, its just one tag. The hr tag makes a line across your page. Its nice for dividing up sections. You can write it 2 ways:

<hr>
<hr/>

Br Tag

This is the same thing as above, accept it just creates another empty line, its like a return character in your text editor. This is good for giving space between 2 text elements.

<br>
<br/>

Strong Tag

This is like a text modifier. So if you have normal text in a <p> tag, but you want something inside to modified, or.. bolder, then we can give it a strong tag which makes the text inside of it bold.

<p>Regular sentence with a <strong>bold</strong> word inside of it</p>

Em Tag

This is the exact same as the strong tag in that its a text modifier. It applies a different style to whatever is inside of it. In this case, instead of making it bold, it adds italics to it.

<p>Regular sentence with an <em>italic</em> word inside of it</p>

Span Tag

The span tag is the exact same as strong and em in that it changes the style of whatever you put inside of it. The difference is that by default it does nothing. Its a generic tag. We actually need to make our own styles with css for span to do anything useful. We will make sure to make use of this later on.

<p>Regular sentence with an <span>generic span style</span> word inside of it</p>

Unordered List

We have 2 tags here. The <ul> and the <li> tag. This is how we make lists. So when I started learning web dev, I looked at this tag and thought, ' well I cant imagine I will be making lists too often in my websites. Probably won't use this much'. It turns out, this is one of the most used tags. If you ever have more than 1 of the same kind of thing ( think navigation bar links for example), we will want to put it in a list. It wont look like a list, but in our code, we will think about it as a list. Anyways, here is what it looks like:

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Products</li>
    <li>Contact</li>
</ul>

Ordered List

The exact same as above, but it has numbers in front of it

<ol>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
    <li>Grapes</li>
</ol>

This tag is how you make a link on a page. It can either take to a different site, another page on your site, or even just another location on the same page. You will notice that this tag has something inside of the tag. We call this an attribute, in this case, the href attribute. This is where we define where the link is going.

<a href='www.google.com'>Google</a>

<a href='contact.html'>Google</a>

<a href='mailto:[email protected]'>Google</a>

<a href='www.google.com' target='_blank'>Google</a>

Using relative paths

When using relative paths, you have to navigate through your file structure to reference a file. So 3 possibilities. Either you are referencing a file inside the same folder, you have to go inside a folder, or you need to back out of your current folder. Here are some examples:

Referencing a file inside current folder
<a href='contact.html'>contact</a>
Go 1 folder deep
<a href='folder1/contact.html'>contact</a>
Go 3 folders deep
<a href='folder1/folder2/folder3/contact.html'>contact</a>
Go 1 folder back
<a href='../contact.html'>contact</a>
Go 3 folders back
<a href='../../../contact.html'>contact</a>

Container Elements

Div Tag

Container elements are not just for text, they can be for anything, often they are tags that contain a lot of things. Div is a generic container and is the most used container element. Like the span tag, its generic and it can be whatever you want it to be.

<div>
    <p>whatever you want</div>
</div>

Header Tag

The header tag is exactly like the div tag, but it has a nice name that gives it some meaning. It also helps search engines better guess what is inside the tag. The header tag is for things like your logo, navigation, search, maybe your hero section.

<header>
    <p>Company Name</p>
</header>

The nav tag is exactly like the div tag, but it has a name. You put the main navigation in this named div.

<nav>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Products</li>
        <li>Contact</li>
    </ul>
</nav>

Section Tag

This tag is a little more generic. Its just for a new section of your site.

<section>
    <p>Main Content</p>
</section>

<section>
    <p>Secondary Content</p>
</section>

The nav tag is exactly like the div tag, but it has a name. You put the footer content in this named div.

<footer>
    <p>footer stuff like a phone number or something.</p>
</footer>

results matching ""

    No results matching ""