What is HTML?


HTML provides structure to the content appearing on a website, such as images, text, or videos. Right-click on any page on the internet, choose “Inspect,” and you’ll see HTML in a panel of your screen.

HTML stands for HyperText Markup Language:

  • A markup language is a computer language that defines the structure and presentation of raw text.
  • In HTML, the computer can interpret raw text that is wrapped in HTML elements.
  • HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks.
    You probably clicked on a couple of hyperlinks on your way to this CodeHive course.

HTML Anatomy


HTML is composed of elements. These elements structure the webpage and define its content. Let’s take a look at how they’re written.

The diagram to the below displays an HTML paragraph element.
html anatomy

As we can see, the paragraph element is made up of:
- An opening tag
- The content
- A closing tag

A tag and the content between it is called an HTML element.
There are many tags that we can use to organize and display text and other types of content, like images.

The Body


One of the key HTML elements we use to build a webpage is the body element.
Only content inside the opening and closing body tags can be displayed to the screen.
Once the file has a body, many different types of content – including text, images, and buttons – can be added to the body. Here’s what opening and closing body tags look like:
body

HTML Structure


HTML is organized as a collection of family tree relationships. As you saw in the last exercise, we placed (p) tags within (body) tags. When an element is contained inside another element, it is considered the child of that element. The child element is said to be nested inside of the parent element.

Since there can be multiple levels of nesting, this analogy can be extended to grandchildren, great-grandchildren, and beyond. The relationship between elements and their ancestor and descendent elements is known as hierarchy.

Let’s consider a more complicated example that uses some new tags:
structure

Headings


Headings in HTML are similar to headings in other types of media. For example, in newspapers, large headings are typically used to capture a reader’s attention. Other times, headings are used to describe content, like the title of a movie or an educational article.

HTML follows a similar pattern. In HTML, there are six different headings, or heading elements. Headings can be used for a variety of purposes, like titling sections, articles, or other forms of content.

The image below is the list of heading elements available in HTML. They are ordered from largest to smallest in size.

heading

Displaying Text


One of the most popular elements in HTML is the (div) element.
div is short for “division” or a container that divides the page into sections. These sections are very useful for grouping elements in your HTML together. div's don’t inherently have a visual representation, but they are very useful when we want to apply custom styles to our HTML elements.
div's allow us to group HTML elements to apply the same styles for all HTML elements inside.
div's can contain any text or other HTML elements, such as links, images, or videos.

If you want to display text in HTML, you can use a paragraph or span:

- Paragraphs (p) contain a block of plain text.
- (span) contains short pieces of text or other HTML.
They are used to separate small pieces of content that are on the same line as other content.

Line Breaks

The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser. If you are interested in modifying the spacing in the browser, you can use HTML’s line break element: (br)
You can use it anywhere within your HTML code and a line break will be shown in the browser.

Unordered Lists


In addition to organizing text in paragraph form, you can also display content in an easy-to-read list.

In HTML, you can use an unordered list tag (ul) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point.

The (ul) element should not hold raw text and won’t automatically format raw text into an unordered list of items. Individual list items must be added to the unordered list using the (li) tag. The (li) or list item tag is used to describe an item in a list.
ul

In the example above, the list was created using the (ul) tag and all individual list items were added using (li) tags.
The output will look like this:
  • Limes
  • Tortillas
  • Chicken


Ordered Lists


Ordered lists (ol) are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last.

You can create the ordered list with the (ol) tag and then add individual list items to the list using (li) tags.

ol

The output will look like this:
  1. 1. Preheat the oven to 350 degrees.
  2. 2. Mix whole wheat flour, baking soda, and salt.
  3. 3. Cream the butter, sugar in separate bowl.
  4. 4. Add eggs and vanilla extract to bowl.

Images

All of the elements you’ve learned about so far (headings, paragraphs, lists, and spans) share one thing in common: they’re composed entirely of text!
What if you want to add content to your web page that isn’t composed of text, like images?

The (img) tag allows you to add an image to a web page. Most elements require both opening and closing tags, but the (img) tag is a self-closing tag. Note that the end of the (img) tag has a forward slash /. Self-closing tags may include or omit the final slash — both will render properly.

The (img) tag has a required attribute called src. The src attribute must be set to the image’s source, or the location of the image.



Review


1. HTML stands for HyperText Markup Language and is used to create the structure and content of a webpage.
2. Most HTML elements contain opening and closing tags with raw text or other HTML tags between them.
3. HTML elements can be nested inside other elements. The enclosed element is the child of the enclosing parent element.
4. Any visible content should be placed within the opening and closing body tags.
5. Headings and sub-headings, h1 to h6 tags, are used to enlarge text.
6. p, span and div tags specify text or blocks.
7. The em and strong tags are used to emphasize text.
8. Line breaks are created with the br tag.
9. Ordered lists (ol) are numbered and unordered lists (ul) are bulleted.
10. Images (img) and videos (video) can be added by linking to an existing source.
If you want to review how to structure HTML in a project and use semantically meaningful elements, watch the video below and follow: