what is html structure and presentation

Teach Computer Science

HTML Structure and Presentation

Ks3 computer science.

11-14 Years Old

48 modules covering EVERY Computer Science topic needed for KS3 level.

GCSE Computer Science

14-16 Years Old

45 modules covering EVERY Computer Science topic needed for GCSE level.

A-Level Computer Science

16-18 Years Old

66 modules covering EVERY Computer Science topic needed for A-Level.

GCSE Creating web pages using HTML and CSS (14-16 years)

An editable PowerPoint lesson presentation
Editable revision handouts
A glossary which covers the key terminologies of the module
Topic mindmaps for visualising the key concepts
Printable flashcards to help students engage active recall and confidence-based repetition
A quiz with accompanying answer key to test knowledge and understanding of the module

A-Level Designing Web pages using HTML and CSS (16-18 years)

Html structure.

HTML (Hypertext Markup Language) is the recognised markup language utilised in forming web pages. It defines the composition of web pages by using markup. HTML elements are the primary units of HTML pages and are denoted by tags. HTML tags label parts of content like headings, paragraphs, and tables. Browsers do not show the HTML tags, but they are used in the background in order to deliver the content of the page.

HTML tags are element names enclosed by angle brackets. HTML tags usually come in pairs. The first tag in a pair is the start tag, and the second tag is the end tag. The end tag is written like the start tag, but with a forward slash inserted before the tag name. The start tag is sometimes also called the opening tag, and the end tags are the closing tag.

All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.

HTML tags are not case sensitive.

HTML Attributes

All HTML elements can have attributes, which provide additional information about the element, and are always specified in the start tag. They usually come in name/value pairs.

CSS (Cascading Style Sheets) defines how HTML elements are to be presented on any given screen, paper or other media. It saves the developer a lot of work since it can control the layout of multiple web pages simultaneously.

Ways to add CSS to HTML Elements

Inline – used to apply a unique style to a single HTML element. It uses the style attribute of an HTML element.
Internal – used to describe a style for one HTML page. It is indicated in the <head> section of an HTML page, within a <style> element.
External – used to define the style for multiple HTML pages by using an external CSS file. You can change the look of an entire website by changing one file. This is the most common way to add CSS to HTML elements.

HTML Structure vs. HTML Presentation

The composition of a webpage could be regarded as a mixture of the following four elements:

Content is the general term used for all the browser-displayed information elements—such as text, audio, still images, animation, video, multimedia, and files belonging to web pages. It does not require any additional presentational markups or styles in order to fully relay its message.
Structure is the name given to the practice of using HTML in content to transmit substance, and also to define how blocks of information are structured in relation to one another. Examples include: “This is a list,” (i, d, k), “This is heading and subheading,” (<h1>, <h2>, …, <h6>), “This section is related to,” (<a>), etc.
Presentation of Style refers to anything related to how the content and structure is presented. Examples include size, color, margins, borders, layout, location, etc.
Behaviour or Interactivity is the implementation of client-side script to generate a two-way flow of information between the webpage and its users. JavaScript is an example of this.

Most of the time it is difficult to clearly distinguish content from the structure. For example, the <img> tag, as a structural element, is used to produce graphical content. In practice, the composition of a webpage can simply be viewed as a mixture of three elements: Structure, Presentation and Behavior.

The following terms are often used in correspondence with one another: separation of content and presentation, separation of meaning and presentation, and separation of structure and presentation. Nonetheless, all of these terms basically make reference to the separation of the content (which is made meaningful by structure and presentation), or simply acknowledge the separation of the structure (HTML) and the presentation (CSS) of any given webpage.

The main goal of HTML 4.01 is the separation of structure and presentation, as specified in section 2.4.1 of HTML 4.01.

HTML Structure and Presentation

Web pages are typically created using three components, HTML , CSS and JavaScript.

There is a special relationship between HTML and CSS. HTML can exist without CSS, but CSS is pointless without any HTML to style.

Hypertext Markup Language (HTML)

HTML is markup language used to create web pages.

HTML pages are interpreted by a web browser .

HTML tags are added to each element of content in order to provide meaning and context.

Further HTML tags can be used to divide a page into logical sections (divisions), making different layouts possible when combined with CSS.

Images, tables and hyperlinks are also included using HTML.

Although it is entirely possible to make a website just using HTML, it would look bland and unappealing.

To create web pages that are visually stunning and easy to use, we need to use another language called CSS.

Example of HTML

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

Cascading Style Sheets (CSS)

CSS is a presentation language. Its purpose is to provide a web browser with styling instructions for the HTML.

CSS can be included directly in the HTML tags, in the head section of the HTML, or in an entirely separate document (CSS style sheet).

CSS is a very powerful tool, enabling very complex and unique designs to be made possible.

Take a look at the CSS Zen Garden website to see how changing CSS can make a dramatic difference to the appearance of HTML.

Example of CSS

p { color: blue }

Related Theory

Digital Currencies (Cryptocurrencies)
Hypertext Transfer Protocol (HTTP)
Internet Service Provider
IP and MAC addresses
Uniform Resource Locator (URL)
Web Browser

Related Quizzes

The Internet

Sign up for Guru News

Popular downloads.

Data Transmission Cheat Sheet

All Quizzes
Computer Science Glossary
Our YouTube Channel
GCSE GURU Revision Tips +

Small Print

Cookie Policy
Privacy Policy
Terms and Conditions

Downloads Shop

Information & Terms

HTML Tutorial

Html graphics, html examples, html references, html introduction.

HTML is the standard markup language for creating Web pages.

What is HTML?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

A Simple HTML Document

Example explained.

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

The HTML element is everything from the start tag to the end tag:

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure

Below is a visualization of an HTML page structure:

Note: The content inside the <body> section will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

This tutorial follows the latest HTML5 standard.

Video: HTML Introduction

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Overview of HTML

HyperText Markup Language, or HTML, is the standard markup language for describing the structure of documents displayed on the web. HTML consists of a series of elements and attributes which are used to mark up all the components of a document to structure it in a meaningful way.

HTML documents are basically a tree of nodes, including HTML elements and text nodes. HTML elements provide the semantics and formatting for documents, including creating paragraphs, lists and tables, and embedding images and form controls. Each element may have multiple attributes specified. Many elements can have content, including other elements and text. Other elements are empty, with the tag and attributes defining their function.

There are several categories of elements, including metadata, sectioning, text, inline semantic, form, interactive, media, component, and scripting. We'll cover most of these in the series. But first, what is an element?

HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear or act in a certain way. HTML elements are delineated by tags, written using angle brackets ( < and > ).

Our page title is a heading, level one, for which we use the <h1> tag. The actual title, "Machine Learning Workshop", is the content of our element. The content goes between the open and closing tags. The entire thing—the opening tag, closing tag, and the content—is the element.

The tags and content that make up an HTML element.

The closing tag is the same tag as the opening tag, preceded by a slash.

Elements and tags aren't the exact same thing, though many people use the terms interchangeably. The tag name is the content in the brackets. The tag includes the brackets. In this case, <h1> . An "element" is the opening and closing tags, and all the content between those tags, including nested elements.

This paragraph element has other elements nested in it. When nesting elements, it's important that they are properly nested. HTML tags should be closed in the reverse order of which they were opened. In the above example, notice how the <em> is both opened and closed within the opening and closing <strong> tags, and the <strong> is both open and closed within the <p> tags.

Browsers do not display the tags. The tags are used to interpret the content of the page.

HTML is very, very forgiving. For example, if we omit the closing </li> tags, the closing tags are implied.

Although it is valid to not close an <li> , it isn't good practice. The closing </ul> is mandatory. If the unordered list's closing tag is omitted, the browser will try to determine where your list and list items end, but you might not agree with the decision.

The specification for each element lists whether the closing tag is mandatory or not. "Neither tag is omissible" in the specification means both an opening tag and a closing tag are required. The specification provides a list of all the required closing tags .

If the <em> or <strong> in the example earlier had not been closed, the browser may or may not close the element for you. Not closing an <em> simply leads to content possibly being rendered differently than you intended. If a </ul> is omitted and the next tag is a closing tag for the list's parent container, you're lucky. If, on the other hand, it's an opening <h1> tag, the browser will assume the header is part of the list, including inheriting styles. Some omitted closing tags cause bigger issues: not closing some tags, such as <script> , <style> , <template> , <textarea> , and <title> , breaks subsequent content as shown in the following example.

Having some content being unintentionally italic or having a heading indented won't destroy your business. Having most of your content appear unstyled in a 200x300 textarea because you forgot to add a </textarea> or not show up at all because you forgot to close a </style> makes the site unusable.

In some cases, browsers will include elements even if the tags aren't present in the markup. Because elements can be implied, an element can exist even when the tags don't. The browser will add a <body></body> around your content and <tbody></tbody> around your table rows, even if you don't. That being said, while it is valid to omit tags, don't. Also, as already mentioned, make sure they are correctly nested. Your future self as a maintainer of markup, and anyone else working on your code base, will thank you.

There are two types of elements: replaced and non-replaced.

Non-replaced elements

The paragraph, header, and lists marked up in the earlier section are all non-replaced. Non-replaced elements have opening and (sometimes optional) closing tags that surround them and may include text and other tags as sub-elements. These enclosing tags can turn a phrase or image into a hyperlink, can make a sentence into a header, can give emphasis to words, and so on.

Replaced and void elements

Replaced elements are replaced by objects, be it a graphical user interface (UI) widget in the case of most form controls, or a raster or scalable image file in the case of most images. Being replaced by objects, each comes with a default appearance. Depending on the type of object and the browser, the applicable styles are limited. For example, most browsers enable limited styling of UI widgets and related pseudo-elements. In the case of raster images, height, width, clipping, and filtering are easily done with CSS, but not much else. On the other hand, scalable vector graphics, using a markup language based on XML similar to HTML are fully scalable (unless they contain raster images). They are also fully styleable. Note that the ability to style an embedded SVG from the CSS linked to the HTML file that embeds it depends on how the SVG is set up.

In this example, the two replaced elements <img> and <input> are replaced by non-text content: an image and a graphical user interface object, respectively.

Output of the above HTML:

Replaced elements and void elements are often confused. Void elements are all self-closing elements and are represented by one tag. This means there is no such thing as a closing tag for a void element. Optionally, you can include a slash at the end of the tag, which many people find makes markup easier to read. Continuing with this example, we self close the tag with a slash:

The slash at the end is old school: it's a way of indicating that the element is self-closing and there will be no matched end or closing tag.

Void elements cannot contain text content or nested elements. Void elements include <br> , <col> , <embed> , <hr> , <img> , <input> , <link> , <meta> , <source> , <track> , and <wbr> , among others.

Most replaced elements are void elements, but not all. The video , picture , object , and iframe elements are replaced, but aren't void. They can all contain other elements or text, so they all have a closing tag.

Most void elements are replaced; but again, not all, as we saw with base , link , param , and meta . Why have a void element, which can't have any content, that isn't replaced and thereby doesn't render anything to the screen? To provide information about the content! The information is provided by the elements' attributes.

You may have noticed the <img> and <input > examples had more than just the element type in their opening tag. These extra bits of space-separated name/value pairs (though sometimes including a value is optional) are called attributes . Attributes are what make HTML so incredibly powerful. We'll be covering hundreds of attributes and attribute values in this series, but here we'll just discuss what they are in general and how to include them.

Attributes provide information about the element. The attribute, like the rest of the opening tag, won't appear in the content, but they do help define how the content will appear to both your sighted and non-sighted (assistive technologies and search engines) users.

Attributes only appear in the opening tag. The opening tag always starts with the element type. The type can be followed by zero or more attributes, separated by one or more spaces. Most attribute names are followed by an equal sign equating it with the attribute value, wrapped with opening and closing quotation marks.

In this example, we have an anchor link with two attributes. These two attributes have converted the content "Registration" into an internal anchor link that scrolls to the attribute id="register" in the current browser tab when the link is clicked, tapped, or activated with the keyboard or other device.

Attributes define the behavior, linkages, and functionality of elements. We'll cover more attributes in the Attributes section of this series. For now, just note that some attributes are global—meaning they can appear within any element's opening tag. Some apply only to several elements but not all, and others are element-specific, relevant only to a single element.

Most attributes are name/value pairs. Boolean attributes, whose value is true, false, or the same as the name of the attribute, can be included as just the attribute: the value is not necessary.

This image has three attributes: src , alt , and ismap . The src attribute is used to provide the location of the SVG image asset. The alt attribute provides alternative text describing the contents of the image. The ismap attribute is Boolean, and doesn't require a value. This is just to explain what attributes are. We'll cover these attributes in more detail in the images section.

While quoting attributes isn't always required, it sometimes is. If the value includes a space or special characters, quotes are needed. For this reason, quoting is always recommended. One or more spaces between attributes if the attribute value is quoted are not actually required, but, to be safe, and for legibility, quotes and spaces are recommended, and appreciated.

HTML is not case-sensitive, but some attribute values are. Values that are defined in the specification are case-insensitive. Strings that are not defined as keywords are generally case-sensitive, including id and class values.

Note that if an attribute value is case-sensitive in HTML, it is case-sensitive when used as part of an attribute selector in CSS and in JavaScript.

To make markup easier to read, it is recommended, but not required, to mark up your HTML using lowercase letters for all your element names and attribute names within your tags, and quote all attribute values. If you ever hear the term "XHTML style markup", this, and self-closing empty elements with a slash at the end, is what that means.

Appearance of elements

The default appearance of semantic elements is set by user-agent stylesheets. Most browsers use actual stylesheets for this purpose, while others simulate them in code. The end result is the same. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers have a lot of latitude, which means some differences exist between browsers.

The element you choose, and therefore the tags you use, should be appropriate for the content you are displaying, as tags have semantic meaning. The semantics , or role , of an element is important to assistive technologies and, in some cases, search engines. HTML should be used to structure content, not to define the content's appearance. Appearance is the realm of CSS. While many elements that alter the appearance of content, such as <h1> , <strong> , and <em> , have a semantic meaning, the appearance can and generally will be changed with author styles.

Element, attributes, and JavaScript

The Document Object Model (DOM) is the data representation of the structure and content of the HTML document. As the browser parses HTML, it creates a JavaScript object for every element and section of text encountered. These objects are called nodes—element nodes and text nodes, respectively.

There is an interface to define the functionality of every HTML element. The HTML DOM API provides access to and control of every HTML element via the DOM, providing interfaces for the HTML element and all the HTML classes that inherit from it. The HTMLElement interface represents the HTML element and all of its descendant nodes. Every other element implements it via an interface that inherits from it. Each inheriting interface has a constructor, methods, and properties. Via the inherited HTMLElement properties, you can access every global attribute, as well as input , pointer , transition , and animation events. Via the individual element's sub-type, such as HTMLAnchorElement and HTMLImageElement , you can access element-specific attribute values and methods.

Check your understanding

Test your knowledge of HTML

HTML elements are used for styling.

Select the replaced elements.

Select all of the true statements.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-09-27 UTC.

What Is HTML? A Beginner’s Guide

People gatherer around learning about html

You want to create your dream website, but you don’t want it to look like a cookie-cutter template. Anyone well-versed in web design will tell you that you need to know HTML first. But what is HTML, and how can you learn it?

You want the website you publish to stand out and be original. You want elements and designs that no one else in your industry is using. After all, your website is the first impression that many potential customers get about your business.

But before you can do that, you need to learn a computer language called HTML . Essentially, it’s the language that lays out what a web browser should show to a visitor when they arrive on your website.

In this article, we’re going to explain what HTML is, how it came to be, how it’s used, how it works, and offer you some basic HTML training with advice on how you can learn more.

Are you ready to learn how to code your website without creating a broken page? Let’s jump right in.

What Is HTML?

HTML stands for “hypertext markup language” and is a relatively simple language used to create web pages. Because it doesn’t allow variables or functions, it’s not considered a “programming language,” but rather a “markup language,” a language that uses tags to define elements within a document.

