4.9. Introduction to HTML: basic structure, tags and attributes: Lists in HTML

HTML, which stands for Hyper Text Markup Language, is the backbone of any website. It is the coding language that allows you to create and organize content on the web, including text, images, lists, tables, links, and more. Although it may seem intimidating to beginners, the basic structure of HTML is quite simple and straightforward. In this chapter, we will explore the basic structure of HTML, its tags and attributes, with a special focus on lists in HTML.

Basic Structure of HTML

The basic structure of an HTML page consists of HTML tags, which are used to define and organize content. A typical HTML page begins with the tag, which tells the browser that the document is an HTML5 file. Next comes the tag, which contains all the content of the page. Inside the tag, we have the tag and the tag.

The tag contains information about the page, such as the title (which appears in the browser tab), links to external CSS and JavaScript, and metadata. The .

The tag contains the main content of the page, which is what visitors see when they visit your website. It can include text, images, links, lists, tables and more.

Tags and Attributes

HTML tags are used to define and organize content. Each tag is surrounded by angle brackets (< and >). Most tags come in pairs, with an opening tag and a closing tag. The closing tag is similar to the opening tag, but has a forward slash (/) before the tag name.

For example, here is how you can use the

(paragraph) and

(level 1 heading) tags:

My First Header

This is an example of a paragraph.

Attributes are used to provide additional information about a tag. They are included in the opening tag and consist of an attribute name and an attribute value. For example, the (image) tag usually comes with the attributes src (which specifies the URL of the image) and alt (which provides alternative text for the image).

Lists in HTML

Lists are an important part of HTML. They allow you to organize content in an easy-to-read way. There are three main types of lists in HTML: ordered lists, unordered lists, and defining lists.

An ordered list is a numbered list. It is created using the

tag, with each list item wrapped in a
1. tag. For example:
   1. Item 1
   2. Item 2
   3. Item 3

   An unordered list is a bulleted list. It is created using the

   tag, with each list item wrapped in a
   • tag. For example:
     • Item 1
     • Item 2
     • Item 3

     A definition list is a list of terms and their definitions. It is created using the

     tag, with each term wrapped in a

     tag and each definition wrapped in a

     tag. For example:

     HTML

     Hypertext Markup Language

     CSS

     Cascading Style Sheets

     Understanding the basic structure of HTML, its tags and attributes, and how to create lists is a fundamental part of learning to become a front-end developer. In the next chapter, we will explore CSS and how it is used to style HTML pages.

     Now answer the exercise about the content:

     What does the acronym HTML mean and what is its function?

     1

     Hyper Text Markup Language, a coding language used to create and organize content on the web.

     2

     Hyper Text Markup Language, a programming language used to create applications.

     3

     Hyper Text Markup Language, a text editing tool used for writing articles.

     You are right! Congratulations, now go to the next page

     You missed! Try again.

     

     Next page of the Free Ebook:

     14Introduction to HTML: basic structure, tags and attributes: HTML Forms

     5 minutes

     Earn your Certificate for this Course for Free! by downloading the Cursa app and reading the ebook there. Available on Google Play or App Store!