Chapter 4.5: Introduction to HTML: Basic Structure, Tags and Attributes - Header Tags

HTML, or HyperText Markup Language, is the standard markup language for creating web pages. It allows developers to create structured content by incorporating text, images, links, and other elements. The basic structure of an HTML document consists of "tags" and "attributes."

Basic Structure of HTML

The basic structure of an HTML document is made up of a series of HTML elements, each represented by a tag. A tag is an element identifier that is surrounded by angle brackets. Tags usually come in pairs, with an opening tag and a closing tag, and the element's content falls between the two.

For example, a paragraph of text would be written as follows:

<p>This is a paragraph.</p>

Here, <p> is the opening tag, </p> is the closing tag, and "This is a paragraph." is the content of the element.

Tags and Attributes

HTML tags define the type and structure of content, while attributes provide additional information about elements. Attributes are included in the opening tag and are represented by a name and a value. For example, the link tag <a> can include the "href" attribute to specify the URL of the link:

<a href="https://www.example.com">This is a link.</a>

Here, "href" is the attribute name, and "https://www.example.com" is the attribute value.

Header Tags

Heading tags are used to define headings and subheadings in an HTML document. There are six levels of headings, represented by the tags <h1> to <h6>. The <h1> is used for the main title, while the <h2> to <h6> are used for subheadings of progressively lower levels.

For example, an HTML document might have the following header structure:

<h1>Main Title</h1>
<h2>Subtitle 1</h2>
<h3>Subtitle 2</h3>
<h4>Subtitle 3</h4>
<h5>Subtitle 4</h5>
<h6>Subtitle 5</h6>

Heading tags not only visually structure content for readers, but they also play an important role in search engine optimization (SEO) by helping determine content relevance.

In summary, the basic structure of an HTML document is made up of tags and attributes, which define the type, structure and additional information of the content. Heading tags are an important part of this structure, as they define the titles and subtitles of the content. Mastering the use of these basic elements is a fundamental step towards becoming an effective front-end developer.