If you ask anyone in the web design world what HTML is, you’re likely to get a long-winded explanation that will leave your head spinning, especially if you’re like most of the world and don’t have the first idea about coding and creating a website from scratch .

So what does “hypertext markup language” mean? Let’s break it down.

Hypertext is text placed in order that connects related items, usually via links (also called hyperlinks). Markup language describes the style and structure of a page to web browsers.

So, HTML is what makes sure text and images show up in the right place, and that users can navigate your website painlessly. Web browsers load this information from your web server to generate the websites you see every day.

If you were to look at HTML in its raw form, you would see a lot of symbols and brackets that seemingly make no sense. However, it all contributes toward the final customer-facing product.

The very structure of websites is created through HTML. This language works alongside CSS (Cascading Style Sheets) and JavaScript to create visually appealing and interactive websites for users to enjoy.

The bottom line here is that HTML is the foundation of a good web page. Without it, you wouldn’t be able to share text with website visitors, much less add your personal flair to the website of your dreams.

The History of HTML

Sir Tim Berners-Lee created HTML in late 1991, but the coding language was not released to the masses until 1993.

That was when HTML1 first came out. Right from the start, it was meant as a means of sharing data via web browsers.

The growth of HTML stalled shortly after it was released because not many developers were creating websites at the time.

HTML2 was released in 1995 with additional features, making it the markup language standard for web design through 1997.

That was when HTML3 was developed by Dave Raggett. It gave webmasters more powerful characteristics to use when designing pages. Unfortunately, it was ahead of its time. The features of HTML3 actually slowed browsers down, as they weren’t equipped to apply them yet.

HTML4.01 was developed in 1999, and it came with support for multimedia options. This upgrade also included style sheets, printing facilities, and additional scripting languages.

Difference between html4 and html5 structure

More recently, HTML5 was released in 2015. The rollout of HTML5 added more media storage support and specific content elements. Inline doctype, audio, and video embedding were also made much simpler.

The world is working with HTML5.2 in 2022, which improves the content security policy at a time when we need it most.

It also has a strong focus on ecommerce, adding a payment request API to the fold. This upgrade also added accessible-rich internet applications for disabled people.

What Is HTML Used For?

The simple answer to this question is that HTML is used to create websites for personal and business use all around the world.

The actual answer is a lot more detailed than that.

HTML has been the default language used for web-based documents and websites since the 1990s. It works with browsers to help them understand a website’s structure and the style associated with them.

Essentially HTML is a blueprint that tells the web browser how to put your website together for the visitor. When a user types in your URL, the browser assembles the page based on the building blocks established in the HTML code.

This, in turn, helps the page look as intended when viewed by a user when combined with a CSS stylesheet that styles the elements laid out in your HTML document.

The current version of HTML also allows video, audio, spreadsheets, and other apps to run directly on websites. If you’ve ever marveled at these elements on a website before, you have HTML5 to thank.

This markup language also ensures smooth internal navigation of a website, thanks to hyperlinks.

Website designers can also use HTML to create lead generation forms to collect emails and names (provided you power the action with a file coded in another language).

If you use external plugins, you can also use HTML to create reservation systems or search forms within a site, allowing for easier booking and navigation.

HTML is how you include non-dynamic content on a website — content that you want every visitor to see the same way. If you want dynamic content, you need to leverage JavaScript , PHP , or other programming languages as well.

How Does HTML Work?

As of May 2022, there are more than 3.56 billion web pages on the internet. Many of those pages are simple HTML files. (Note, that’s not websites we’re talking about here. It’s web pages.)

Traditionally, if your site had 150 pages, you likely had 150 separate HTML files. But today, things have changed. If you use a Content Management System (CMS) , and most people do, this won’t be the case, as it typically dynamically generates pages based on data stored in a database.

These files are also called HTML documents, and they are the building blocks of your website. Each page has various on-page and off-page elements that all have a place in HTML documents. This includes back-end elements like meta tags, title tags, and alt tags, but it also includes physical elements like videos, images, text blocks, and other user-facing features.

What Makes Up an HTML Document?

All HTML documents end with the extension .html or .htm. These documents contain all the text and tags that provide static information to a web browser.

The HTML document is the instruction manual used by the user’s web browser to construct the site. All of the files it refers to (CSS stylesheets, JavaScript files that power dynamic elements, etc.) are read by the browser, which then renders the page accordingly, allowing viewers to see it as intended. The render is the actual construction, and it takes place every time someone navigates to a specific page on your site.

If there are issues with your HTML document or any of the files it includes, the site won’t render correctly. It would be like trying to assemble an IKEA desk without a vital piece or tool.

Modern websites contain various HTML elements made of tags and attributes. These elements create the structure of a page. The tags associated with each element show where they begin and end. Without a tag that closes an element off, the browser will put all following content within that column or row, even if that’s not what you intended.

The attributes associated with each element on a page illustrate the various characteristics that make them up.

All HTML documents begin with a <!DOCTYPE> declaration. This document type definition, also known as DTD, determines the structure and elements of an XML document.

While <div> used to be the primary choice for creating content blocks, in HTML5 , you also have specific blocks like <main> that indicate the kind of content that will be in a block to crawlers — in this case, the main blog/article content.

HTML Basics

If you want to become a web designer or at least have a hand in creating your company’s website, you have to learn HTML . Like just about everything there is to learn in this world, you have to start with the basics to have a strong understanding of more advanced elements to come.

You could, of course, use a free HTML editor or Sublime Text , but having a strong understanding of how HTML works will help you with enhanced personalization of the websites you build.

We’re going to break down some HTML basics in the sections below to get you started down the road toward HTML fluency.

Elements of HTML

All HTML elements, regardless of what they’re creating, have the same three components. You have an opening tag, the content itself, and a closing tag.

Your opening tags show the web browser where the elements of your page begin. For instance, it could show where a video player or text paragraph starts on the page. All opening tags use opening and closing angle brackets to mark themselves. For example, the opening tag <em> places emphasis on content, like italics. You would place this tag before the text that you want to emphasize.

The content itself is the actual information that the user sees. This can be written copy, like a blog post. It could also be an image or an embed code for a video. When placed after the opening tag, the content will begin where designated.

The closing tag is the same as the opening tag, but it adds a forward slash before the element’s name. To return to our emphasis tag example from before, you would place the tag </em> at the end of the text you’re trying to emphasize.

So, for example, if you want to italicize the word “exactly,” you’d code it like this:

<em>Exactly.</em>

On the actual user-facing page, it would look like this:

HTML elements also include attributes, which contain a name and attribute value. The attribute’s name shows what the user is adding, while the value provides additional information.

For image tags, you obviously need to specify which image you want to show, so that looks like this:

If you want to make a paragraph on your page red while using the Arial font, you could use the style attribute:

In this example, we’re using the opening tag <p> for a new paragraph. With these attributes attached, everything in that paragraph would be red in the Arial font, right up until the closing tag </p>.

But in modern web development, it’s standard practice to not use the HTML style attribute to adjust the design of individual elements, but rather to stylize the whole page with a separate CSS stylesheet.

HTML class and ID are two attributes of an HTML element that “names them” and help you target these elements with CSS or JavaScript later. This helps with development and makes it more effective. By using an element’s ID or class, you can insert style information into elements like background color, borders, font color , and more.

For example, instead of styling the text to red inside the HTML document, you could do this:

Most Used HTML Tags and HTML Elements

There are 142 different HTML tags that let you create elements. These are composed of both block-level and inline elements.

Block-level elements span the whole width of a page, starting a new line within a document.

Here are a few common block-level tags that you might use on your website:

