Course Objectives

In this module, you will learn how to use the main text tags in HTML, such as:

  • Headings (

     to
    )
  • Paragraphs (

    )
  • Line breaks (
    )
  • Text styles: bold (), italic (), underline ()
  • Unordered lists (
      ), ordered lists (
        ), and definition lists (
        )
      1. Links ()

      1. Headings in HTML

      Headings in HTML are used to define titles and subtitles. There are six levels of headings, ranging from

      (the most important) to
      (the least important).

      Example:

      This is the main title of the page
This is a subtitle (level 2)
This is a subtitle (level 3)
This is a subtitle (level 4)
This is a subtitle (level 5)
This is a subtitle (level 6)

      Explanation:

      •  is used for the main title, usually found at the top of the page.

      •  to
        are used for subtitles, with

        being the most important after

        .

      Importance:

      • Headings are important for structuring content and also help with search engine optimization (SEO), as they indicate the hierarchy of information.

      2. Paragraphs (

      )

      The

      tag is used to define a paragraph of text. All content that forms a paragraph should be wrapped in the

      tag.

      Example:

      This is a paragraph of text. The content inside the <p>

      Explanation:

      • Whenever you use the

        tag, the browser will display space before and after the paragraph, making the text more organized.

      Importance:

      • The

        tag makes it easier to organize textual content on the page.

      3. Line Breaks (
      )

      The
      tag is used to insert a line break within text. It does not have a closing tag, as it is a self-closing tag.

      Example:

      This is a paragraph with a line break.Now, the line has been broken, and the text continues below.

      Explanation:

      • The
        tag does not create a new paragraph but simply breaks the line at the point where it is inserted.

      Importance:

      • Use
        when you need to divide text without creating a new paragraph.

      4. Text Styles

      You can style text in various ways with HTML, such as bold, italic, and underline. For this, we use the following tags:

      Bold ()

      The tag is used to make text bold without assigning semantic importance.

      Example:

      This is a text with bold.

      Italic ()

      The tag is used to make text italic, typically used for emphasis.

      Example:

      This is a text with italic.

      Underline ()

      The tag is used to underline text.

      Example:

      This is a text with underline.

      Importance:

      • These tags are useful for emphasizing content. Although the tag is commonly used, it is worth noting that in some situations, it is more semantic to use for bold and for italic, as they carry semantic meaning related to importance or emphasis.

      5. Lists in HTML

      HTML allows you to create ordered and unordered lists. Lists help organize content in a clear and readable way.

      Unordered Lists (
        )

        The

          tag defines an unordered list, where each item is marked with a bullet point.

          Example:

          Item 1
  Item 2
  Item 3

          Explanation:

          • Each list item is defined by the
          • tag.

          Ordered Lists (
            )

            The

              tag defines an ordered list, where items are numbered.

              Example:

              First item
  Second item
  Third item

              Explanation:

              • Just like in unordered lists, each item is defined by the
              • tag, but the browser automatically numbers the items.

              Definition Lists (
              )

              The

              tag is used for definition lists, where we have a term and its description.

              Example:

              HTML
  A markup language used to create web pages.
  CSS
  A language used to style web page content.

              Explanation:

              •  defines the term, and
                defines the description.

              6. Links ()

              The tag is used to create links (anchors), allowing you to navigate between pages or external sites.

              Example:

              href="https://www.google.com">Visit Google

              Explanation:

              • The href attribute defines the destination of the link. When the user clicks on the text "Visit Google," they will be redirected to Google's website.
              • Links can be used to navigate between internal or external pages.

              Other useful attributes for links:

              • target: Defines where the link will open.
                • target="_blank" opens the link in a new tab.

              Example:

              href="https://www.google.com" target="_blank">Visit Google

              Conclusion

              Now you have learned how to work with the most common tags for text formatting in HTML. Knowing how to properly use headings, paragraphs, line breaks, lists, and links helps organize and make the content of your web pages clearer and easier to understand. Remember to use these tags semantically to ensure that the page content is well-structured, accessible, and understandable for both users and search engines.