Example for Nested HTML Elements

It is to be noted that when you implement any heading tag, the web browser will automatically add one line prior and one line following that heading to make the heading look neat.

   
This is page heading of size 2.
 
This is heading of size 3.
 
This is heading of size 5.
  

Why Are the Heading Elements Important?

Heading plays an essential role as search engines usually use headings to index the web page’s structure and content. Moreover, headings can make web articles more readable and neat.

Источник

HTML Page Elements – Explained for Beginners

David Clinton

HTML, which stands for Hypertext Markup Language, is the standard markup language used for creating web pages and structuring their content on the World Wide Web.

HTML serves as the backbone of web development and acts as a fundamental building block for creating web-based documents. Let’s take a quick look at how it works.

What Does HTML Do?

The main role of HTML is to define the structure and layout of a web page by using a set of tags or elements. These tags represent different types of content such as headings, paragraphs, images, links, forms, and tables.

HTML tags are enclosed in angle brackets (<>) and are composed of an opening tag, content, and a closing tag (which is identified by its forward slash — «/»).

This article comes from my Complete LPI Web Development Essentials Study Guide course. If you’d like, you can follow the video version here:

By using HTML, web developers can define the semantic structure of a webpage, specifying elements like headings, paragraphs, lists, and sections. Here’s a typical example of an HTML page with , , , and sections clearly identified:

Additionally, HTML allows for the inclusion of multimedia content like images and videos. It also lets you integrate other web technologies such as CSS (Cascading Style Sheets) for styling, and JavaScript for interactivity.

Here’s an example code snippet showing an image and a video being incorporated into a web page.

HTML documents are interpreted by web browsers, which render the structured content and present it to users. It enables browsers to understand the hierarchy, relationships, and presentation of elements on a webpage. It ensures that everything displays as intended and that there’s appropriate interactivity.

In this guide, we’re going to explore the core HTML elements, including document structure, external links, embedded media, and simple forms. And we’re going to do all that by actually creating stuff. No more boring slides.

Understanding HTML Page Structure

Ok. The basic structure of an HTML document, sometimes described as the HTML skeleton, provides a foundation for creating web pages. It consists of several essential elements that establish the structure and define the content of the page.

When I right-click on a page, I can select the View Page Source option and I’ll find myself looking at the HTML source code.

Well begin at the top. The Document Type Declaration () is placed at the very beginning of an HTML document to specify the HTML version being used. It ensures that the browser interprets the page correctly.

The HTML tag is the root element of an HTML document. It encloses the entire content of the page and serves as a container for all other HTML elements.

If you scroll all the way to the bottom of a page, you’ll see a closing tag like this: .

What’s in the section of your HTML code?

The head tag contains metadata and other non-visible information about the web page. It can include elements such as the page title, character encoding, linked stylesheets, and JavaScript files. The content within the head tag is not directly visible to users who load the page.

The characterset tag in this case uses UTF-8. What’s that all about? HTML character encoding refers to the method used to represent and display characters, symbols, and special characters within an HTML document.

Here’s how all that might look:

Since HTML is a text-based markup language, it needs a standardized way to represent characters beyond the basic alphanumeric set of uppercase A-Z, lowercase a-z, and the numbers 0-9.

When using UTF-8 encoding, characters outside the ASCII range are represented using multiple bytes. For example, a basic Latin character like «A» is represented by a single byte (0x41), while certain non-Latin characters may require two or more bytes.

The section can also contain style information that could just as easily have been placed in an accompanying CSS file. Here’s how that might look:

The body tag represents the visible content of the web page. It contains all the elements that will be displayed on the screen, such as text, images, headings, paragraphs, and links. The content within the body tag is what users see when they visit the page.

Heading tags, like h1, h2, and so on, are used to define the headings or titles of sections within the body of the page. The h1 tag represents the main heading, followed by h2 for subheadings, h3 for sub-subheadings, and so on.

Paragraph tags,

, define blocks of text or content within the body of the page. They create separate paragraphs and are commonly used for structuring textual content.

Understanding Semantic Tags

Finally, HTML5 introduced a set of semantic tags that provide more meaningful and descriptive structure to the content. These tags include header, nav, section, article, aside, and footer.

Even though they don’t always have any direct impact on the way a page will display in your browser, semantic tags help with organization and make it easier for us to understand the purpose of different sections of the page.

A tag that begins with an exclamation mark is actually used for comments that won’t be visible to your users and that have no impact on the way browsers read the page. Here’s an example:

The goal of comment tags is to help us remember the purpose and function of various code sections. It’s all about documenting your code.

In fact, «readability» is an important feature of all well-written HTML code. Each of the elements we’ve seen here – whether controlling metadata, styles, scripts, navigation, or plain text – can, when presented intelligently, contribute to the value of both the page seen by your users and of the code itself.

Источник