<head> This tag is for listing meta-information, like the page’s title.
<html> This is a root element. It appears at the beginning and defines the HTML document.
<body> The body tag identifies the content of a page.
<h1> to <h6> These six different tags identify the various headers you can use.
<p> This is the paragraph tag, dictating the start of a new paragraph in your content.
<ol> This tag creates an ordered list.
<ul> The ul tag created unordered lists.
<li> This is the list item tag. It is enclosed within ordered or unordered list tags for each item in the list.
<div> This is a block element tag that creates a “section” you can fill with content (and then stylize later with CSS. Most sites and templates rely heavily on these to structure their content.
<header> This is a block element tag specifically for header content.
<main> This is a block tag specifically for the main blog content.
<footer> This block tag is for your footer information, like copyright, links, etc.

Inline elements are what format the content within your block-level elements. This can include emphasized copy, like bold and italic fonts . Inline content can also be links, both to internal and external content.

Inline links format text without breaking any content flow.

There are some common inline tags that you might use on your website. Here are some of them, in no particular order:

<strong> This is what you’d use to create bold text.
<em> The em tag, which we used in an example earlier, shows italics.
<a> This is the hyperlink tag. It would also need an href attribute to show where the link is pointing (just like img tags need a src attribute).

HTML, CSS, and JavaScript

We briefly mentioned CSS and JavaScript earlier in this article. They tend to go hand in hand with HTML to create advanced modern websites with a personalized flair. But what are CSS and JavaScript? And how are they different from HTML?

As we know by this point, HTML is used to create structure and add elements to your pages. But, as you also know, that’s not everything that goes into a solid website design. This is where CSS and JavaScript come into play.

CSS stands for Cascading Style Sheets. It’s the language and files modern web developers use to design the backgrounds, colors, spacing, layouts, and animations viewed on a website. Essentially, CSS describes the presentation of an HTML document, giving the web designer more flexibility and control.

It can also help you apply the same formatting to multiple web pages through .css files. These stylesheets ensure that you won’t have to redo your formatting for every page. Additionally, the .css file can be cached, reducing load speeds between pages that share the same format.

Then there’s Javascript. Javascript creates dynamic functions, including photo galleries, pop-ups, and sliders. It’s a popular programming language used by 97% of websites worldwide. Dedicated Javascript engines are included with all major web browsers, making the implementation of these functions easier and more effective.

Together, Javascript, CSS, and HTML work together to create what we see every day as a complete, well-designed, interactive web page on both desktop and mobile platforms .

How to Learn HTML

We’ve gone through what HTML is and some of the basics associated with it. Now, it’s time to talk about the process of actually learning to use HTML and how it can help your future and career aspirations.

HTML is more than just a popular programming language. It’s the language of the internet, and that’s not going to change anytime soon. It works hand in hand with popular services like WordPress , and you can use HTML to alter many WordPress templates to turn them into something uniquely yours.

So, let’s start with why someone would want to learn about WordPress in the first place.

Why Learn HTML?

Learning HTML is important for anyone looking to have a career in web development . Talented web developers are always in demand, whether they work for agencies or independently, and learning HTML is the foundation of that skill set.

Not only is there a lot of demand for this position, but web developers can easily earn salaries into six figures. The average web developer salary is $98,565 in 2022.

A strong understanding of HTML is an essential skill recruiters look for when hiring web developers.

If you’re not a web developer but you’re looking to hire one, a rudimentary understanding of HTML, CSS, and JS and how they interact will help you when interviewing candidates. You’ll be able to know which questions to ask and easily weed out those who don’t know what they’re talking about.

Learning Resources

Several free learning resources are available for those looking to further their HTML education. We will walk you through a few of the best right now.

Codecademy is a service that provides courses on an introductory level at no cost. It includes interactive tutorials and utilizes a split-screen that shows the results of your HTML coding as you go along.

You can access exclusive content through the program for $19.99 per month.

Coursera includes several courses that go in-depth on HTML while providing examples from the real world. This service does come at the cost of $49 per month with a free week-long trial.

W3Schools is another free service that teaches basic HTML. It uses examples, exercises, and various resources to achieve this.

You can also pay $95 for a self-paced official course that comes with a certificate at the end.

General Assembly Dash

General Assembly Dash is an HTML educational resource that provides projects for beginners looking to wade into the waters of web design. This program works off a goal-based approach and helps you understand the real-world applications of what you learn. You get to build a website instead of just completing modules.

Once you’ve finished these projects, you can take an online mentorship course that grants you a certificate upon completion. Full tuition costs $3,950, but there are flexible financing options and installment plans.

HTML will continue to be the backbone of web design well into the foreseeable future. A strong understanding of these concepts can even help you create your own WordPress website from HTML .

When it’s time to embark on creating a new website, you’re going to need robust website hosting. If you’re thinking about starting a WordPress site, contact Kinsta today to schedule a demo and find out why more than 24,000 businesses have entrusted their online presence to our premium managed hosting service.

The Best Way to Learn HTML for Free (and Why You Should)

HTML Best Practices to Build Maintainable and Scalable Websites

HTML vs HTML5: Learn the Crucial Differences Between Them

< BACK TO BLOG

Learn HTML Basics: Introduction to HTML Structure & Elements

By Faraz - June 07, 2023

Dive into HTML basics with an introduction to its structure and essential elements. Learn how to create headings, paragraphs, links, and images in HTML.

learn html basics introduction to html structure and elements.png

HTML (Hypertext Markup Language) is the foundation of every web page you see on the internet. It provides structure and meaning to the content displayed in web browsers. In this article, we will dive into the basics of HTML, exploring its structure, elements, and various tags that make up a web page.

Introduction to html: the building blocks of the web, what is html, why learn html, setting up your html environment, html syntax: the structure of html documents, html tags: the building blocks of html, html elements: structuring content with html, html attributes: enhancing elements with additional information, html headings: organizing content with headings, html paragraphs: presenting textual content, html links: connecting web pages, html images: visualizing content, html lists: organizing content in lists, html text formatting: enhancing content presentation, html tables: organizing data in rows and columns, html multimedia: adding rich media to web pages, html forms: capturing user input, semantic html: enhancing accessibility and seo, html comments, html entities, best practices for html coding.

Welcome to this beginner's guide on HTML! In this article, we will dive into the basics of HTML structure and elements. HTML, short for HyperText Markup Language, is the standard markup language used for creating web pages. Whether you're a budding web developer or just curious about how websites are built, learning HTML is an essential skill to have.

In this comprehensive guide, we will walk you through the fundamental concepts of HTML, step by step. By the end of this article, you'll have a solid understanding of HTML structure and be able to create your own basic web pages. So, let's get started with the basics of HTML!

HTML is the backbone of the World Wide Web. It provides the structure and format for content on web pages. HTML uses tags to define elements and their attributes, allowing web browsers to interpret and display the content properly. These tags are enclosed in angle brackets ( < > ) and are placed before and after the content they apply to.

HTML is a markup language, meaning it uses predefined tags to mark specific parts of the content. These tags give meaning to the content, such as headings, paragraphs, links, images, and more. By using HTML, you can structure your content and make it accessible to both humans and search engines.

Learning HTML is a great starting point for anyone interested in web development or design. Here are a few reasons why learning HTML is beneficial:

Foundation for Web Development : HTML forms the foundation of web development. It's the first step in creating any website or web application. Understanding HTML is crucial for building and structuring web pages effectively.
Control Over Content : HTML allows you to have full control over the structure and layout of your web content. By learning HTML, you can format text, add images, create links, and organize your content in a way that suits your needs.
Better SEO : Search engines rely on HTML to understand and index web pages. By using proper HTML tags, you can improve your website's search engine optimization (SEO) and increase its visibility in search engine results.
Collaboration with Developers : If you plan to work with web developers or designers, understanding HTML will help you communicate and collaborate effectively. It allows you to understand and contribute to the development process.

Before we delve into the HTML structure and elements, it's important to set up your HTML development environment. All you need to get started with HTML is a text editor and a web browser. Here's a simple step-by-step guide:

Choose a Text Editor : Select a text editor that suits your preferences. Popular choices include Visual Studio Code, Sublime Text, Atom, and Notepad++. These editors provide syntax highlighting and other helpful features for writing HTML code.
Create a New HTML File : Open your chosen text editor and create a new file with a .html extension. For example, you can name it "index.html" or "mywebpage.html." This file will serve as your HTML document.
Write HTML Code : Inside the HTML file, you can start writing your HTML code. We'll cover the basic structure in the next section.
Save the File : Save the HTML file in a location of your choice. Remember to use the .html extension. You can save it in a dedicated folder to keep your project organized.

Open the HTML File in a Web Browser: To see your HTML page in action, open the saved file using a web browser. Simply right-click on the file and select "Open with" followed by your preferred browser.

By following these steps, you'll have your HTML environment ready to go. Now, let's explore the basic structure of an HTML document.

Every HTML document follows a basic structure that consists of an opening and closing tag. Here's an example of a simple HTML document:

Now, let's break down the structure of this HTML document:

<!DOCTYPE html> : This declaration at the beginning of the document tells the browser that the document is written in HTML5.
<html></html> : The <html> tags represent the root element of an HTML page. All other elements are contained within these tags.
<head></head> : The <head> section provides meta-information about the HTML document. It typically includes the title of the page, links to CSS stylesheets, and other metadata.
<title></title> : The <title> tags define the title of the web page, which appears in the browser's title bar or tab.
<body></body> : The <body> tags enclose the visible content of the web page. This is where you place headings, paragraphs, images, links, and other elements that users will see and interact with.
<h1></h1> : The <h1> tags define a top-level heading. Headings are used to structure the content and provide hierarchy. The <h1> tag represents the main heading of the page.
<p></p> : The <p> tags define a paragraph. Paragraphs are used to group blocks of text together.

By understanding this basic structure, you can start creating your own HTML documents. Next, Let's explore the different types of HTML tags in the next section.

HTML tags are used to define the structure and appearance of content within an HTML document. They consist of angle brackets ( <> ) surrounding a keyword that represents a specific element.

Tags are paired, consisting of an opening tag and a closing tag. The opening tag is denoted by <tagname> , while the closing tag is denoted by </tagname> . The content to be affected by the tag is placed between the opening and closing tags.

For example, the <h1> tag is used to define the main heading of a web page. The opening tag <h1> indicates the start of the heading, and the closing tag </h1> indicates the end. Any text placed between these tags will be rendered as a large, bold heading.

Here's an example of how the <h1> tag is used:

In this example, the text "Welcome to My Website" will be displayed as the main heading of the web page.

HTML provides a wide range of tags that you can use to structure and format your web page content. Let's explore some of the most commonly used tags in the next section.

HTML elements are the individual components that make up an HTML document. They are defined by HTML tags and can include text, images, links, tables, forms, and other types of content.

Each HTML element has a specific purpose and semantic meaning, which helps search engines and assistive technologies understand the content of a web page. By using the appropriate elements, you can create well-structured and accessible web pages.

Let's take a look at some of the essential HTML elements:

<h1> to <h6> : These elements represent headings of different levels, with <h1> being the highest and <h6> being the lowest.
<p> : This element is used to define a paragraph of text.
<a> : This element is used to create hyperlinks to other web pages or resources.
<img> : This element is used to embed images into a web page.
<ul> and <ol> : These elements are used to create unordered and ordered lists, respectively.
<li> : This element is used to define list items within a <ul> or <ol> .
<table> : This element is used to create tables for tabular data.
<form> : This element is used to create interactive forms for collecting user input.

These are just a few examples of HTML elements. As you delve deeper into HTML, you will discover many more elements that allow you to structure and present content in different ways.

HTML elements can also have attributes, which provide additional information about the element or modify its behavior. Let's explore HTML attributes in the next section.

HTML attributes are used to provide additional information about an element or modify its default behavior. They are specified within the opening tag of an element and consist of a name and a value, separated by an equals sign ( = ).

For example, the <img> element is used to display images on a web page. It has several attributes that allow you to specify the source of the image, its dimensions, alternative text, and more.

Here's an example of how the src and alt attributes are used with the <img> element:

In this example, the src attribute specifies the path to the image file, while the alt attribute provides alternative text that is displayed if the image cannot be loaded.

Attributes can also be used with other elements to modify their behavior or add specific functionalities. For instance, the <a> element uses the href attribute to specify the URL that the link should point to.

In this example, clicking on the link will navigate to the web page specified by the href attribute.

HTML attributes vary depending on the element they are used with. Some attributes are common across multiple elements, while others are specific to certain elements. The HTML specification provides detailed documentation on the attributes supported by each element.

Now that we have covered the basics of HTML syntax, tags, elements, and attributes, let's move on to organizing content with headings in HTML.

Headings are an essential part of any web page as they provide a hierarchical structure to the content. HTML offers six levels of headings, ranging from <h1> to <h6> . The <h1> element represents the highest level heading, while <h6> represents the lowest level.

Headings not only help users skim through the content but also provide semantic meaning to search engines. Search engines consider headings as important indicators of the page's topic and use them to determine the relevance of the content to a user's search query.

Let's take a closer look at how headings are used in HTML:

Using Headings

Headings are defined using the <h1> to <h6> tags. The text between the opening and closing tags represents the heading content.

Here's an example of how to use headings in HTML:

In this example, we have used headings to structure the content of a personal website. The main heading <h1> represents the title of the page, while the subheadings <h2> and <h3> provide a hierarchical structure to the remaining content.

Choosing the Right Heading Level

When using headings, it's important to choose the appropriate level that reflects the hierarchical structure of your content. The main heading should be represented by an <h1> element, followed by <h2> , <h3> , and so on, in descending order.

Using headings consistently and hierarchically not only helps users navigate the content but also improves the accessibility and SEO of your web page.

Now that we have explored headings, let's move on to presenting textual content using paragraphs in HTML.

Paragraphs are used to present blocks of text in HTML. They are represented by the <p> element and are commonly used for introducing content, providing descriptions, or structuring longer pieces of text.

To create a paragraph in HTML, simply wrap your text within the opening and closing <p> tags. Here's an example:

In this example, the text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis risus et nunc eleifend, a euismod mauris luctus. Aliquam commodo fringilla orci, nec fringilla arcu fermentum at." is wrapped in the <p> tags and will be displayed as a paragraph on the web page.

You can have multiple paragraphs on a web page by using multiple <p> elements. Each <p> element represents a separate paragraph of text.

Now that we have covered paragraphs, let's explore how to create hyperlinks using HTML links.

Hyperlinks, commonly known as links, are used to connect different web pages or resources together. Links allow users to navigate between pages, access external websites, or jump to specific sections within the same page.

HTML provides the <a> element to create links. The <a> element requires the href attribute, which specifies the destination of the link. The destination can be a URL, a file, an email address, or an anchor within the same page.

Let's take a look at some examples of using links in HTML:

Creating a Basic Link

To create a basic link, use the <a> element with the href attribute. The text placed between the opening and closing tags represents the link text.

In this example, clicking on the link text "Visit Example Website" will navigate the user to the web page specified by the href attribute.

Linking to Email Addresses

To create a link that opens the user's email client with a pre-filled email, use the mailto scheme in the href attribute.

In this example, clicking on the link text " Send us an email " will open the user's default email client and populate the recipient address with " [email protected] ".

Linking to Anchors

Anchors are used to link to specific sections within the same page. By assigning an id attribute to an element, you can create an anchor that can be linked to.

In this example, clicking on the links " Go to Section 1 " and " Go to Section 2 " will scroll the page to the respective sections with the specified id attributes.

HTML links offer a powerful way to connect web pages and resources, enhancing the navigation and user experience of your website. Now let's move on to visualizing content using images in HTML.

Images are an integral part of web design, helping to convey information, create visual interest, and enhance the overall user experience. In HTML, images are inserted using the <img> element, which allows you to embed images within your web page.

To insert an image, you need to provide the image's source (URL or file path) using the src attribute. Additionally, you can provide alternative text using the alt attribute, which is displayed if the image cannot be loaded or accessed by screen readers for accessibility.

Let's take a look at how to insert an image in HTML:

In this example, replace " path/to/image.jpg " with the actual source of the image file on your web server or a valid URL. The "Description of the image" should be replaced with a brief, descriptive text that conveys the meaning or context of the image.

It's important to optimize your images for web usage by resizing them appropriately and using compression techniques to reduce file size. This helps to ensure faster page load times and better overall performance.

HTML supports various image formats, including JPEG, PNG, and GIF. Choose the appropriate format based on the content and requirements of your web page.

Now that we have covered images, let's move on to creating lists in HTML.

Lists are used to organize related pieces of information into a structured format. HTML provides two types of lists: unordered lists ( <ul> ) and ordered lists ( <ol> ).

Unordered Lists

Unordered lists are used to present items in no particular order. Each item is represented by a <li> (list item) element.

To create an unordered list, wrap the list items with the <ul> and </ul> tags. Each item is defined using the <li> and </li> tags.

Here's an example of an unordered list:

In this example, the list items "Item 1," "Item 2," and "Item 3" will be displayed as bullet points.

Ordered Lists

Ordered lists are used to present items in a specific order. Each item is numbered by default. Similar to unordered lists, each item is represented by a <li> element.

To create an ordered list, wrap the list items with the <ol> and </ol> tags. Each item is defined using the <li> and </li> tags.

Here's an example of an ordered list:

In this example, the list items "First item," "Second item," and "Third item" will be displayed as a numbered list.

Nested Lists

HTML also allows you to nest lists within lists, creating a hierarchical structure. To create nested lists, simply include another <ul> or <ol> element within an existing list item ( <li> ).

Here's an example of a nested list:

In this example, "Item 2" contains a nested unordered list with "Subitem 1" and "Subitem 2" as list items.

Lists are a versatile way to present information in a structured format. Whether you need to create a simple bulleted list or a complex nested list, HTML provides the necessary elements to organize your content effectively.

Now that we have covered lists, let's move on to formatting text using HTML.

HTML provides various tags and attributes to format and style text within a web page. Let's explore some common text formatting techniques in HTML.

To make text bold, use the <b> or <strong> tags. These tags indicate that the enclosed text should be displayed in a bold font.

Here's an example of using the <b> tag:

In this example, the word "bold" will be displayed in a bold font.

Italic Text

To make text italicized, use the <i> or <em> tags. These tags indicate that the enclosed text should be displayed in an italic font.

Here's an example of using the <i> tag:

In this example, the word "italic" will be displayed in an italic font.

Underlined Text

To underline text, use the <u> tag. This tag indicates that the enclosed text should be underlined.

Here's an example of using the <u> tag:

In this example, the word "underlined" will be displayed with an underline.

Strikethrough Text

To add a strikethrough effect to text, use the <s> or <del> tags. These tags indicate that the enclosed text should be displayed with a line through it.

Here's an example of using the <s> tag:

In this example, the word "strikethrough" will be displayed with a line through it.

Superscript and Subscript Text

To display text as superscript or subscript, use the <sup> and <sub> tags, respectively. The <sup> tag is used for superscript, which is displayed above the normal line of text, while the <sub> tag is used for subscript, which is displayed below the normal line of text.

Here's an example of using the <sup> and <sub> tags:

In this example, the word "superscript" will be displayed above the normal line of text, and the word "subscript" will be displayed below the normal line of text.

HTML provides these text formatting options to enhance the presentation and readability of your content. However, it's important to use them sparingly and purposefully, keeping in mind accessibility and user experience considerations.

Now that we have explored text formatting, let's move on to creating tables in HTML.

Tables are used to organize and present data in a tabular format, with rows and columns. HTML provides the <table> , <tr> , <th> , and <td> elements to create tables.

Creating a Basic Table

To create a table, wrap the table content with the <table> and </table> tags. Each row of the table is represented by the <tr> and </tr> tags. Within each row, you can define the table header cells using the <th> and </th> tags, and the table data cells using the <td> and </td> tags.

Here's an example of a basic table with two rows and two columns:

In this example, the table has two columns, labeled "Header 1" and "Header 2," and two rows of data, with "Data 1" and "Data 2" in the respective cells.

Table Caption and Header Groups

You can add a caption to the table using the <caption> and </caption> tags. The caption provides a brief description or summary of the table.

In this example, the table has a caption "Monthly Expenses" above the table headers.

You can group table headers using the <thead> , <tbody> , and <tfoot> tags. The <thead> element represents the header section of the table, <tbody> represents the body, and <tfoot> represents the footer.

In this example, the table headers are grouped within the <thead> element, the table data is within the <tbody> element, and the table footer is within the <tfoot> element.

Tables in HTML provide a structured and organized way to present data. However, it's important to use tables responsibly and consider alternative approaches, such as using CSS for layout and styling.

Now that we have covered tables, let's move on to embedding multimedia content in HTML.

Multimedia elements, such as images, videos, and audio, can greatly enhance the interactivity and engagement of web pages. HTML provides specific elements and attributes to embed multimedia content within a web page.

Embedding Images

We have already discussed how to insert images using the <img> element. However, HTML also provides the <figure> and <figcaption> elements to add captions or descriptions to images.

Here's an example:

In this example, the <figure> element wraps the <img> element, and the <figcaption> element is used to provide a caption for the image.

Embedding Videos

To embed videos in HTML, you can use the <video> element. The <video> element supports various attributes, such as src (source), controls (display video controls), and autoplay (automatically play the video).

In this example, replace " path/to/video.mp4 " with the actual source of the video file. The controls attribute displays video controls, allowing users to play, pause, and adjust the playback. The autoplay attribute automatically plays the video when the page loads.

If the user's browser does not support the <video> element or the specified video format, the text "Your browser does not support the video tag" will be displayed.

Embedding Audio

To embed audio in HTML, you can use the <audio> element. Similar to the <video> element, the <audio> element supports attributes like src, controls, and autoplay.

In this example, replace " path/to/audio.mp3 " with the actual source of the audio file. The controls attribute displays audio controls, allowing users to play, pause, and adjust the playback. The autoplay attribute automatically plays the audio when the page loads.

If the user's browser does not support the <audio> element or the specified audio format, the text "Your browser does not support the audio tag" will be displayed.

Multimedia elements add visual and auditory appeal to your web pages, making them more engaging and interactive for your visitors. However, it's important to optimize multimedia files for web usage to ensure faster loading times and better performance.

Now that we have covered multimedia elements, let's move on to discussing HTML forms.

HTML forms allow you to capture user input, such as text, selections, and submit it to a server for further processing. Forms are widely used for various purposes, such as contact forms, sign-up forms, and search boxes.

Form Structure

To create a form, use the <form> and </form> tags. The <form> element acts as a container for form elements, such as input fields, checkboxes, radio buttons, and buttons.

Here's an example of a basic form:

Input Fields

Input fields are used to collect text-based input from users. HTML provides several types of input fields, such as text input, password input, email input, and more.

To create a text input field, use the <input> tag with the type attribute set to "text". You can also provide additional attributes, such as name (to identify the field) and placeholder (to display a hint or example value).

Here's an example of a text input field:

In this example, the input field allows users to enter their username.

You can create other types of input fields, such as password fields, email fields, number fields, and more. Simply change the type attribute accordingly.

Checkboxes and Radio Buttons

Checkboxes and radio buttons are used when you want users to select one or more options from a list.

To create a checkbox, use the <input> tag with the type attribute set to " checkbox ". You can also provide a value attribute to specify the value associated with the checkbox.

Here's an example of a checkbox:

In this example, the checkbox has the label "Option 1" and the value "Option 1". When the user checks the checkbox, the value will be included in the form submission.

To create a radio button, use the <input> tag with the type attribute set to " radio ". Each radio button within a group should have the same name attribute but different value attributes.

Here's an example of a radio button group:

Buttons are used to perform actions, such as submitting a form or triggering JavaScript functions.

To create a submit button, use the <input> tag with the type attribute set to " submit ". You can also provide a value attribute to specify the text displayed on the button.

Here's an example of a submit button:

In this example, the button displays the text " Submit ," and when clicked, it submits the form.

You can create other types of buttons, such as reset buttons and buttons that trigger JavaScript functions. Use the appropriate type attribute and provide the necessary attributes and event handlers.

HTML forms provide a way to interact with users and collect data. With various form elements and attributes, you can create complex and interactive forms to suit your needs.

Now that we have covered forms, let's move on to discussing semantic HTML.

Semantic HTML refers to using HTML elements that convey the meaning and structure of content, improving accessibility for users and providing valuable information to search engines for better SEO.

Semantic Elements

HTML5 introduced several semantic elements, such as <header> , <nav> , <article> , <section> , <aside> , and more. These elements define the structure and meaning of different parts of a web page.

For example, the <header> element represents the introductory content of a page or a section, typically containing a logo, navigation menu, and heading.

In this example, the <header> element contains the website's logo and navigation menu.

Similarly, the <article> element represents a self-contained composition within a document, such as a blog post, news article, or product description.

In this example, the <article> element contains the content of a blog post.

Using semantic elements helps improve the structure, accessibility, and SEO of your web pages. Search engines can better understand the content and its context, which can positively impact your search rankings.

Semantic Headings

Headings ( <h1> to <h6> ) play a crucial role in organizing and structuring content. They provide hierarchy and indicate the importance of different sections.

When using headings, it's important to follow the proper hierarchy. Use <h1> for the main heading, <h2> for subheadings, <h3> for further subsections, and so on.

In this example, <h1> represents the main heading, followed by <h2> for subheadings, and <h3> for subsections.

Using proper semantic headings not only improves the structure of your content but also helps screen readers and assistive technologies navigate the page for visually impaired users.

Semantic Links

HTML provides the <a> tag to create links. When using links, it's important to provide descriptive and meaningful link text.

In this example, the link text "Visit Example Website" is descriptive and provides an indication of the destination.

Using semantic links improves accessibility and helps users understand the purpose and context of the link.

HTML comments allow you to add notes or remarks within your HTML code that are not displayed in the browser. Comments are useful for documenting your code, explaining functionality, or temporarily disabling code snippets.

Comments are ignored by web browsers and serve as a useful tool for developers to annotate their code.

HTML entities are special characters that have reserved meanings in HTML. For example, the less than ( < ), greater than ( > ), and ampersand ( & ) characters are used to define tags and entities in HTML. To display these characters as regular text, you need to use their respective HTML entities.

HTML entities ensure that special characters are rendered correctly on web pages.

To ensure your HTML code is well-structured, maintainable, and SEO-friendly, keep these best practices in mind:

Semantic HTML : Use appropriate HTML elements to accurately represent the content's meaning. For instance, use <h1> for main headings, <p> for paragraphs, and <nav> for navigation menus.
Clean and Indented Code : Format your code for readability by indenting nested elements properly. Well-organized code is easier to understand and maintain.
Optimize Images : Compress images to reduce file sizes without sacrificing quality. Large image files can slow down your web page's loading speed, negatively impacting the user experience and search rankings.
Responsive Design : Ensure your web pages are responsive and mobile-friendly. With the increasing use of mobile devices, it's crucial to provide an optimal viewing experience across different screen sizes.
Accessibility : Make your web pages accessible to all users, including those with disabilities. Use proper alt attributes for images, provide descriptive text for links, and structure your content logically.

In this article, we have explored the fundamentals of HTML, including the structure of HTML documents, basic tags and elements, text formatting, links, images, tables, multimedia embedding, forms, semantic HTML, and SEO best practices. HTML serves as the backbone of the web, allowing us to create and structure content that is accessible, engaging, and optimized for search engines.

As you continue your journey in web development, keep experimenting with HTML and exploring its advanced features and capabilities. The possibilities are endless, and with the right knowledge and skills, you can create stunning and interactive web experiences.

Now that you have a solid understanding of HTML, it's time to put your knowledge into practice and start building your own web pages. Happy coding!

Now, let's address some frequently asked questions about learning HTML basics:

Q1: Is it necessary to learn HTML before learning CSS?

A1: Yes, HTML provides the foundation for web development. It defines the structure and content of a web page, while CSS is used to style and enhance the appearance. It's recommended to learn HTML first and then move on to CSS.

Q2: Can I create a website using only HTML?

A2: Yes, you can create a basic website using only HTML. However, for more advanced functionality and styling, you'll need to incorporate CSS and JavaScript.

Q3: Do I need any prior coding experience to learn HTML?

A3: No, HTML is beginner-friendly and doesn't require any prior coding experience. It's a markup language that uses tags to structure content.

Q4: Can I learn HTML on my own?

A4: Absolutely! There are plenty of online resources, tutorials, and interactive platforms available to learn HTML at your own pace. Practice and hands-on experience will help you become proficient.

Q5: Is HTML a programming language?

A5: No, HTML is not a programming language. It's a markup language used to structure and present content on the web. Programming languages like JavaScript are used to add interactivity and functionality to web pages.

Q6: How long does it take to learn HTML?

A6: Learning HTML basics can be accomplished in a relatively short amount of time, depending on your dedication and practice. With consistent effort, you can grasp the fundamentals within a few weeks.

Tailwind CSS Tutorial Build a Navbar with Dropdown Menu.jpg

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks! Faraz 😊

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox, latest post.

Create a Responsive Customer Review Using HTML and CSS

Learn how to build stunning customer reviews using HTML and CSS. Enhance your website's credibility and engagement effortlessly.

Create a URL Shortening Landing Page using HTML, CSS, and JavaScript

April 08, 2024

Develop Responsive Admin Dashboard with HTML, Materialize CSS, and JavaScript

April 05, 2024

Creating a Pricing Table with HTML, CSS, and JavaScript (Source Code)

April 02, 2024

Create Responsive Carousels with Owl Carousel | HTML, CSS, JavaScript Tutorial

April 01, 2024

How to Create a Scroll Down Button: HTML, CSS, JavaScript Tutorial

Learn to add a sleek scroll down button to your website using HTML, CSS, and JavaScript. Step-by-step guide with code examples.

How to Create a Trending Animated Button Using HTML and CSS

March 15, 2024

Create Interactive Booking Button with mask-image using HTML and CSS (Source Code)

March 10, 2024

Create Shimmering Effect Button: HTML & CSS Tutorial (Source Code)

March 07, 2024

How to Create a Liquid Button with HTML, CSS, and JavaScript (Source Code)

March 01, 2024

Build a Number Guessing Game using HTML, CSS, and JavaScript | Source Code

Learn how to create an interactive Number Guessing Game from scratch using HTML, CSS, and JavaScript with this beginner-friendly tutorial.

Building a Fruit Slicer Game with HTML, CSS, and JavaScript (Source Code)

December 25, 2023

Create Connect Four Game Using HTML, CSS, and JavaScript (Source Code)

December 07, 2023

Creating a Candy Crush Clone: HTML, CSS, and JavaScript Tutorial (Source Code)

November 17, 2023

Sudoku Solver with HTML, CSS, and JavaScript

October 16, 2023

Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js

Master the art of color picking with Vibrant.js. This tutorial guides you through building a custom color extractor tool using HTML, CSS, and JavaScript.

Build a Responsive Screen Distance Measure with HTML, CSS, and JavaScript

January 04, 2024

Crafting Custom Alarm and Clock Interfaces using HTML, CSS, and JavaScript

November 30, 2023

Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js Library

October 30, 2023

URL Keeper with HTML, CSS, and JavaScript (Source Code)

October 26, 2023

Creating a Responsive Footer with Tailwind CSS (Source Code)

Learn how to design a modern footer for your website using Tailwind CSS with our detailed tutorial. Perfect for beginners in web development.

Crafting a Responsive HTML and CSS Footer (Source Code)

November 11, 2023

Create an Animated Footer with HTML and CSS (Source Code)

October 17, 2023

Bootstrap Footer Template for Every Website Style

March 08, 2023

How to Create a Responsive Footer for Your Website with Bootstrap 5

August 19, 2022

Learn HTML Basics for Beginners in Just 15 Minutes

If you want to build a website, the first language that you need to learn is HTML.

In this article, we are going to go through the basics of HTML. At the end, we are going to build a basic website using only HTML.

Here's a video you can watch if you want to supplement this article:

What Is HTML?

HTML, which stands for Hypertext Markup Language, is a pretty simple language. It consists of different elements which we use to structure a web page.

What Are HTML Elements?

The element usually starts with an opening tag, which consists of the name of the element. It's wrapped in opening and closing angle brackets. The opening tag indicates where the element begins.

Similar to the opening tag, the closing tag is also wrapped in opening and closing angle brackets. But it also includes a forward slash before the element's name.

Everything inside the opening and closing tags is the content.

But not all elements follow this pattern. We call those that don't empty elements. They only consist of a single tag or an opening tag that cannot have any content. These elements are typically used to insert or embed something in the document.

For example, the <img> element is used to embed an image file, or the <input> element is used to insert an input onto the page.

In the example above, the <img> element only consists of one tag that does not have any content. This element is used to insert an image file from Unsplash in the document.

How to Nest HTML Elements

Elements can be placed inside other elements. This is called Nesting. In the example above, inside the <div> element we have an <h4> element and an <ul> or unordered list element. And Similarly inside the <ul> element, there are 3 <li> or list item elements.

Basic nesting is quite straight-forward to understand. But when the page gets larger, nesting can become complicated.

Therefore, before working with HTML, think about the layout structure you would like to have. You can draw it out on a piece of paper or in your mind. It will help a lot.

What are HTML Attributes?

Elements also have attributes, which contain extra information about the element that will not appear in the content.

In the example above, the <img> element has 2 attributes: src or source to specify the path of the image, and width to specify the width of the image in pixels.

With this example, you can see the following characteristics of attributes:

There is a space between attributes and the element name
Attributes are added in the opening tag
Elements can have many attributes
Attributes usually have a name and a value: name=“value”

But not every attribute has the same pattern. Some can exist without values, and we call them Boolean Attributes.

In this example, if we want to disable the button, all we have to do is pass a disabled attribute without any values. This means that the presence of the attribute represents the true value, otherwise, the absence represents the false value.

Common HTML elements

There are in total more than 100 elements. But 90% of the time you will only use around 20 of the most common. I have put them into 5 groups:

Section elements

These elements are used to organize the content into different sections. They are usually self-explanatory, for example, <header> usually represents a group of the introduction and navigation section, <nav> represents the section that contains navigation links, and so on.

Text content

These elements are used to organize content or text blocks. They are important to accessibility and SEO. They tell the browser the purpose or structure of the content.

These elements can be used together to create forms that users can fill out and submit. Forms might be the trickiest part of HTML.

Images and Links

These elements are used to insert an image or create a hyperlink.

These elements are used to add a break to the webpage.

You can find all the elements on developer.mozilla.org . But for beginners, you just need to know the most common ones.

Block-level vs inline HTML elements

By default, an element can be either block-level or an inline element.

Block-level elements are the elements that always start on a new line and take up the full width available.

Inline elements are the elements that do not start on a new line and it only take up as much width as necessary.

Two elements that represent block-level and inline elements, respectively, are <div> and <span> . In this example, you can see that the <div> elements takes 3 lines, whereas the <span> element only takes up 1 line.

But the question is: how do we know which ones are block-level elements and which ones are inline elements? Well, unfortunately you need to remember them. The easiest way is to remember which are inline elements – and the rest are block elements.

If we look back at the most common HTML elements, inline elements include: <span>, <input>, <button>, <label>, <textarea>, <img>, <a>, <br> .

How to comment in HTML

The purpose of comments is to include notes in the code to explain your logic or simply to organize your code.

HTML comments are wrapped in the special markers:  and they are ignored in the browser.

How to use HTML entities

What if you want to show the text: the <p> tag defines a paragraph. , but the browser interprets <p> as an opening tag for a new element? In this case, we can use HTML entities like in the following example:

How to use emoji in HTML

In the modern web, we can display emoji in HTML pretty easily, like this: 👻

Common beginner mistakes in HTML

1. tags/element names.

Tags/Element names are cAse-inSensitive. This means that they can be written in lowercase or uppercase, but it is recommended that you write everything in lowercase: <button> not <ButTon> .

2. Closing tag

Failing to include a closing tag is a common beginner error. Therefore, whenever you create an opening tag, immediately put in a closing tag.

This is wrong:

The tags have to open and close in a way that they are inside or outside one another.

4. Single quotes and Double quotes

You cannot mix single quotes and double-quotes. You should always use double quotes and use HTML entities if needed.

How to build a simple website with HTML

Individual HTML elements are not enough to create a website. So let's see what more we need to build a simple website from scratch.

How to create an HTML document

First, let's open Visual Studio Code (or your favorite code editor). In the folder of your choice, create a new file and name it index.html.

In the index.html file, type ! (exclamation mark) and press enter. You will see something like this:

This is the minimal code that an HTML document should have to make up a website. And here we have:

<!DOCTYPE html> : First we have Doctype. For some weird historical reason in HTML we have to include the doctype for everything to work correctly.
<html lang="en"></html> : The <html> element wraps all the content on the page, also known as the root element. And we should always include the lang attribute to declare the language of the page.
<head></head> : The <head> element is a container for everything you want to include, but not content that you show to your users.
<meta charset="UTF-8" /> : The first meta element is used to set the character set to be UTF-8, which includes most characters from written languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> : The second meta element specifies the browser viewport. This setting is for a mobile-optimized site.
<title>Document</title> : This is the <title> element. It sets the title of the page.
<body></body> : The <body> element contains all the content on the page.

How to build a pancake recipe page

Alright, now that we have the starter code, let's build a pancake recipe page. We are going to use the content from this AllRecipes Page .

First, let's give the <title> element content of the pancakes recipe. You will see the text on the web page tab change. In the <body> element, let's create 3 elements: <header> , <main> and <footer> representing 3 sections.

1. Build the header section

In the header, we want to have the logo and the navigation. Therefore, let's create a div with the content ALL RECIPE for the logo.

For the navigation, let's use the <nav> element. Within the <nav> element, we can use <ul> to create an unordered list. We want to have 3 <li> elements for 3 links: Ingredients, Steps, and Subscribe. The header code looks like this:

2. Build the Main Section

In the main section, first, we want to have a title and an image. We can use h1 for the title and <img> for the image (we can use an image from Unsplash for free):

Next, we want to list all the ingredients. We can use <ol> to create an ordered list and <input type="checkbox" /> to create a checkbox.

But before that, we can use <h2> to start a new content block. We also want to add the id attribute for <h2> so that the link in the navigation knows where to go:

After the ingredients, we want to list all the steps. We can use <h4> for the step heading and <p> for the step content:

Alright, now that we are done with the main section, let's move on to the footer section.

3. Build the Footer Section

In the footer, we want to have a subscribe form and copyright text.

For the subscribe form, we can use the <form> element. Inside it, we can have an <input type="text"> for text input and a <button> for the submit button.

For the copyright text, we can simply use a <div> . Notice here, we can use the HTML entity $copy; for the copyright symbol.

We can add <br> to add some space between the subscribe form and the copyright text:

Alright now we are done! Here is the full code for reference:

You can build a simple website with just HTML. But to be able to build beautiful and functional websites, you need to study CSS and JavaScript.

You can follow me on social media or Youtube for future updates on these topics. But meanwhile, you can check out the freeCodeCamp Curriculum to practice HTML by solving small tasks.

Otherwise, stay happy coding and see you in future posts 👋. __________ 🐣 About me __________

I am the founder of DevChallenges
Subscribe to my Channel
Follow my Twitter
Join Discord

Creator of devchallenges.io

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Introduction to HTML What is HTML?
The History of HTML
How HTML Works
Setting Up an HTML Development Environment
Basic HTML Structure The Structure of an HTML Document
HTML Tags and Attributes
Creating Headings and Paragraphs
Adding Images and Links
HTML Formatting and Layout Using Div and Span Elements
Applying Styles with CSS
Creating Lists and Tables
Using HTML Layout Tags
HTML Forms Creating Input Fields and Buttons
Handling User Input with Form Handling Techniques
Validating and Processing Form Data
Advanced HTML Techniques Working with Frames and iFrames
Using HTML5 Semantic Tags
Creating MultiMedia Content with Audio and Video Elements
Using HTML APIs and Web Components
Best Practices and Troubleshooting Tips for Writing Clean, Maintainable HTML Code
Common HTML Mistakes and How to Avoid Them
Debugging and Testing HTML Code
Final Project Building a Complete HTML Website
Putting All of the Skills Learned in the Course into Practice

Participants 937

The Structure of an HTML Document

Yasin Cakal

The structure of an HTML document is the foundation of any web page. It determines how the content of the page is organized and displayed, and it’s important to understand how it works in order to create professional-quality websites.

In this article, we’ll take a deep dive into the structure of an HTML document, including the basic structure, the head and body sections, and the various elements that make up a web page.

Basic Structure of an HTML Document

An HTML document is made up of a series of tags, which are used to mark up the content of the page. These tags tell the browser how to display the content, whether it’s a heading, a paragraph, an image, or a link.

Here’s the basic structure of an HTML document:

The <!DOCTYPE html> declaration tells the browser that this is an HTML document. The <html> element is the root element of the document, and it contains all of the other elements.

The <head> element is used to contain information about the document, such as the title, the style sheet, and any meta tags. The <body> element is used to contain the actual content of the page, such as headings, paragraphs, and images.

Head Section

The head section of an HTML document is used to contain information about the document, such as the title, the style sheet, and any meta tags. Here’s an example of the head section of an HTML document:

The <title> element is used to specify the title of the web page, which is displayed in the browser’s title bar or tab. The <link> element is used to link to a style sheet, which is a separate file that contains CSS rules that control the appearance of the web page. The <meta> element is used to provide additional information about the document, such as a description or keywords.

Body Section

The body section of an HTML document is used to contain the actual content of the web page. This can include headings, paragraphs, lists, images, links, and any other elements you want to include. Here’s an example of the body section of an HTML document:

In this example, we have a heading, a paragraph, and an unordered list. The <h1> element is used to create a heading, the <p> element is used to create a paragraph, and the <ul> element is used to create an unordered list. The <li> element is used to create a list item.

Elements and Attributes

HTML elements are usually written in pairs, with an opening tag and a closing tag, and the content of the tag goes in between. For example, the <h1> element is used to create a heading, and it’s written like this:

HTML also has attributes, which provide additional information about the elements. Attributes are written inside the opening tag, and they consist of a name and a value. For example, the src attribute is used to specify the source of an image, and it’s written like this:

In this example, the src attribute has a value of “image.jpg”, and the alt attribute has a value of “My Image”. The alt attribute is used to provide a text description of the image, which is important for accessibility and search engine optimization.

Block-Level and Inline Elements

HTML elements can be either block-level or inline elements. Block-level elements are elements that create a new block of content, such as headings, paragraphs, and lists. They usually take up the full width of the page and start on a new line.

Inline elements are elements that are used within the flow of text, such as links and images. They don’t create a new block of content and don’t take up the full width of the page.

Here’s an example of block-level and inline elements:

In this example, the <h1> element is a block-level element, and the <p> element is a block-level element. The <a> element is an inline element, and it’s used within the flow of the paragraph.

In this article, we looked at the basic structure of an HTML document, including the head and body sections and the various elements that make up a web page. We also explored elements and attributes, and we learned about the difference between block-level and inline elements.

By understanding the structure of an HTML document, you’ll have a solid foundation for building web pages that are well-organized, easy to read, and visually appealing. With the skills and knowledge you gain in this course, you’ll be well on your way to creating your own stunning websites.

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

What is the root element of an HTML document?

The <html> element is the root element of an HTML document.

What is the purpose of the <head> element in an HTML document?

The <head> element is used to contain information about the document, such as the title, the style sheet, and any meta tags.

What is the purpose of the <body> element in an HTML document?

The <body> element is used to contain the actual content of the web page, such as headings, paragraphs, and images.

What is the purpose of HTML attributes?

HTML attributes provide additional information about the elements. They are written inside the opening tag, and they consist of a name and a value.

True or false: Inline elements create a new block of content and take up the full width of the page.

False. Inline elements are elements that are used within the flow of text, and they don’t create a new block of content or take up the full width of the page. Block-level elements are elements that create a new block of content, such as headings, paragraphs, and lists. They usually take up the full width of the page and start on a new line.

What Is HTML? Hypertext Markup Language Basics Explained

Varun Saharawat is a seasoned professional in the fields of SEO and content writing. With a profound knowledge of the intricate aspects of these disciplines, Varun has established himself as a valuable asset in the world of digital marketing and online content creation.

HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages. Keep reading to know more about HTML !

About HTML : From the first website developed in December 1990 to the billions of pages active online today, HTML has been the foundation connecting us all on the World Wide Web. While HTML may seem intimidating at first glance due to the tags and syntax involved, we have found that it is actually quite straightforward and intuitive once you understand its core purpose: to Structure web page content in a readable and shareable format.

In this post, we aim to break down some HTML basics for any newcomers out there, explaining what it is, how it works, and how to get started with your very first HTML document. Stick with me and by the end you’ll have a solid understanding of this foundational web technology.

And if you’re ready to take your coding journey to the next level, we highly recommend checking out the Full Stack Development Course offered by Physics Wallah . And as a special offer for our readers, be sure to use the coupon code “READER” for an exclusive discount on your enrollment fee.

Table of Contents

About HTML Examples

Below are some basic HTML examples that demonstrate various elements, tags, and functionalities used in web development :

Basic Structure of an HTML Document:

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Welcome to My Web Page</h1>

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

</body>

</html>

Heading Tags:

<h1>Main Heading</h1>

<h2>Subheading Level 2</h2>

<h3>Subheading Level 3</h3>

<!– …and so on until h6 –>

What is HTML Used For?

HTML (HyperText Markup Language) is primarily used for creating and structuring web pages on the internet. Here are some of the primary purposes and uses of HTML:

1) Web Page Structure:

