HTML the heart of the web

What is HTML?

HTML (HyperText Markup Language) is considered a markup language, not a programming laguange.

An HTML page, consist of a collection of elements, also known as HTML elements.

<p>My dog is always excited to see me!</p>

HTML Element

HTML elements typically has an opening tag, attributes, content, and a closing tag. HTML elements may contain data, text, or nothing.

The atonomy of an HTML element

Let's break down the parts that make up an HTML element. I will use the paragraph HTML element (p) above for the breakdown.

The opening tag: This consist of an less than symbol (<), followed by the name of the element (in this case, p), and a greater than symbol (>)

<p>

The closing tag: This is the same as the opening tag. The only difference is that it requires a forward slash (/) before the element name. This tag lets the web know where this element ends. Failing to close an element properly may lead to some weird results.

</p>

The content: The content of the element is just text in between the opening and closing tag. In the example above, the content of the paragraph element is, " My dog is always excited to see me! ".

My dog is always excited to see me!

The element: This is everything from the beginning of the opening tag to the end of the closing tag.

<p>My dog is always excited to see me!</p>

Nesting elements

HTML elements may allow you to add more elements within the content section. Let's take a look at this HTML element example.

<p>My dog is always excited to see me!</p>

I want to make sure that the text, " My dog is always excited to see me! ", is wrapped in a paragraph element, but I also want to bold the word always.

I'm going to modify the HTML element and wrap the word always inside the strong HTML element (strong). This element will be inside the paragraph element as well.

<p>My dog is <strong>always</strong> excited to see me!</p>

You want to make sure that the element is nested in properly. In the example above, the strong element was nested in properly, since the closing tag remained inside the closing tag of the paragraph element.

Here is what an incorrect nested element looks like:

<p>My dog is <strong>always excited to see me!</p></strong>

Notice how the strong HTML element closing tag was outside the paragraph element closing tag. This can cause your HTML to behave funky when you're visually looking at it.

HTML element attributes

Attributes is extra information about an HTML element that you don't want to appear in the content of the element.

An attribute should:

• Be defined in the opening tag.
• Have a space between the element name or previous attributes, if one or more has been defined.
• Have an equal sign (=), should follow right after the attribute name
• Value should be wrapped in between single or double quotes (preferrably double).

Let's look at this attribute example:

<p class="cat-description">My cat has a serious face all the time.</p>

In the code example above, I'm using an attribute called, class. This attribute allows you to identify an HTML element and style it with CSS.

The value that was given to the class attribute is cat-description.

Here's another example of a of nested HTML element with another type of attribute.

<p class="dog-description">
  My dog is <strong class="uppercase-font">always</strong> excited to see me!
</p>

You can embed attributes to nested elements as well.