HTML Extra Credit. Common Tags and Symbols.

Here are some common tags you will surely see in other people's web design.


<!-- Comments which can be seen in your source code -->
<!-- But cannot be seen on the page -->

<p>Paragraph tags. Anything inside will have a blank line before and after.</p>

<hr /> This creates  horizontal line (rule) on the page.

<h1>Heading tags make good titles.</h1>
<h2>Just like the paragraph tags, anything inside will have a blank line before and after.</h2>
<h4>You can use any name from "h1" to "h6" and in between.</h4>
<h6>The "h1" is the largest font, and the "h6" is the smallest.</h6>

&lt; This creates a < symbol. It's best to use this because using the literal < looks like a tag to HTML.

&gt; This creates a > symbol.

&amp; This created a & symbol. You need this because using the literal & can be confusing to HTML.

Here is what this code should look like on your web page:

Paragraph tags. Anything inside will have a line break before and after.

This creates horizontal line on the page.

Heading tags make good titles.

Just like the paragraph tags, anything inside will have a blank line before and after.

You can use any name from "h1" to "h6" and in between.

The "h1" is the largest font, and the "h6" is the smallest.

< This creates a < symbol. It's best to use this because using the literal < looks like a tag to HTML. > This creates a > symbol. & This created a & symbol. You need this because using the literal & can be confusing to HTML.

Notice the comments are not seen. However, they can be used as reminders to yourself and helpful clues to future designers who peruse your coding.

Notice that the text after the <hr /> tag starts on a new line automatically.

Here is a comprehensive list of available symbols you can create. The entity name and number are interchangeable, use either one. Also, refer to this.

.:::SHOW ME MORE:::.

More Common Tags.

<span>This tag can surround any amount of text you want,</span> but is intended to only span inline text (text all on the same line).

The <span> tag does nothing, unless you add attributes.

<div>This tag is exactly like span, except it puts a line break before and after.</div> It can be used to encompass multiple lines of code, but does nothing else until you add attributes.

Here is what that code should look like on your web page:

This tag can surround any amount of text you want, but is intended to only span inline text (text all on the same line). The tag does nothing, unless you add attributes.

This tag is exactly like span, except it puts a line break before and after.

It can be used to encompass multiple lines of code, but does nothing else until you add attributes.

As I promised, the tags do nothing. This would all be one line of text, except the div tags forced line breaks before and after.

So, why have these tags??

The benefit is you can create your own elements from scratch. You don't have to use the tags and attributes defined for you, if you don't want.

<span style="color:red; background-color:yellow; font-weight:bold;">This tag can surround any amount of text you want,</span> but is intended to only span inline text.

<div style="border: 2px purple solid; color: purple; width:50%;">This tag is exactly like span, except it puts a line break before and after.</div> It can be used to encompass multiple lines of code, but does nothing else until you add attributes.

Here is what the updated result looks like:

This tag can surround any amount of text you want, but is intended to only span inline text.

This tag is exactly like span, except it puts a line break before and after.

It can be used to encompass multiple lines of code, but does nothing else until you add attributes.

A <div> tag will have a default width of 100%. You can use dotted, dashed, or solid borders. The border thickness can easily be changed, as already shown.

Continue Learning