HTML defines the basic structure and layout of a web page, organizing content into elements such as headings, paragraphs, lists, links, images, forms, tables, and more. It provides a hierarchical structure that browsers use to render and display content to users.

2) Content Presentation:

HTML allows developers to present content in a structured and organized manner, making it easier for users to read, navigate, and understand information on web pages. By using semantic elements and tags, HTML enhances readability, accessibility, and user experience.

3) Cross-Browser Compatibility:

HTML ensures cross-browser compatibility by providing a standardized markup language that browsers interpret consistently across different platforms and devices. This ensures that web pages display and function correctly across various browsers like Chrome, Firefox, Safari, Edge, and others.

4) Accessibility:

HTML supports accessibility features, allowing developers to create web pages that are accessible to individuals with disabilities. By using semantic elements, alt text for images, descriptive links, proper headings, and ARIA (Accessible Rich Internet Applications) attributes, HTML helps make web content more inclusive and usable for all users.

5) Integration with Other Technologies:

HTML integrates seamlessly with other technologies like CSS (Cascading Style Sheets) for styling and layout, JavaScript for interactivity and dynamic functionalities, and various server-side languages and frameworks for data processing, content management, and application development.

6) Responsive and Mobile-Friendly Design:

HTML supports responsive design principles, allowing developers to create web pages that adapt and respond to different screen sizes, resolutions, and devices. By using media queries, flexible layouts, and scalable images, HTML helps create mobile-friendly and responsive web designs that provide consistent user experiences across desktops, laptops, tablets, and smartphones.

