Posted by admin at April 12, 2020
HTML (Hyper Text Markup Language) documents are made up of content and tags. These tags describe the content so that the web browser understands the structure of the page. HTML tags typically come in pairs, an opening tag before and a closing tag after content like so:
When these three pieces are combined (start tag, content, and end tag), you have what is called an HTML element.
Here is a sample HTML doc:
*NOTE: In the code above, the red text contained within the <!– and –> start and end sequences are comments. Each of them is explaining each tag.
Tags can be nested inside of other tags. This creates a parent/child relationship between HTML elements and forms the overall structure of your HTML document into a tree. This structure has a big affect on your CSS as styles are typically inherited from parent to child. We will take a closer look at style inheritance later in this unit.
There are other types of tags that are called “self-closing”, meaning they don’t come in an open/close pair. Typically self-closing tags insert content into your page as opposed to surround content. They look like this:
As you can see these types of tags rely on “attributes”, these are added modifiers on the tag that have their own values. In the above example, we use the src attribute to set the source for the image. You will also see attributes on the start tags of tag pairs and they can include a wide variety of added functionality for a tag.