7) Hyperlinks and Navigation:

HTML enables the creation of hyperlinks (<a> tags) that connect web pages, resources, and content within a website or across different websites. This facilitates navigation, information retrieval, content sharing, and user interaction on the internet.

8) Forms and User Input:

HTML provides form elements (<form>, <input>, <textarea>, <select>, <button>, <label>) for creating interactive forms, collecting user input, and submitting data to servers. This enables user registration, data submission, search functionality, feedback collection, and various other interactions on web pages.

HTML is used for creating, structuring, presenting, and organizing content on web pages. It serves as the foundation for web development, enabling developers to design, build, and deliver static and dynamic websites, web applications, multimedia content, online services, and interactive experiences on the internet. By leveraging HTML’s capabilities, developers can create accessible, responsive, cross-browser compatible, and user-friendly web solutions tailored to specific requirements, audiences, and objectives.

HTML Introduction

HTML, which stands for HyperText Markup Language, is a markup language primarily used to structure and format content on the web. It serves as the foundation for creating web pages and web applications.

Key points about HTML include:

Purpose : HTML allows browsers to manipulate text, images, and other content to display them in the desired format.
Structure : HTML provides the code structure for a web page. It dictates how content should be organized and displayed on browsers.
Usage : Alongside other web technologies like CSS and JavaScript, HTML plays a crucial role in building websites. It structures the content, while CSS styles it, and JavaScript adds interactivity.

How Does HTML Work?

HTML (HyperText Markup Language) works as the backbone of web pages, providing the structure and content that browsers interpret and display to users. Here’s how HTML works in the context of creating and rendering web pages:

1) Markup Language:

HTML is a markup language that uses a set of predefined tags (elements) to structure content on a web page. These tags define different elements such as headings, paragraphs, lists, links, images, forms, tables, and more.

2) Document Structure:

An HTML document typically starts with a <!DOCTYPE html> declaration, followed by an <html> element that encapsulates the entire content of the web page. The <html> element contains two main sections: <head> and <body>.

<head> : This section includes metadata, links to external resources (CSS, JavaScript ), character encoding, and other essential information about the document. It does not display content directly to users but provides instructions and settings for browsers.
<body> : This section contains the main content of the web page, including text, images, links, forms, multimedia elements, and other visible content that users interact with and see in their browsers.

3) Element Structure:

HTML elements consist of opening and closing tags enclosed in angle brackets (< >). The opening tag defines the beginning of an element, and the closing tag (preceded by a forward slash /) defines the end of an element. Elements can contain text, attributes, and nested elements, creating a hierarchical structure within the document.

4) Attributes:

HTML elements can have attributes that provide additional information or modify the behavior of the element. Attributes are specified within the opening tag and typically consist of a name-value pair (e.g., attribute=”value”). Common attributes include id, class, src, href, alt, title, style, and more.

5) Rendering Process:

When a user requests a web page, the web server sends the HTML document to the user’s browser. The browser interprets the HTML document, parses the markup tags, and renders the content according to the defined structure, styles (CSS), and behaviors (JavaScript).

6) Structure and Content:

Browsers render HTML elements based on their hierarchical structure, displaying text, images, links, forms, tables, and other content elements within the <body> section.

7) Styling and Presentation:

CSS (Cascading Style Sheets) defines the visual appearance, layout, and design of HTML elements. Browsers apply stylesheets to HTML elements, specifying properties like colors, fonts, spacing, alignment, responsiveness, and other design aspects.

8) Interactivity and Behavior:

JavaScript adds interactivity, dynamic functionalities, and behaviors to HTML elements. Browsers execute JavaScript code, handling user interactions, form submissions, content updates, animations, events, and other client-side operations to enhance user experiences and functionalities.

9) Cross-Browser Compatibility:

HTML aims for cross-browser compatibility, ensuring that web pages display and function consistently across different browsers (Chrome, Firefox, Safari, Edge, etc.) and devices (desktops, laptops, tablets, smartphones).

HTML works by providing a structured markup language for creating web pages, defining content elements, attributes, and document structure. Browsers interpret HTML documents, render content, apply styles (CSS), execute scripts (JavaScript), and display web pages to users, enabling interactive, visually appealing, and accessible web experiences across various platforms and devices.

Also Read: C++ Classes and Objects: Exercises, Examples

HTML tags are used to define elements within an HTML document, providing structure and content to web pages. Below are some commonly used HTML tags with examples:

1) Document Structure Tags:

a) <html>: Defines the root element of an HTML document.
b) <head>: Contains metadata and other document-level settings.

<title>Page Title</title>

c) <body>: Contains the main content of the web page visible to users.

<h1>Welcome to My Website</h1>

2) Text Formatting Tags:

a) <h1> to <h6>: Defines headings of varying levels.

<h2>Subheading</h2>

b) <p>: Defines a paragraph of text.

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

c) <strong>: Renders text in a strong emphasis (bold).

<strong>Important Text</strong>

d) <em>: Renders text in emphasized style (italic).

<em>Italicized Text</em>

e) <blockquote>: Defines a block quotation.

This is a blockquote example.

</blockquote>

3) Links and Navigation Tags:

a) <a>: Defines a hyperlink to navigate to another page or resource.

<a href=”https://www.example.com”>Visit Example</a>

b) <nav>: Defines a section of navigation links.

<nav>

<a href=”/home”>Home</a> | <a href=”/about”>About</a>

</nav>

4) Lists Tags:

a) <ul> and <li>: Defines an unordered list and its items.

</ul>

b) <ol> and <li>: Defines an ordered list and its items.

<li>First Item</li>

<li>Second Item</li>

</ol>

5) Images and Media Tags:

a) <img>: Embeds an image into the web page.

b) <audio>: Embeds audio content with controls.

</audio>

c) <video>: Embeds video content with controls.

</video>

6) Form Tags:

a) <form>: Defines a form to collect user input.

<label for=”username”>Username:</label>

</form>

b) <input>: Defines an input field within a form.

c) <textarea>: Defines a multi-line text input field.

Enter text here…

</textarea>

Features of HTML

HTML (HyperText Markup Language) is the standard markup language used to create web pages. HTML provides a structured way to organize content on the web, defining the structure and layout of a web page through markup tags. Here are some key features of HTML:

Element-based Structure : HTML uses a set of predefined elements (tags) to define the structure and content of a web page. Elements are represented by tags enclosed in angle brackets, such as <html>, <head>, <body>, <h1>, <p>, <a>, <img>, etc.
Semantic Elements : HTML5 introduced semantic elements like <header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, <figure>, and <figcaption>. These elements provide meaningful structure and improve accessibility and SEO by conveying the purpose and content of different sections on a web page.
Attributes : HTML elements can have attributes that provide additional information or modify the behavior of the element. Attributes are specified within the opening tag of an element and include properties like id, class, src, href, alt, title, style, width, height, lang, charset, etc.
Text and Content Formatting : HTML allows you to format text and content using elements like headings (<h1> to <h6>), paragraphs (<p>), lists (<ul>, <ol>, <li>), emphasis (<em>, <strong>), quotations (<blockquote>, <q>), preformatted text (<pre>), and more.
Hyperlinks : HTML provides the <a> (anchor) element to create hyperlinks, allowing users to navigate between different web pages, sections within a page, or external resources. Hyperlinks are defined using the href attribute.
Images and Multimedia : HTML supports embedding images (<img>), audio (<audio>), and video (<video>) content into web pages. These elements allow you to display multimedia content, set attributes like source (src), dimensions, controls, autoplay, loop, etc.
Forms and Input Elements : HTML includes form elements (<form>, <input>, <textarea>, <select>, <button>, <label>, <fieldset>, <legend>) to create interactive forms, collect user input, and submit data to servers using methods like GET or POST.
Tables and Data Representation : HTML provides elements (<table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>, <caption>) for creating tables and representing structured data, such as charts, schedules, grids, and more.
Metadata and Document Structure : HTML includes elements (<head>, <title>, <meta>, <link>, <base>, <style>, <script>) for defining metadata, document properties, character encoding, stylesheets, scripts, and other essential elements that contribute to the overall structure and functionality of a web page.

Pros and Cons of HTML

HTML (HyperText Markup Language) is the standard markup language used to create web pages. Here are some pros and cons associated with HTML:

Pros of HTML:

HTML is a universally recognized and accepted standard for creating web pages, ensuring compatibility across different browsers and platforms.
HTML is relatively easy to learn and understand, making it accessible for beginners and professionals alike.
HTML provides a structured way to organize content using semantic elements, improving accessibility and SEO (Search Engine Optimization).
HTML seamlessly integrates with other technologies like CSS (Cascading Style Sheets) and JavaScript, allowing for enhanced styling, interactivity, and functionality.
HTML supports accessibility features, allowing developers to create web pages that are more inclusive and usable for individuals with disabilities.
HTML is scalable, allowing developers to create simple static websites or complex web applications with dynamic content and interactivity.
HTML is based on open standards maintained by the W3C (World Wide Web Consortium), ensuring transparency, collaboration, and continuous improvement of web technologies.

Cons of HTML:

HTML primarily focuses on structure and content, lacking advanced features for interactivity, styling, and dynamic functionalities.
While HTML aims for cross-browser compatibility, inconsistencies and rendering issues may arise across different browsers and versions, requiring additional testing and adjustments.
HTML can become verbose and redundant, especially for larger websites or web applications, leading to increased file sizes and loading times.
To create visually appealing and interactive web pages, developers often rely on external technologies like CSS for styling and JavaScript for interactivity, leading to dependencies and potential compatibility issues.
HTML alone does not provide robust security features, making web pages vulnerable to various threats like cross-site scripting (XSS), injection attacks, and data breaches. Proper security measures and practices are essential to mitigate risks.
HTML has evolved over time, with different versions introducing new features, elements, and standards. Keeping up with the latest developments and best practices requires ongoing learning and adaptation.

Also Read: &nbsp HTML Space Challenges and Tricks

Difference Between HTML and HTML 5

Below table provides a concise overview of some key differences between HTML and HTML5. Keep in mind that HTML5 builds upon the foundation of HTML, introducing new features, elements, and APIs to enhance web development capabilities and user experiences.

How are HTML, CSS, and Javascript Related?

HTML (HyperText Markup Language), CSS (Cascading Style Sheets), and JavaScript are three foundational technologies used to create web content and applications. They each have distinct roles but work together to produce interactive and visually appealing web experiences. Here’s how they are related:

1) HTML (Structure):

HTML provides the structure and content of a web page. It uses markup tags to define elements such as headings, paragraphs, lists, links, images, and more.
HTML lays the foundation for what content appears on a web page, such as text, images, forms, tables, and other elements.

2) CSS (Presentation):

CSS is used for styling and presentation. While HTML defines the structure and content, CSS controls how the content looks. This includes aspects like layout, colors, fonts, spacing, and responsive design.
By using CSS, developers can control the appearance of multiple web pages or an entire website with consistent styles. It separates the content from its presentation, allowing for greater flexibility and maintainability.

3) JavaScript (Behavior):

JavaScript is a scripting language that enables interactivity and dynamic functionality on web pages. While HTML provides structure and CSS provides styling, JavaScript adds behavior to web pages.
With JavaScript, developers can create interactive features such as animations, user interface elements, form validations, dynamic content updates, event handling, and more.
JavaScript allows web pages to respond to user actions, make requests to servers (AJAX), manipulate the DOM (Document Object Model), and perform various client-side operations.

Relationship:

HTML, CSS, and JavaScript often work together to create a cohesive and functional web experience.
A typical web page might consist of HTML for structure and content, CSS for styling and layout, and JavaScript for interactivity and dynamic behavior.
For example, HTML defines the layout and content elements, CSS styles those elements to achieve a specific design, and JavaScript adds functionality like interactive buttons, form validation, or dynamic content loading.

By simply understanding the tags, attributes, and elements of HTML, you have the power to bring your ideas and visions to life on a digital platform. And while learning a new skill may seem intimidating at first, taking the time to understand HTML will not only enhance your knowledge but also open up opportunities for personal growth and career advancement. So why wait? Take the first step towards becoming a full stack developer by enrolling in Physics Wallah’s Full Stack Development Course . And don’t forget to use the exclusive “READER” coupon code for an amazing discount.

For Latest Tech Related Information, Join Our Official Free Telegram Group : PW Skills Telegram Group

About HTML FAQs

When was html 4.01 released.

HTML 4.01 was released in December 1999.

What is HTML?

HTML stands for HyperText Markup Language. It is a standard markup language used to structure and format content on the web, defining elements such as headings, paragraphs, links, images, forms, and more.

What are the 5 uses of HTML?

Structuring Web Content Creating Links and Navigation Embedding Images and Multimedia Designing Forms and Collecting User Input Enhancing Accessibility and SEO (Search Engine Optimization)

What are the main features of HTML?

Element-based Structure Semantic Elements (e.g., headers, paragraphs, lists) Attributes (e.g., id, class, src, href) Hyperlinks and Navigation Text Formatting and Content Presentation Forms and User Input Elements Tables, Images, and Multimedia Support Accessibility and Cross-Browser Compatibility

What is the importance of HTML?

HTML is essential for creating web pages and structuring content on the internet. It provides a standardized markup language that browsers interpret to display content consistently across different platforms and devices. HTML enables developers to design, organize, and present information, enhance user experiences, facilitate navigation, and ensure accessibility, making it a foundational technology for web development and online communication.

Cloud Computing Courses: What is a Cloud Computing Course?

Talking about cloud computing courses we have plenty of free tutorials and dedicated courses provided by top organizations. Read the…

DevOps Course Syllabus: What is Taught in DevOps Course?

DevOps course consists of fundamentals of DevOps and crucial tools to master DevOps concepts. Let us know about the latest…

Is AWS DevOps Engineer Certification Worth IT?

AWS DevOps Certification is an important testament to your knowledge of relevant topics and skills to handle AWS-based services’ complexities.…

Is Azure DevOps Exam Easy?
Which Online Training Is Best For Devops? (Trending Devops Courses Online)
DevOps Training: How To Become A DevOps Engineer in Six Months?
Backend Languages: Which Backend Language Has Most Jobs?
DevOps Roadmap 2024: How to Become A DevOps Engineer?
What are Cloud Computing Classes?
About C Program: Features, Data Types

Software Engineering
Data Science
Data Analytics
UX / UI Design
Digital Marketing
Technical Project Management
How we work
Los Angeles
San Francisco
Philadelphia
Washington DC
Salt Lake City
Minneapolis
Thinkful News
Student Stories
How We Work
Communities

Learning the Basics of HTML and HTML5

By thinkful.

The process of building, creating, and maintaining webpages and websites comes under the purview of both front-end and back-end web development . While websites are applications that work on the internet, the structure of a web page is defined by HTML and HTML5.

What is HTML?

The term HTML is also known as Hypertext Markup Language. Using attributes, tags, and elements, HTML defines the document's skeleton or structure. The structural elements are provided in headings, lists, and paragraphs.

Features of HTML

HTML has many features. Let us take a look at some popular features that help developers.

• HTML is simple user friendly, and platform-independent. Hypertext markup language has more than 100 built-in tags, and the developers need to learn only a handful for daily use. • The investment in HTML scripting language is low, and the return is high in terms of features. The developers can add audio, images, and videos to the web page using HTML.

Structure of HTML

The HTML contains two parts the head and the body. The root tag of the HTML document is <HTML>.

• The head part includes the title of the web pages. If the styles and presentation are specified in a separate CSS file, developers need to have the external link in the head section. • The body section includes all tag elements used to display the webpage's content — for example, the tag to add text, links, images, etc.

In the above code, the body part contains the heading tag and a link specified using the anchor tag.

What is HTML5?

HTML5 is nothing but the latest version of HTML. It includes all tags and features of HTML with new tags like <canvas>, <video>, and <audio>. and . It also has tags for semantics named <footer>, <header>, and <article>.

Structure of HTML5

Let us take a look at the structure of HTML5. The HTML contains two parts the head and the body. The root tag of the HTML document is <HTML>.

• The head part includes the title, encoding style, and metadata of the web pages. If the styles and presentation are specified in a separate CSS file, a developer needs to include the external link in the head section. • The body section includes all tag elements used to display the webpage's content. In HTML5, you can add the tags like header, footer, video, etc.

HTML vs. HTML5

There are eight key factors to examine the differences between HTML and HTML5.

• Browser compatibility:

HTML runs smoothly on all earlier versions of Mozilla Firefox, Google Chrome, and so on. HTML5 runs smoothly on Google Chrome 61 and the upcoming Mozilla Firefox version 4.

• Multimedia Support:

HTML requires extra support from Adobe Flash Reader to play video or audio files on webpages. HTML5 also supports video and audio files without additional support. It has built-in tags named <audio> and <video> .

• JavaScript Support:

HTML does not support javascript files to run directly on the browser. HTML5 uses the JP web worker API to run the javascript files directly on the browser.

• Location Access:

Using HTML, the browser cannot get the user's absolute location. In HTML5, the user's location is obtained using the JS GeoLocation API application.

To declare the doc type, the syntax in HTML is complicated and lengthy. To set the character encoding, you need to elaborate on specifics. In HTML5, the syntax is simple, and developers can specify the character encoding easily. Attributes charset, ping, and async are part of HTML5.

HTML does not contain specific tags to define semantics to divide the document into many subparts. In HTML5, the tag <section>, <nav>, <footer> is used to define the semantics. Instead of <div> tag, the documents are separated into subparts using the <header>, <nav>, <main>, <article>, <section>, <aside> and <footer>.

• Mobile Friendly:

Compared to HTML, HTML5 is mobile-friendly. The applications created using HTML5 are compatible with desktop, notebook, and mobile devices.

HTML uses the concept of cookies to store temporary data. In HTML5, the webpages are connected to the database, which stores temporary data.

Though HTML is the foundation for webpages, HTML5 is the advanced version with many benefits for developers. Using it allows you to develop attractive web pages with a wide range of colors, fonts, and shades. It provides support for client-side databases while improving browser performance and security.

Want to learn HTML5? Contact us to learn more about coding bootcamps.

Share this article

Recommended, find more like this story.

HTML Basic Structure

The basic structure of an HTML document consists of several elements that define the overall layout and content of a web page. Here's an example of the basic structure of an HTML document:

Here's an explanation of the above example:

<!DOCTYPE html>: This determines that it is an HTML document.
<html lang="en">: This is the opening of the html tag <html> and the last line is closing of the html tag </html>. This is the root element of the HTML document with the language attribute set to "en" (English).
<head>: This is the head tag and it contains metadata such as character set, viewport settings, and the page title.
<meta charset="UTF-8">: This tag specifies the character encoding.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This tag sets the viewport properties for responsive design.
<title>Your Page Title</title>: This is the title tag and it defines the title of the page.
<body>: This is the body tag and it contains the actual content of the web page, such as text, images, links, and other elements.

This basic structure provides the foundation for building more complex web pages by adding additional HTML elements and integrating CSS (Cascading Style Sheets) for styling, as well as JavaScript for interactivity.

Every HTML document must include the <html> tag, <head> tag, <title> tag, and <body> tag.

The <html> tag is the topmost element, and all the other tags are nested within this tag.

The <head> tag provides information about your HTML file; it is nested within the <html> tag. Typically, the <title> tag is the only tag nested within the <head> tag.

The <title> tag comes after the <head> tag. It should be included in every HTML document because it identifies the page to the rest of the world. Its output doesn't appear as part of the page but is displayed on the browser's title bar. If this tag is not coded, some browsers may show it as 'Untitled,' while others display the URL for the page on the browser's title bar.

The <body> tag complements the <head> tag and contains all the tags or elements that a browser displays as the body of your HTML document.

HTML is case-insensitive

The HTML code is not case-sensitive, meaning <html> and <HTML> are the same. Standard HTML code follows lowercase tags because it is recommended by the W3C (World Wide Web Consortium).

HTML Tutorial
HTML Exercises
HTML Attributes
Global Attributes
Event Attributes
HTML Interview Questions
DOM Audio/Video
HTML Examples
Color Picker
A to Z Guide
HTML Formatter
HTML Basics
HTML Introduction
HTML Full Form
HTML Editors
HTML Comments
HTML Layout
HTML Elements
HTML Headings
HTML Paragraphs
HTML Text Formatting
HTML Quotations
HTML Color Styles and HSL
HTML Links Hyperlinks
HTML Images
HTML Tables
HTML Block and Inline Elements
HTML Iframes
How to Add JavaScript in HTML Document?
HTML File Paths
HTML Viewport meta tag for Responsive Web Design
HTML Computer Code Elements
HTML Entities
HTML Charsets
HTML URL Encoding
HTML Deprecated Tags
HTML Doctypes
HTML <a> Tag
HTML <abbr> Tag
HTML acronym Tag
HTML <address> Tag
HTML applet Tag
HTML <area> Tag
HTML5 <article> Tag
HTML5 <aside> Tag
HTML5 <audio> Tag
HTML <b> Tag
HTML <base> Tag
HTML <basefont> Tag
HTML Tags - A to Z List
HTML <input> accept Attribute
HTML <form> accept-charset Attribute
HTML accesskey Attribute
HTML action Attribute
HTML align Attribute
HTML alt attribute
HTML | <script> async Attribute
HTML input autocomplete Attribute
HTML <form> autocomplete Attribute
HTML autofocus Attribute
HTML input autofocus Attribute
HTML <button> autofocus Attribute
HTML <textarea> autofocus Attribute
HTML Attributes Complete Reference

HTML Graphics

HTML SVG Basics
HTML Canvas Basics
HTML Geolocation
HTML Drag and Drop
DOM (Document Object Model)
HTML DOM activeElement Property
HTML DOM anchors Collection
HTML DOM close() Method
HTML DOM baseURI Property
HTML DOM body Property
HTML DOM createAttribute() Method
HTML DOM doctype Property
HTML DOM writeln() Method
HTML DOM console error() Method
HTML DOM URL Property
HTML DOM embeds Collection
HTML DOM console warn() Method
HTML DOM console trace() Method
HTML DOM Complete Reference

HTML Audio/Video

HTML DOM Audio Object
HTML DOM Video Object
HTML DOM Video canPlayType( ) Method
HTML DOM Audio audioTracks Property
HTML DOM Audio autoplay Property
HTML DOM Audio buffered Property
HTML DOM Audio controls Property
HTML DOM Audio currentSrc Property
HTML DOM Audio currentTime Property
HTML DOM Audio defaultMuted Property
HTML DOM Audio defaultPlaybackRate Property
HTML DOM Audio duration Property
HTML DOM Audio ended Property
HTML DOM Audio loop Property
HTML DOM Audio/Video Complete Reference
HTML5 | Introduction
HTML Spell Check
HTML5 Complete Reference

HTML 5 MathML

HTML5 MathML Introduction
HTML5 MathML <maction> tag
HTML5 MathML <math> tag
HTML5 MathML <menclose> Tag
HTML5 MathML <merror> Tag
HTML5 MathML <mfenched> tag
HTML5 MathML <mfrac> tag
HTML5 MathML <mglyph> Tag
HTML5 MathML <mi> Tag
HTML5 MathML <mlabeledtr> tag
HTML5 MathML <mmultiscripts> Tag
HTML5 MathML <mn> Tag
HTML5 MathML <mo> Tag
HTML5 MathML <mover> Tag
HTML5 MathML <mpadded> Tag
HTML5 MathML Complete Reference

HTML Course

Introduction to HTML CSS | Learn to Design your First Website in Just 1 Week

HTML Course Structure of an HTML Document

HTML Course First Web Page Printing Hello World
HTML Course Basics of HTML
HTML Course : Starting the Project - Creating Directories
HTML Course Understanding and Building Project Structure
HTML Course | Practice Quiz 1
HTML Course : Creating Navigation Menu
HTML Course : Building Header of the Website
HTML Course : Building Main Content - Section 1
HTML Course : Building Main Content - Section 2
HTML course Building Main Content - Section 3
HTML Course Building Footer

HTML Questions

Create a Sticky Social Media Bar using HTML and CSS
Create a Search Bar using HTML and CSS
How to create Right Aligned Menu Links using HTML and CSS ?
How to add a Login Form to an Image using HTML and CSS ?
How to Create a Tab Image Gallery ?
How to create a Hero Image using HTML and CSS ?
How to design Meet the Team Page using HTML and CSS ?
How to Create an Image Overlay Icon using HTML and CSS ?
How to Create Browsers Window using HTML and CSS ?
How to Create Breadcrumbs using HTML and CSS ?
How to Create Section Counter using HTML and CSS ?
How to Create Toggle Switch by using HTML and CSS ?
How to Create a Cutout Text using HTML and CSS ?
How to make a Pagination using HTML and CSS ?

INTRODUCTION

As we all know HTML is a language of the web. It’s used to design the web pages or we can say structure the page layouts of a website. HTML stands for HYPERTEXT MARKUP LANGUAGE, as its full form suggests it’s not any programming language, a markup language. So, while the execution of HTML code we can’t face any such error. In real HTML code wasn’t compiled or interpreted because HTML code was rendered by the browser. which is similar to the compilation of a program. HTML content is parched through the browser to display the content of HTML.

Course Navigation

HTML DOCUMENTS STRUCTURE

Html used predefined tags and attributes to tell the browser how to display content, means in which format, style, font size, and images to display. Html is a case insensitive language. Case insensitive means there is no difference in upper case and lower case ( capital and small letters) both treated as the same, for r example ‘D’ and ‘d’ both are the same here. There are generally two types of tags in HTML:

Paired Tags : These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags.
Empty Tags : These tags do not require to be closed.

Below is an example of a (<b>) tag in HTML, which tells the browser to bold the text inside it.

Tags and attributes: Tags are individuals of html structure, we have to open and close any tag with a forward slash like this <h1> </h1>. There are some variations with the tag some of them are self-closing tag which isn’t required to close and some are empty tag where we can add any attributes in it. Attributes are additional properties of html tags that define the property of any html tags. i.e. width, height, controls, loops, input, and autoplay. These attributes also help us to store information in meta tags by using name, content, and type attributes. Html documents structured mentioned below:

Structure of an HTML Document

An HTML Document is mainly divided into two parts:

HEAD : This contains the information about the HTML document. For Example, the Title of the page, version of HTML, Meta Data, etc.
BODY : This contains everything you want to display on the Web Page.

HTML Document Structure

Let us now have a look at the basic structure of HTML. That is the code that is a must for every webpage to have:

Every Webpage must contain this code. Below is the complete explanation of each of the tags used in the above piece of HTML code: <!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.0 <html> </html> : <html> is a root element of html. It’s a biggest and main element in complete html language, all the tags , elements and attributes enclosed in it or we can say wrap init , which is used to structure a web page. <html> tag is parent tag of <head> and <body> tag , other tags enclosed within <head > and <body>. In <html > tag we use “lang” attributes to define languages of html page such as <html lang=”en”> here en represents English language. some of them are : es = Spanish , zh-Hans = Chinese, fr= french and el= Greek etc. <head>: Head tag contains metadata, title, page CSS etc. Data stored in the <head> tag is not displayed to the user, it is just written for reference purposes and as a watermark of the owner.

<body>: A body tag is used to enclose all the data which a web page has from texts to links. All the content that you see rendered in the browser is contained within this element. Following tags and elements used in the body.

1 . <h1> ,<h2> ,<h3> to <h6> 2. <p> 3. <div> and <span> 4. <b>, <i> and<u> 5. <li>,<ul>and<ol>. 6. <img> , <audio> , <video> and<iframe> 7. <table> <th> , <thead>and<tr>. 8. <form> 9. <label> and <input> others………. To learn more about an HTML Document structure, please visit :

https://www.geeksforgeeks.org/html-introduction/

HTML is the foundation of web pages, and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples .

Please Login to comment...

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

What Is HTML Bullet Points And How To Use It

HTML bullet points are more than just dots on a page. For developers, they structure content, guide readers, and enhance user experience.

💡KEY INSIGHTS

In HTML, bullet points are typically created using the `ul` (unordered list) and `li` (list item) tags.
Customizing the style of bullet points can be achieved with CSS to enhance the visual presentation of lists.
Using bullet points improves the readability and organization of content on web pages.
Nested lists can be created for complex information, using multiple levels of bullet points.

HTML bullet points are a fundamental aspect of web design, allowing for organized and clear presentation of lists.

Whether you're a seasoned developer or just starting out, understanding their proper implementation can enhance the user experience. Let's explore their significance and best practices.

Comprehension HTML Bullet Points

Types of bullet points in html, implementing unordered lists, implementing ordered lists, customizing bullet point styles, nested lists and indentation, accessibility considerations, frequently asked questions, ordered lists.

HTML bullet points are essential elements used to display a list of items in a structured manner on web pages. They help in organizing content and making it more readable for users.

For ordered lists, the <ol> tag is used. Similar to unordered lists, each item is wrapped with the <li> tag:

Customization Options: While the default styles for these lists are widely recognized, you can customize them using CSS . For instance, you can change the bullet type for unordered lists or the numbering style for ordered lists.

Use Cases : Bullet points are especially useful when summarizing information, highlighting key points, or presenting a series of steps. They provide a visual break, making content more digestible.

In HTML, bullet points primarily fall under two categories: unordered and ordered bullet points. These are used to present information in a list format, making it organized and easily scannable.

Unordered Bullet Points

Ordered bullet points, practical applications.

Unordered bullet points, as the name suggests, don't follow a specific sequence. They are represented using the <ul> tag, with each item inside the list using the <li> tag. By default, browsers display these points as solid circles.

Ordered bullet points, on the other hand, follow a specific sequence. They are represented using the <ol> tag. The items inside the list are, again, represented using the <li> tag. By default, these are displayed as numbers.

Bullet points, whether ordered or unordered, play a crucial role in web content. They help in presenting information clearly, making it easier for readers to understand and follow.

Whether you're listing ingredients, steps, or key points, bullet points ensure clarity and structure.

Basic Structure

Styling with css, nested lists.

HTML was done in such a way that you didn't have to be a technical person to do pages with HTML. You could actually write a Web page, and that was the idea.

Tim Berners-Lee

English Engineer and Computer Scientist

Source: QuotePark

Unordered lists are a staple in HTML, allowing developers to present a collection of items without any specific order or sequence. They are versatile and can be used in various contexts, from showcasing features to listing ingredients.

The foundation of an unordered list is the <ul> tag. Within this tag, each list item is represented using the <li> tag. The default visual representation for items in an unordered list is a solid circle or bullet point.

While the default bullet point is widely recognized, there might be instances where you'd want to customize the appearance. CSS offers a range of properties to style these lists. For instance, you can change the list style type to square or none.

Unordered lists can also be nested within one another. This is useful when you want to create sub-lists under a main list item.

When implementing unordered lists, it's essential to ensure they are accessible. Screen readers and assistive technologies rely on the proper use of HTML tags to interpret and convey information to users.

Always use the appropriate tags and avoid using CSS or other methods to merely visually mimic a list.

List Item Types

Ordered lists are essential when the sequence of the items matters. They are commonly used for step-by-step instructions, rankings, or any list where the order is of significance.

While numbers are the default, HTML provides flexibility in how list items are presented. You can use alphabets, Roman numerals, or even custom counters with CSS.

Beyond the basic types, CSS allows for more granular control over the appearance of ordered lists. You can change the list style, color, and even add custom counters.

Just like unordered lists, ordered lists can be nested to create multi-level structures. This is particularly useful when detailing sub-steps or sub-categories.

Ordered lists are invaluable in various scenarios, from recipes to tutorials. They provide clarity, ensuring that readers follow the content in the intended sequence.

Proper implementation ensures both visual appeal and functionality.

While the default styles for bullet points in HTML are universally recognized, there are times when a unique touch is needed. Customizing bullet point styles can help your content stand out and align better with the overall design of your website.

Using CSS For Unordered Lists

Styling ordered lists, custom images as bullets, positioning and spacing, advanced customizations with pseudo-elements.

For unordered lists, the list-style-type property in CSS is your go-to tool. It allows you to change the default bullet style. Common values include disc , circle , and square .

For ordered lists, you can also use the list-style-type property. It offers options like decimal , upper-alpha , lower-alpha , upper-roman , and lower-roman .

If you want to get creative, you can use custom images as bullet points. The list-style-image property allows you to set an image as the bullet point.

Adjusting the position and spacing of bullet points can enhance readability. Use the padding and margin properties to control the space around and between list items.

For more intricate designs, CSS pseudo-elements like ::before can be employed. This allows for greater flexibility, such as adding icons or changing colors for individual list items.

While customization offers a lot of freedom, it's essential to maintain consistency across your website.

Custom styles should complement the overall design and not distract from the main content. Properly styled bullet points enhance the user experience, making content organized and visually appealing.

Creating Nested Lists

Indentation and spacing, multiple levels of nesting, visual clarity.

Nested lists are essentially lists within lists. Whether you're using ordered or unordered lists, the process remains the same. You simply place a new list ( <ol> or <ul> ) inside a list item ( <li> ).

By default, browsers will indent nested lists to visually differentiate between levels. However, you can further customize this indentation using CSS . The padding and margin properties are particularly useful here.

While two levels of nesting are common, HTML allows for multiple levels. This can be useful for detailed outlines or complex hierarchies. Just remember to keep the structure clear to avoid confusing readers.

While nested lists are powerful, over-nesting can make content hard to follow. It's essential to strike a balance. Use visual cues, like different bullet styles or colors, to help differentiate between levels.

In conclusion, nested lists and proper indentation are vital tools in presenting structured content. When used judiciously, they enhance readability and user comprehension.

Semantic HTML

Descriptive text, testing and validation.

When designing and developing web content, ensuring that it's accessible to all users, including those with disabilities, is paramount. Lists, being a common element on web pages, require special attention in this regard.

Using the correct HTML tags is the foundation of accessible content. For lists, always use the appropriate <ul> , <ol> , and <li> tags.

This ensures that screen readers and other assistive technologies can interpret and convey the content correctly.

ARIA (Accessible Rich Internet Applications) roles can enhance the accessibility of lists. While modern screen readers can interpret standard list tags, adding roles like list and listitem can provide additional clarity.

For lists that serve a specific purpose or have unique content, adding descriptive text can be beneficial. This can be achieved using the <aria-label> or <aria-labelledby> attributes.

Regularly testing your content with screen readers and accessibility tools is crucial. Tools like WAVE or AXE can help identify potential issues and ensure that your lists are accessible to all users.

In essence, accessibility is not just a design consideration but a responsibility. Properly structured and accessible lists ensure that everyone, regardless of their abilities, can access and understand your content.

Can I use icons instead of traditional bullet points?

Yes, with CSS, you can use custom images or icons as bullet points for unordered lists.

What are ARIA roles, and why are they important for lists?

ARIA roles provide additional information about elements to assistive technologies, enhancing the accessibility of web content.

Can I use CSS to create lists without using <ul> or <ol> tags?

While possible, it's not recommended. Using semantic HTML ensures proper interpretation by screen readers and maintains accessibility.

Let's see what you learned!

What Is The Default Display Style For Lists In HTML?

Continue learning with these html guides.

HTML Background Color And Its Application
Comprehension HTML To PDF And Its Applications
What Is A Tag In HTML And How To Use It
Comprehension HTML Attributes And Their Usage
HTML Formatter And Its Applications

Subscribe to our newsletter

Subscribe to be notified of new content on marketsplash..

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications

A collection of guides and examples for the Gemini API.

google-gemini/cookbook

Folders and files, repository files navigation, welcome to the gemini api cookbook.

This is a collection of guides and examples for the Gemini API, including quickstart tutorials for writing prompts and using different features of the API, and examples of things you can build.

Get started with the Gemini API

The Gemini API gives you access to Gemini models created by Google DeepMind . Gemini models are built from the ground up to be multimodal, so you can reason seamlessly across text, images, code, and audio. You can use these to develop a range of applications .

Start developing

Go to Google AI Studio .
Login with your Google account.
Create an API key.
Use a quickstart for Python, or call the REST API using curl .

Capabilities

Learn about the capabilities of the Gemini API by checking out the quickstarts for safety , embeddings , function calling , audio , and more.

Official SDKs

The Gemini API is a REST API. You can call the API using a command line tool like curl , or by using one of our official SDKs:

Dart (Flutter)

Open an issue on GitHub.

Contributing

Contributions are welcome. See contributing to learn more.

Thank you for developing with the Gemini API! We’re excited to see what you create.

Contributors 10

Jupyter Notebook 99.9%

Skip to main content
Skip to search
Skip to select language
Sign up for free
English (US)

Introduction to HTML

At its heart, HTML is a language made up of elements , which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.

Prerequisites

Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in Installing basic software ), and understand how to create and manage files (as detailed in Dealing with files ). Both are parts of our Getting started with the web complete beginner's module.

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch .

This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.

Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!

The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title> , links to CSS (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).

One of HTML's main jobs is to give text meaning (also known as semantics ), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.

Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link and discusses best practices for links.

There are many other elements in HTML for formatting text that we didn't get to in the HTML text fundamentals article. The elements here are less well-known, but still useful to know about. In this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.

As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header", "the navigation menu", or "the main content column"). This article looks into how to plan a basic website structure and how to write the HTML to represent this structure.

Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help.

KPMG Personalization

How companies communicate financial performance is changing

IFRS 18 aims to deliver more consistent, comparable and transparent information

Share Share close
Download How companies communicate financial performance is changing pdf Opens in a new window
1000 Save this article to my library
Go to bottom of page
Home ›
Insights ›

Global IFRS Institute

A more structured income statement

MPMs – Disclosed and subject to audit

Greater disaggregation of information

Next steps

The way companies communicate their financial performance is set to change.

Responding to investor calls for more relevant information, IFRS 18 Presentation and Disclosure in Financial Statements 1 will enable companies to tell their story better through their financial statements. Investors will also benefit from greater consistency of presentation in the income and cash flow statements, and more disaggregated information.

So what does this mean for companies’ financial reporting? Essentially, companies’ net profit will not change. What will change is how they present their results on the face of the income statement and disclose information in the notes to the financial statements. This includes disclosure of certain ‘non-GAAP’ measures – management performance measures (MPMs) – which will now form part of the audited financial statements.

IFRS 18 marks a step towards more connected reporting. Financial statements that include relevant and consistent information will afford users better information on companies’ financial performance.

IFRS 18 brings three categories of income and expenses, two income statement subtotals and one single note on management performance measures. These, combined with enhanced disaggregation guidance, set the stage for better and more consistent information for users – and will affect all companies.

Gabriela Kegalj KPMG global IFRS presentation leader

Under current IFRS ® Accounting Standards, companies use different formats to present their results, making it difficult for investors to compare financial performance across companies.

IFRS 18 promotes a more structured income statement, as set out below. In particular, it introduces a newly defined ‘operating profit’ subtotal and a requirement for all income and expenses to be allocated between three new distinct categories based on a company’s main business activities.

All companies are required to report the newly defined ‘operating profit’ subtotal – an important measure for investors’ understanding of a company’s operating results – i.e. investing and financing activities are specifically excluded. This means that the results of equity-accounted investees are no longer part of operating profit and are presented in the ‘investing’ category.

IFRS 18 also requires companies to analyse their operating expenses directly on the face of the income statement – either by nature, by function or using a mixed presentation. Under the new standard, this presentation provides a ‘useful structured summary’ of those expenses. If any items are presented by function on the face of the income statement (e.g. cost of sales), then a company provides more detailed disclosures about their nature.

Companies often use ‘non-GAAP’ information to explain their financial performance because it allows them to tell their own story and provides investors with useful insight into a company’s performance.

IFRS 18 now requires some of these ‘non-GAAP’ measures to be reported in the financial statements. It introduces a narrow definition for MPMs 2 , requiring them to be:

a subtotal of income and expenses;
used in public communications outside the financial statements; and
reflective of management’s view of financial performance.

For each MPM presented, companies will need to explain in a single note to the financial statements why the measure provides useful information, how it is calculated and reconcile it to an amount determined under IFRS Accounting Standards.

To provide investors with better insight into financial performance, the new standard includes enhanced guidance on how companies group information in the financial statements. This includes guidance on whether information is included in the primary financial statements or is further disaggregated in the notes.

Companies are discouraged from labelling items as ‘other’ and will now be required to disclose more information if they continue to do so.

Now is the time to get ready to report under the new standard, which is effective from 1 January 2027 and applies retrospectively. It is available for early adoption.

Assess the impacts on your financial statements.
Communicate the impacts with investors.
Consider how the new requirements impact financial reporting systems and processes.
Monitor any changes in the local reporting landscape.

Our high-level guide, available shortly, will help you understand the new accounting standard and assess the impacts for your company. And look out for our First Impressions publication, which will provide more information on the new standard, including our detailed insight and illustrative examples.

1 IFRS 18 replaces IAS 1 Presentation of Financial Statements .

2 IFRS 18 defines management performance measures (MPMs); these measures are currently commonly known as non-GAAP measures, alternative performance measures (APMs) or key performance indicators (KPIs).

The IFRS Foundation is a not-for-profit, public interest organisation established to develop high-quality, understandable, enforceable and globally accepted accounting and sustainability disclosure standards.

Our Standards are developed by our two standard-setting boards, the International Accounting Standards Board (IASB) and International Sustainability Standards Board (ISSB).

About the IFRS Foundation

Ifrs foundation governance, stay updated.

IFRS Accounting Standards are developed by the International Accounting Standards Board (IASB). The IASB is an independent standard-setting body within the IFRS Foundation.

IFRS Accounting Standards are, in effect, a global accounting language—companies in more than 140 jurisdictions are required to use them when reporting on their financial health. The IASB is supported by technical staff and a range of advisory bodies.

IFRS Accounting

Standards and frameworks, using the standards, project work, products and services.

IFRS Sustainability Disclosure Standards are developed by the International Sustainability Standards Board (ISSB). The ISSB is an independent standard-setting body within the IFRS Foundation.

IFRS Sustainability Standards are developed to enhance investor-company dialogue so that investors receive decision-useful, globally comparable sustainability-related disclosures that meet their information needs. The ISSB is supported by technical staff and a range of advisory bodies.

IFRS Sustainability

Education, membership and licensing, new ifrs accounting standard will aid investor analysis of companies’ financial performance.

You need to Sign in to use this feature

The International Accounting Standards Board (IASB) today completed its work to improve the usefulness of information presented and disclosed in financial statements. The new Standard, IFRS 18 Presentation and Disclosure in Financial Statements , will give investors more transparent and comparable information about companies’ financial performance, thereby enabling better investment decisions. It will affect all companies using IFRS Accounting Standards.

IFRS 18 introduces three sets of new requirements to improve companies’ reporting of financial performance and give investors a better basis for analysing and comparing companies:

Improved comparability in the statement of profit or loss (income statement)

Currently there is no specified structure for the income statement. Companies choose their own subtotals to include. Often companies report an operating profit but the way operating profit is calculated varies from company to company, reducing comparability. 1

IFRS 18 introduces three defined categories for income and expenses—operating, investing and financing—to improve the structure of the income statement, and requires all companies to provide new defined subtotals, including operating profit. The improved structure and new subtotals will give investors a consistent starting point for analysing companies’ performance and make it easier to compare companies.

Enhanced transparency of management-defined performance measures

Many companies provide company-specific measures, often referred to as alternative performance measures. Investors find this information useful. However, most companies don’t currently provide enough information to enable investors to understand how these measures are calculated and how they relate to the required measures in the income statement.

IFRS 18 therefore requires companies to disclose explanations of those company-specific measures that are related to the income statement, referred to as management-defined performance measures. The new requirements will improve the discipline and transparency of management-defined performance measures, and make them subject to audit.

More useful grouping of information in the financial statements

Investor analysis of companies’ performance is hampered if the information provided by companies is too summarised or too detailed. IFRS 18 sets out enhanced guidance on how to organise information and whether to provide it in the primary financial statements 2 or in the notes. The changes are expected to provide more detailed and useful information. IFRS 18 also requires companies to provide more transparency about operating expenses, helping investors to find and understand the information they need.

Andreas Barckow, IASB Chair, said:

IFRS 18 represents the most significant change to companies’ presentation of financial performance since IFRS Accounting Standards were introduced more than 20 years ago. It will give investors better information about companies’ financial performance and consistent anchor points for their analysis.

IFRS 18 is effective for annual reporting periods beginning on or after 1 January 2027, but companies can apply it earlier. Changes in companies’ reporting resulting from IFRS 18 will depend on their current reporting practices and IT systems.

IFRS 18 replaces IAS 1 Presentation of Financial Statements . It carries forward many requirements from IAS 1 unchanged. IFRS 18 is the culmination of the IASB’s Primary Financial Statements project.

Access the Standard

IFRS 18, the Illustrative Examples and the Basis for Conclusions are available to IFRS Digital subscribers. You can purchase an IFRS Digital Subscription or a PDF version of the Standard from our web shop.

IFRS 18 Presentation and Disclosure in Financial Statements
Basis for Conclusions —explanation of the IASB’s considerations in developing the requirements in IFRS 18
Illustrative Examples —worked examples for aspects of IFRS 18, including flowcharts relating to key requirements in IFRS 18

Access the supporting materials

Support to implement IFRS 18 will be available via the IFRS 18 implementation webpage .

The following documents, along with IFRS 18, are available from the completed project page :

Short video of IASB Chair Andreas Barckow summarising the new requirements
One-page quick view of IFRS 18
Project Summary —overview of the project in non-technical language
Effects Analysis —description of the likely benefits and costs of IFRS 18
Feedback Statement —summary of feedback on proposals and the IASB’s response to feedback
Reference materials —comparison table of requirements in IAS 1 and IFRS 18 showing changes to each paragraph of IAS 1

Watch Andreas Barckow explain the new requirements to improve companies’ financial performance reporting.

1 An IASB study of 100 companies showed that over 60 reported a figure for operating profit, using at least nine different ways to calculate it.

2 The primary financial statements consist of the statement of profit or loss (income statement); statement presenting comprehensive income; statement of financial position (balance sheet); statement of changes in equity; and statement of cash flows.

Related information

IFRS Accounting Standards Navigator

Supporting implementation for IFRS 18

Primary Financial Statements project

Followable tags

Your action was not processed, please try again later

Related news

Translated versions of this story.

Brazilian Portuguese translation

French translation

Japanese translation

Simplified Chinese translation

Spanish translation

Your privacy

IFRS Foundation cookies

We use cookies on ifrs.org to ensure the best user experience possible. For example, cookies allow us to manage registrations, meaning you can watch meetings and submit comment letters. Cookies that tell us how often certain content is accessed help us create better, more informative content for users.

We do not use cookies for advertising, and do not pass any individual data to third parties.

Some cookies are essential to the functioning of the site. Other cookies are optional. If you accept all cookies now you can always revisit your choice on our privacy policy page.

Cookie preferences

Essential cookies, always active.

Essential cookies are required for the website to function, and therefore cannot be switched off. They include managing registrations.

Analytics cookies

We use analytics cookies to generate aggregated information about the usage of our website. This helps guide our content strategy to provide better, more informative content for our users. It also helps us ensure that the website is functioning correctly and that it is available as widely as possible. None of this information can be tracked to individual users.

Preference cookies

Preference cookies allow us to offer additional functionality to improve the user experience on the site. Examples include choosing to stay logged in for longer than one session, or following specific content.

Share this page

IMAGES

PPT
Describe the Structure of Html
PPT
Explain The Structure Of HTML Document With Examples
HTML/CSS
Structure of HTML Steps to write HTML Code

VIDEO

What is HTML
lesson-1| HTML structure| HTML basics (IN HINDI)
Basic Structure of HTML
Mastering HTML: A Beginner's Guide to HTML Structure
Basic Structure of an HTML Website
BASIC HTML STRUCTURE || VERSION TECHNOLOGY || 2023

COMMENTS

HTML Structure and Presentation
HTML Structure vs. HTML Presentation. The composition of a webpage could be regarded as a mixture of the following four elements: Content is the general term used for all the browser-displayed information elements—such as text, audio, still images, animation, video, multimedia, and files belonging to web pages. ...
HTML Structure and Presentation
CSS is a presentation language. Its purpose is to provide a web browser with styling instructions for the HTML. CSS can be included directly in the HTML tags, in the head section of the HTML, or in an entirely separate document (CSS style sheet). CSS is a very powerful tool, enabling very complex and unique designs to be made possible.
HTML: HyperText Markup Language
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation ( CSS) or functionality/behavior ( JavaScript ). "Hypertext" refers to links that connect web pages to one another ...
HTML basics
HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
Introduction to HTML
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is ...
Structuring the web with HTML
To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.
Overview of HTML
Overview of HTML. HyperText Markup Language, or HTML, is the standard markup language for describing the structure of documents displayed on the web. HTML consists of a series of elements and attributes which are used to mark up all the components of a document to structure it in a meaningful way. HTML documents are basically a tree of nodes ...
HTML Structure :: Introduction to Web Dev
Structure Rules. When it comes to laying out the overarching structure of an HTML file, a programmer should follow 5 rules: Every HTML file needs a DOCTYPE tag, specifying the HTML version used. When using the current version of HTML, the DOCTYPE tag is simple to remember as it is: <!DOCTYPE html> . This is one of few tags that does not require ...
What Is HTML? A Beginner's Guide
HTML stands for "hypertext markup language" and is a relatively simple language used to create web pages. Because it doesn't allow variables or functions, it's not considered a "programming language," but rather a "markup language," a language that uses tags to define elements within a document.
Learn HTML Basics: Introduction to HTML Structure & Elements
Dive into HTML basics with an introduction to its structure and essential elements. Learn how to create headings, paragraphs, links, and images in HTML. HTML (Hypertext Markup Language) is the foundation of every web page you see on the internet. It provides structure and meaning to the content displayed in web browsers.
What is HTML? What Does HTML Stand For? [Solved]
To create structure, format content, and display it in web browsers, you need to use HTML. HTML is short for HyperText Markup Language, and it is the language of the World Wide Web. Since its creation, it has gone through many revisions, changes, and developments.
Learn HTML Basics for Beginners in Just 15 Minutes
How to create an HTML document. First, let's open Visual Studio Code (or your favorite code editor). In the folder of your choice, create a new file and name it index.html. In the index.html file, type ! (exclamation mark) and press enter.
The Structure of an HTML Document
The structure of an HTML document is the foundation of any web page. It determines how the content of the page is organized and displayed, and it's important to understand how it works in order to create professional-quality websites. In this article, we looked at the basic structure of an HTML document, including the head and body sections ...
What Is HTML? Hypertext Markup Language Basics Explained
1) HTML (Structure): HTML provides the structure and content of a web page. It uses markup tags to define elements such as headings, paragraphs, lists, links, images, and more. HTML lays the foundation for what content appears on a web page, such as text, images, forms, tables, and other elements. 2) CSS (Presentation):
Learning the Basics of HTML and HTML5
While websites are applications that work on the internet, the structure of a web page is defined by HTML and HTML5. What is HTML? The term HTML is also known as Hypertext Markup Language. Using attributes, tags, and elements, HTML defines the document's skeleton or structure. The structural elements are provided in headings, lists, and paragraphs.
HTML BASICS Slides Presentation
HTML is used as the graphical user interface in client-side programs written in JavaScript. Server-side languages like PHP and Java also receive data from web pages and use HTML as the output mechanism. The emerging Ajax technologies likewise use HTML and XHTML as their visual engine.
Document and website structure
Previous ; Overview: Introduction to HTML; Next ; In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). This article looks into how to plan a basic website structure, and write the HTML to ...
HTML Basic Structure
Learn the basic structure of an HTML document, which consists of several elements that define the layout and content of a web page. This tutorial explains how to use HTML tags, attributes, and comments with examples and exercises. TutorialsBuddy.com offers many other tutorials on web development topics.
HTML Course Structure of an HTML Document
An HTML Document is mainly divided into two parts: HEAD: This contains the information about the HTML document. For Example, the Title of the page, version of HTML, Meta Data, etc. BODY: This contains everything you want to display on the Web Page. Let us now have a look at the basic structure of HTML.
Structure vs. Presentation
The main goal of HTML 4.01 is the "separation of structure and presentation". As indicated in the section 2.4.1 of HTML 4.01: "HTML has its roots in SGML which has always been a language for the specification of structural markup. As HTML matures, more and more of its presentational elements and attributes are being replaced by other mechanisms ...
Introduction to HTML
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.
What Is HTML Bullet Points And How To Use It
💡KEY INSIGHTS; In HTML, bullet points are typically created using the `ul` (unordered list) and `li` (list item) tags. Customizing the style of bullet points can be achieved with CSS to enhance the visual presentation of lists.; Using bullet points improves the readability and organization of content on web pages.; Nested lists can be created for complex information, using multiple levels ...
GitHub
Get started with the Gemini API. The Gemini API gives you access to Gemini models created by Google DeepMind. Gemini models are built from the ground up to be multimodal, so you can reason seamlessly across text, images, code, and audio. You can use these to develop a range of applications.
Introduction to HTML
At its heart, HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page.
IFRS 18 is here: redefining financial performance reporting
The changes in presentation and disclosure required by IFRS 18 might require system and process changes for many entities, so entities should focus now to be ready for adoption. ... Structure of the statement of profit or loss IFRS 18 introduces a defined structure for the statement of profit or loss. The goal of the defined structure is to ...
Intel® Gaudi® 3 AI Accelerator
Scale Large Systems, Scale Great Performance. Great networking performance starts at the processor where Intel® Gaudi® 3 accelerator integrates 24200 Gigabit Ethernet ports on chip, enabling more efficient scale up in the server and massive scale out capacity for cluster-scale systems that support blazing-fast training and inference of models—large and small.
Communicating financial performance is changing
The way companies communicate their financial performance is set to change. Responding to investor calls for more relevant information, IFRS 18 Presentation and Disclosure in Financial Statements 1 will enable companies to tell their story better through their financial statements. Investors will also benefit from greater consistency of presentation in the income and cash flow statements, and ...
IFRS
The new Standard, IFRS 18 Presentation and Disclosure in Financial Statements, will give investors more transparent and comparable information about companies' financial performance, thereby enabling better investment decisions. It will affect all companies using IFRS Accounting Standards. IFRS 18 introduces three sets of new requirements to ...

HTML Structure and Presentation

GCSE Computer Science

A-Level Computer Science

GCSE Creating web pages using HTML and CSS (14-16 years)

A-Level Designing Web pages using HTML and CSS (16-18 years)

HTML Attributes

HTML Structure vs. HTML Presentation

Further Readings:

HTML Structure and Presentation

Hypertext Markup Language (HTML)

Cascading Style Sheets (CSS)

Related Theory

Related Quizzes

Sign up for Guru News

Data Transmission Cheat Sheet

Small Print

Downloads Shop

HTML Tutorial

What is HTML?

A Simple HTML Document

What is an HTML Element?

Web Browsers

HTML Page Structure

HTML History

Video: HTML Introduction

COLOR PICKER

Contact Sales

Report Error

Top Tutorials

Overview of HTML

Non-replaced elements

Replaced and void elements

Appearance of elements

Element, attributes, and JavaScript

Check your understanding

What Is HTML? A Beginner’s Guide

What Is HTML?

The History of HTML

What Is HTML Used For?

How Does HTML Work?

What Makes Up an HTML Document?

HTML Basics

Elements of HTML

Most Used HTML Tags and HTML Elements

HTML, CSS, and JavaScript

How to Learn HTML

Why Learn HTML?

Learning Resources

General Assembly Dash

Related Articles

The Best Way to Learn HTML for Free (and Why You Should)

HTML Best Practices to Build Maintainable and Scalable Websites

HTML vs HTML5: Learn the Crucial Differences Between Them

Learn HTML Basics: Introduction to HTML Structure & Elements

Table of Contents

Using Headings

Choosing the Right Heading Level

Creating a Basic Link

Linking to Email Addresses

Linking to Anchors

Unordered Lists

Ordered Lists

Nested Lists

Italic Text

Underlined Text

Strikethrough Text

Superscript and Subscript Text

Creating a Basic Table

Table Caption and Header Groups

Embedding Images

Embedding Videos

Embedding Audio

Form Structure

Input Fields

Checkboxes and Radio Buttons

Semantic Elements

Semantic Headings

Semantic Links

Q1: Is it necessary to learn HTML before learning CSS?

Q2: Can I create a website using only HTML?