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.

Further Readings:

  • HTML element

state what is meant by html structure and presentation

  • 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 869

state what is meant by html structure and presentation

The Structure of an HTML Document

state what is meant by html structure and presentation

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? A Guide to the Backbone of the Web

Ebook: How to Build a Tech Talent Brand: The Definitive Guide

HTML , or HyperText Markup Language, is the backbone of nearly every web page you’ve ever visited. It’s the unseen hero, laying the groundwork for the web as we know it today and serving as the foundational structure for our online universe. 

But why is HTML so important? Think of a website like a house. The HTML is the house’s blueprint. It defines where the doors, windows, and walls go. Without it, you’re left with a pile of bricks, pipes, and wires — technically, all the parts of a house, but far from a livable structure.

In the realm of web development, HTML is the bedrock skill that any budding front-end developer must master. Whether you’re a hiring manager looking for the best talents, or a tech professional aiming to elevate your skill set, understanding HTML’s depth and breadth is critical.

In this article, we’ll guide you through the basics and key features of HTML as well as its advantages, use cases and place in the current tech hiring landscape.

What is HTML?

Contrary to common belief, HTML is not actually programming language. It’s a markup language, which means it’s used to structure content on the web. It lays down the foundation for web pages, allowing us to insert various types of content such as text, images, videos, and more into web pages.

HTML dates back to the early days of the web. Created in 1990 by Tim Berners-Lee , a computer scientist at CERN, HTML was initially a simplified subset of SGML (Standard Generalized Markup Language) intended to manage the hypertext documents on the World Wide Web. Over the years, HTML has evolved to become an extensive markup language with a wide range of elements and attributes, allowing for richer web content.

A web page built with HTML consists of a series of elements, defined using tags. These tags act as containers that tell your web browser how to display the content they enclose. For example, the ‘<h1>’ tag is used to define the largest heading, while the ‘<p>’ tag is used to define a paragraph.

Consider this simple HTML example:

In this snippet, we’ve defined a basic HTML structure. It has a `<title>` that will appear on the browser tab, an `<h1>` heading, and a `<p>` paragraph in the `<body>`. When opened in a web browser, this HTML file will display a web page with a heading and a paragraph of text.

Over the years, new versions of HTML have been released. At time of writing, HTML5 is the latest major version. Each new version introduces additional elements and attributes, offering more flexibility and capability to web developers around the globe. 

The core principle, however, remains the same: HTML is the cornerstone of many web pages, and its mastery is a must-have skill for anyone working on the web.

Key Features of HTML

HTML is deceptively simple, yet profoundly powerful. It’s this range of capabilities, packaged in an approachable syntax, that makes HTML a key player in web development. Let’s dive into some of its main features.

Tags and Elements

As mentioned earlier, the building blocks of HTML are tags. They surround and apply meaning to content. When a start tag, some content, and an end tag are combined, they form an element. For example, `<p>Hello, world!</p>` creates a paragraph element containing the text “Hello, world!”

Attributes provide additional information about HTML elements. They come in pairs: a name and a value. The name is the property you want to set, and the value is what you’re setting it to. For instance, in `<img src=”image.jpg” alt=”A beautiful sunrise”>`, “src” and “alt” are attributes providing additional information about the image element.

Hyperlinks and Images

One of the most powerful features of HTML (and the web in general) is the ability to link to other web pages . This is done using the anchor tag `<a>`. For instance, `<a href=”https://www.example.com”>Visit Example.com</a>` creates a clickable link to example.com.

Similarly, images are embedded using the `<img>` tag. The source of the image file is specified in the ‘src’ attribute, like so: `<img src=”image.jpg”>`.

Forms and Input

HTML allows for user input through forms , making interactive web pages possible. Forms can contain input elements like text fields, checkboxes, radio buttons, and more. For instance, `<input type=”text”>` creates a text input field.

Here is a simple form example:

This form contains a text input field and a submit button. When the user clicks the submit button, the form data is sent to the ‘/submit_form’ URL for processing.

These are just a few of the many features HTML offers. By combining these elements and attributes, developers can create a complex, interactive web page that serves virtually any purpose. In the hands of a skilled developer, HTML is a tool of endless potential.

Explore verified tech roles & skills.

The definitive directory of tech roles, backed by machine learning and skills intelligence.

Explore all roles

Advantages of Using HTML

HTML is not the only technology used for building websites, but it is one of the most critical and universal. Its enduring popularity among web developers can be credited to several key advantages.

Accessibility

HTML was designed with accessibility in mind. The correct usage of HTML tags helps define content structure and hierarchy, which is used by assistive technologies such as screen readers to accurately interpret the page content. Tags like `<header>`, `<nav>`, `<main>`, and `<footer>` provide semantic meaning to content, making a website more accessible to all users.

Search Engine Optimization

Search engines like Google depend on HTML structure to understand and rank content. Properly used HTML tags help to clearly delineate the important parts of a web page, such as titles and headers, improving a website’s visibility in search engine results .

Ease of Learning and Use

One of the most significant advantages of HTML is its simplicity. Compared to many other languages, HTML is relatively straightforward to pick up , even for beginners. Its syntax is logical, and you can see the results of your code immediately in a web browser, providing instant feedback that aids learning and debugging. Moreover, you don’t need any special software to write HTML — a simple text editor is enough.

Wide Support and Compatibility

Being the standard markup language for web pages, HTML is supported by all major web browsers , including Google Chrome, Safari, Firefox, and Microsoft Edge. Additionally, HTML works seamlessly with other technologies like CSS (for styling) and JavaScript (for functionality), making it a flexible choice for any web development project.

Common Use Cases for HTML

Having highlighted what HTML is and its key advantages, it’s time to dive into its practical applications. Here are some common use cases for HTML.

  • Web Development

The most direct and prevalent use of HTML is in web development. According to a survey by W3Techs , 95.2% of all websites use HTML. From personal blogs to e-commerce sites, educational platforms to social media networks, HTML is everywhere. It provides the structure and content of web pages, making it a universal tool in the world of web development.

Email Templates

HTML is not only used for websites; it also plays a significant role in creating email templates . When you receive a marketing email with styled text, images, and links, that’s HTML at work. By utilizing HTML, companies can create visually engaging and interactive emails to communicate with their customers.

Browser-Based Games

HTML, in combination with JavaScript and CSS, is often used to create simple browser-based games . With the advent of HTML5, the capabilities of such games have significantly improved, introducing features like canvas rendering and improved animations, making web games more sophisticated than ever before.

Web Applications

HTML forms the basis of many web applications, whether they’re social networking sites like Facebook , streaming platforms like Netflix , or productivity apps like Google Docs. While these applications use a range of advanced scripting and technologies, they all rely on HTML for their basic structure and content delivery.

No matter where you turn on the internet, HTML is hard at work, shaping our digital experiences and interactions. Whether it’s a simple static web page or a complex web application, HTML is the foundation, making it an indispensable part of any web-related project.

Hiring Outlook for HTML Skills

The ubiquity of HTML makes the language a highly sought-after skill. Its fundamental role in web development makes it indispensable to the tech industry, but its influence doesn’t stop there. Virtually any sector with a digital presence values HTML expertise for tasks like enhancing web interfaces, improving user experiences, and driving e-commerce solutions.

The U.S. Bureau of Labor Statistics anticipates a robust job market for HTML skills, projecting a 23% increase in web development roles from 2021 to 2031, a rate much higher than the average for all occupations. This growth is spurred by the rising popularity of mobile devices and e-commerce, underlining the importance of HTML knowledge in the current job landscape.

However, while HTML is powerful on its own, combining it with other tech skills can significantly amplify job prospects. CSS , which works hand-in-hand with HTML to design web pages, is typically a requisite skill. Similarly, JavaScript , the go-to language for web interactivity, is highly desirable. In fact, experience working with the “web development trifecta,” as it’s often called, was the fifth most in-demand skill in our 2023 Developer Skills Survey . Knowledge of responsive design principles, back-end languages like Python or Java , version control systems like Git, and SEO best practices are also invaluable assets alongside front-end skills.

In a nutshell, HTML is more than just a coding language—it’s the backbone of the digital world. Its utility spans far and wide, making it a crucial skill for tech professionals and a top requirement for hiring managers across industries. Whether you’re an aspiring web developer or an employer in the hiring process, understanding the versatile role of HTML in today’s digital age is key.

Key Takeaways

HTML’s simplicity, wide-ranging compatibility, and utility across various platforms make it one of the most powerful tools in a web developer’s arsenal. But it’s not just for developers — anyone working with digital content, from content creators to digital marketers, can benefit from understanding HTML.

As the demand for digital skills continues to grow, HTML proficiency remains highly valuable and sought after by employers across many industries. Whether you’re a tech professional looking to expand your skills or a hiring manager seeking top talent, understanding the role and relevance of HTML is a must.

But let’s not forget that HTML is just one piece of the web development puzzle. CSS brings style to HTML’s structure, and JavaScript adds dynamic functionality to static HTML pages. By mastering these three core web technologies — HTML, CSS, and JavaScript — you’ll have a solid foundation for building virtually anything on the web.

In the world of tech, the only constant is change. But as the web continues to evolve, one thing remains certain: HTML is here to stay. 

This article was written with the help of AI. Can you tell which parts?

Get started with HackerRank

Over 3,000 companies and 40% of developers worldwide use HackerRank to hire tech talent and sharpen their skills.

Recommended topics

  • Front-End Development

Abstract, futuristic image generated by AI

What Is Selenium? A Guide to the Automated Web Testing Framework

  • HTML Tutorial
  • HTML Exercises
  • HTML Interview Questions
  • HTML Attributes
  • HTML Examples
  • HTML Cheat Sheet
  • HTML Color Picker
  • HTML Formatter
  • HTML Projects

Related Articles

  • Solve Coding Problems
  • HTML Basics
  • HTML Introduction
  • HTML Full Form
  • HTML Editors
  • HTML Comments
  • HTML Layout
  • HTML Elements
  • HTML Heading
  • HTML Paragraphs
  • HTML Text Formatting
  • HTML Quotations
  • HTML Color Styles and HSL
  • 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    

state what is meant by html structure and presentation

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.   

state what is meant by html structure and presentation

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:   

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.

state what is meant by html structure and presentation

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...

author

  • HTML Course Basic
  • HTML-Basics
  • Web Technologies
  • Kanchan_Ray
  • ghoshsuman0129
  • sumitgumber28
  • varshagumber28
  • sagar0719kumar
  • uditsharma_16
  • hardikkoriintern
  • bhawnachelani123
  • 10 Best ChatGPT Prompts for Lawyers 2024
  • What is Meta’s new V-JEPA model? [Explained]
  • What is Chaiverse & How it Works?
  • Top 10 Mailchimp Alternatives (Free) - 2024
  • Dev Scripter 2024 - Biggest Technical Writing Event By GeeksforGeeks

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

What is HTML – Definition and Meaning of Hypertext Markup Language

HTML, or Hypertext Markup Language, is a markup language for the web that defines the structure of web pages.

It is one of the most basic building blocks of every website, so it's crucial to learn if you want to have a career in web development.

In this article, I will walk you through what HTML is about in detail, how it does things on web pages, and we'll also touch on a really cool part of HTML – Semantic HTML.

What is HTML?

To understand "HTML" from front to back, let's look at each word that makes up the abbreviation:

Hypertext : text (often with embeds such as images, too) that is organized in order to connect related items

Markup : a style guide for typesetting anything to be printed in hardcopy or soft copy format

Language : a language that a computer system understands and uses to interpret commands.

HTML determines the structure of web pages. This structure alone is not enough to make a web page look good and interactive. So you'll use assisted technologies such as CSS and JavaScript to make your HTML beautiful and add interactivity, respectively.

In this case, I like to break down the three technologies – HTML, CSS, and JavaScript – this way: they are like a human body.

  • HTML is the skeleton,
  • CSS is the skin,
  • and JavaScript is the circulatory, digestive, and respiratory systems that brings the structure and the skin to life.

You can also look at HTML, CSS, and JavaScript this way: HTML is the structure of a house, CSS is the interior and exterior decor, and JavaScript is the electricity, water system, and many other functional features that make the house livable.

Since HTML defines the markup for a particular web page, you'll want the text, images, or other embeds to appear in certain ways.

For example, you might want some text to be big, other text to be small, and some to be bold, italic, or in bullet point form.

HTML has "tags" that let you get this done. So, there are tags to create headings, paragraphs, bolded words, italicized words, and more.

The image below describes the anatomy of an HTML tag:

anatomy-of-an-html-tag

HTML Elements

An element consists of the opening tag, a character, the content, and a closing tag. Some elements are empty – that is, they don't have a closing tag but instead have a source or link to content that you want to embed on the web page.

An example of an empty element is <img> , which you use to embed images on a web page.

HTML elements are often used interchangeably with tags, but there's a small difference between the two. An element is a combination of the opening and closing tag, and then the content between them.

I made another image to help you visualize the anatomy of an HTML element:

anatomy-of-an-html-element

HTML Attributes

HTML tags also take what are called attributes. These attributes are placed in the opening tag and range from style and ids to classes. They take values, which convey more information about the element and help you do things such as styling and manipulation with JavaScript.

In the infographic below, the opening tag contains a class attribute with a value of “text” . This can be used to style the element or select it with JavaScript for interactivity.

attribute-1

Here's the anatomy of a basic HTML page:

Let's look at the important bits of code here:

<!Doctype html> : Specifies that we're using HTML5 in this code. Before the introduction of HTML5, you had to explicitly state which version of HTML you were coding in with the <!Doctype> tag. For example, HTML4.0, 3.2, and so on. But now we no longer need it. When “html” is written in the code, the browser automatically assumes that you are coding in HTML5.

<html></html> : the root, or top-level element of every HTML document. Every other element must be wrapped in it.

<head></head> : one of the most crucial parts of the HTML document. Web crawlers look inside the head tags to get important information about the page. It contains info such as the page title, stylesheets, meta information for SEO, and lots more.

<meta /> : this is an empty element that conveys meta-information about the page. Such information may include the author, what type of encoding it's using (almost always UTF-8), responsiveness, compatibility, and a lot more. Web crawlers always look at the meta tag to get information about the web page, which will play a crucial role in SEO.

<title></title> : this defines the title of the web page. It is always shown in the browser tab.

<body></body> : all the content of the HTML document is located inside the body tag. There can only be one <body> tag on the whole page.

What is Semantic HTML?

Semantic HTML means that your HTML tags convey the actual meaning of what they are used for.

Semantics has been an integral part of HTML since its inception in the early 90s. But it never gained particular relevance until the late 90s when CSS started working in most browsers.

With semantic HTML, semantically-neutral tags such as <div> and <span> are frowned upon since semantically more descriptive tags such as <header> , <nav> , <main> , <section> , <footer> and <article> can do the same thing they do.

A noticeable advantage of using semantic tags is that web crawlers are able to index the web page or website easily, improving SEO in return.

In addition, a website that uses semantics becomes more informative, adaptable, and accessible to those who use screen readers to access websites.

Important Semantic Tags and What they Do

Let's look at some of the most commonly used semantic HTML tags:

<header> : The <header> element defines the introductory section of a web page. It contains items such as the logo, navigation, theme switcher, and search bar.

<nav> : The <nav> element specifies the navigation items of the page such as home, contact, about, FAQs, and so on.

<main> : The <main> element is conventionally treated as the immediate descendant of the tag. It contains the main sections of the HTML document apart from <header> and <footer> . Ideally, there should be just one of these in the whole HTML document.

<section> : The <section> element defines a particular section of the web page. This may be the showcase section, about section, contact section, or others. You can use numerous sections in a single HTML document.

<article> : The <article> element represents a certain part of a web page that conveys some particular information. Such information could be a combination of text, images, videos, and embeds. Look at this element as a standalone blog post on a page containing excerpts about other blog posts.

<aside> : As the name implies, this represents a sidebar on a web page. It is usually a part of the web page that is not directly related to the main content.

<footer> : The <footer> element accommodates items such as quick links, copyright information, or any other data related to the entire website or web page.

Note that since semantic elements convey actual meaning and what some particular content actually does (such as nav for navigation, aside for a sidebar, and so on), these elements are not automatically positioned where they are supposed to be. You still have to do that with CSS.

A super simple semantic HTML document looks like this:

Here's what it looks like in the browser:

semanticHTML-4

You can see that the content inside the <aside> tag isn't in the sidebar and the content inside the <nav> tag is not automatically available as the navigation bar. This is why you still have to make them look the way they are supposed to look with CSS.

I hope this article has helped you learn the basics of HTML and what it does. Now you can start to learn more advanced technologies such as CSS and JavaScript, and then start forming a solid career in web development.

Thanks a lot for reading and have a nice time.

Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.

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

state what is meant by html structure and presentation

HTML structure

Use html (hypertext markup language) to render your website's content and settings..

HTML (HyperText Markup Language) is one of the most important foundations on the web. It’s the markup language that’s used for creating websites. The content and settings of a website can be found in our HTML.

The two primary structural components in HTML are the body and the head . Both of these are used by all  web browsers to render the structure and settings of a webpage.

Inside the body is where all content on a website is stored. For example, a heading, paragraph, and image are all written as different tags (element types) in the body, where they get rendered by the browser. 

In this example we're hand-coding HTML to demonstrate how it gets rendered by the browser. These tags and all the code you see will get created for you automatically when you're adding this type of content using Webflow.

This is where the page settings are defined—all the information about a website is held here. Here are a few things you can find in the head:

Title tag —the title that appears when a website is shown in Google search results.

Meta tags —the description that will appear below the title in Google search results.

CSS —the markup that gives HTML elements’ their styles (e.g. height, color, font-size, etc). Without CSS we would see all the content stacked vertically with no structure or styling, like in a text document.

Open Graph tags —consists of the image and description that appears when a site is shared (e.g. Twitter, Facebook, etc).

In the Webflow UI

In Webflow, settings like the Title, Meta Description , and Open Graph are all editable in the Pages Panel. CSS is created when you select an element on the canvas and use the Style Panel .

We'll use the Webflow interface to preview how this will look and function, so we don't have to worry about scanning HTML or CSS files for ninety minutes only to find that we forgot to close out a tag in line 4722. Instead, we can focus entirely on creating content.

Table of contents

Continue learning, add a spline scene to your webflow site, archive a site, asset privacy, build a locale switcher, copyright (dmca) takedown notice, custom css properties and values, custom element, duplicate a site, integrate the hubspot app, localization overview, localize collection content, localize content and styles, localize page settings, localized seo and locale routing, manage localization add-on plans, pointer events, transfer a site, manually connect a custom domain, manually connect a custom subdomain, quick connect a custom domain, quick connect a custom subdomain, webflow apps overview, publishing workflow, add shopify products to your webflow site, connect webflow to third-party apps with zapier, embed soundcloud tracks on your webflow site, embed an eventbrite checkout on your webflow site, embed dynamic twitter share buttons on your webflow site, integrate optimizely for a/b testing, embed an instagram feed on your site with elfsight, control text wrapping and line breaking, single sign-on (sso) login, building web layouts, v flex and h flex elements, devlink in the designer, creator credits, quick stack, text stroke, webflow staging subdomain, import/export user accounts, disable spellcheck with custom attributes, small, large, and dynamic viewport units, wrap element in div or link block, webflow plans and pricing, create contacts in hubspot with webflow logic, create records in airtable with webflow logic, figma to webflow plugin, subscriptions, variable fonts, semantic html5 tags, agency or freelancer guest role, contribute to the webflow marketplace, creator profiles, page branching, webflow experts, webflow marketplace overview, make http requests with logic, webflow logic overview, sales tax on webflow subscriptions, email subscription settings, marketo forms integration, copy and paste between sites, save your site as a shared workspace template, webflow templates overview, configure taxes on ecommerce orders, upload custom fonts, set 301 redirects to maintain seo ranking, set a default line height for your entire site, manage your account profile, webflow for creators, integrate google optimize for a/b and multivariate testing, hubspot forms integration, ssl hosting, webflow pages plugin for wordpress, buy a custom domain through webflow, transfer hosting between sites, integrate adobe fonts into a workspace, integrate adobe fonts into a specific site, multi-reference field, reference field overview, set a default domain, too many redirects error, troubleshoot your dns settings, intro to the editor, webp conversion tool, custom security headers, connect a subdomain, editor branding, intro to the webflow designer, invite content editors, publishing overview, share your site and invite collaborators, pages panel overview, change the account password, hmm…we couldn’t find any results for “ search query ”. try a different search term or check out our community forum..

< BACK TO BLOG

Learn HTML Basics: Introduction to HTML Structure & Elements

Faraz

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.

Table of Contents

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.

state what is meant by html structure and presentation

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, related post.

  • Create an Eye-Catching CSS Glow Button in Just a Few Steps
  • Innovative and Stylish: Create a Codepen Team Member List with HTML/CSS
  • Create a Pure CSS Animated Search Box Using HTML and CSS
  • Creating a Responsive Streaming Service Landing Page Using HTML, CSS, and JavaScript
  • Creating a Responsive Chart with HTML, CSS, and Chart.js (Source Code)
  • Create a Responsive Slider with jQuery (Source Code)
  • How to Make a New Year 2023 Countdown with HTML, CSS and JavaScript
  • Creating a Notes App with HTML, Bootstrap, and JavaScript

What Is HTML? the Anatomy of an HTML5 Document

This is the second article in our series on the absolute fundamentals of web development. Our first article explained in detail what HTML is on a conceptual level. We looked at what a markup language is, what tags are and how HTML compares to other important pieces of the web development puzzle such as CSS.

Join us today as we move on and take a look at each basic piece of an HTML document. I’ll explain all that stuff at the top of an HTML file that confuses you and outline the basic structure that you’ll follow for creating your own HTML files.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Graphic Templates

Graphic Templates

Logos, print & mockups.

Fonts

Sans Serif, Script & More

CMS Templates

CMS Templates

Shopify, tumblr & more.

 Presentation Templates

Presentation Templates

Powerpoint & keynote.

Web Templates

Web Templates

Landing pages & email.

Graphics

Icons, Vectors & More

Explore Envato Elements

The very first thing that you typically see in an HTML file is the DOCTYPE declaration. Before HTML5, this could be a very confusing bit of code that looked something like this:

There’s a lot going on here and every bit of it speaks to either the web browser, the reader or both. The “PUBLIC” part just speaks to the availability, the DTD stands for Document Type Definition , which declares the version of HTML being used and the final section is a URL pointing to where the DTD can be found.

The words “loose,” (or transitional) “strict” and “frameset” refer to different versions of HTML 4, which allowed for slightly different markup. These were essentially just to help transition developers from older versions of HTML.

The HTML5 DOCTYPE

There are several DOCTYPEs to choose from, which can be monumentally confusing for new developers. Fortunately, HTML5 completely simplifies the situation with a refreshingly simple DOCTYPE:

See how easy that is by comparison? It really is a beautiful thing.

What Does the DOCTYPE Do?

Now we’ve seen what a DOCTYPE looks like but we haven’t really discussed what it does . The answer is that the DOCTYPE tells the browser which type of HTML to expect, which in turn affects how the browser renders the page.

As you explore web development more, you’ll learn that there’s a huge emphasis on “standards-based development.” The general idea is that if we all follow certain rules and standards, web development will be a more cohesive and consistent practice. This is better for developers, better for browsers and most importantly, better for users.

DOCTYPEs were originally designed to trigger “standards mode” in browsers, which meant that the page was rendered using newer web standards. Similarly, older pages without a DOCTYPE triggered “quirks mode” in browsers, which allowed for older practices to be used that wouldn’t function properly in standards mode.

The new, very simple HTML5 DOCTYPE is supported in all major browsers, and it triggers standards mode in all of them. The DOCTYPE also helps you validate your code, which ensures that current standards are being adhered to. Every page that you create should use a DOCTYPE and hopefully be fully standards compliant.

Root Element

After the DOCTYPE, the HTML really begins. This is indicated by the HTML Root Element. If your entire HTML is a tree, this is the root from which everything else sprouts.

The Root Element is defined by a “tag,” which we learned about in our last article. In this case, it’s the “HTML” tag.

Notice that the root element includes a language attribute, in our case English. Always be sure to indicate the appropriate language for every page you create.

Everything else that we will add to this page is situated inside of the Root Element. It is the container for every scrap of information and piece of content, the only exclusion being the DOCTYPE.

Head Element

The next thing you’ll encounter in an HTML document is the “head” section. The head tag is exactly what you’d expect it to be:

The stuff that goes into the head section is primarily informational, it tells both you and the browser certain things about the page such as the title, the charset, etc. This is also where you traditionally load in important external resources.

There are a few important things that go into a head tag. Let’s look at them one by one.

As you can probably guess, meta tags hold metadata about the page. Metadata takes many forms and can include keywords, authors, descriptions, etc. Here are a few notable inclusions:

Charset This is pretty boring stuff, the charset is typically set to UTF-8 and essentially tells the browser which character encoding to use.

Your pages should definitely include an indication of which charset to use. Don’t over think it, it’s just one of those things you need to stick in your template. Below is a typical charset declaration in HTML5.

This is yet another thing that has gotten easier with HTML5. Check out the version of this snippet required for HTML 4.01:

Some other typical metatags include description and author. Here’s a quick, self-explanatory example of each of these:

Description

Another thing that goes inside the head portion of your document is the title tag. This is a very simple piece of code that simply states whatever you’d like the title of the page to be. Here’s an example:

This title is usually shown to the user at the very top center of the browser window, on a tab, etc.

screenshot

Links and Scripts

The last thing we’ll discuss regarding the head tag is the inclusion of external resources. In a very simple web page, you’ll typically see these take the form of a stylesheet or script:

Here I’m essentially loading my CSS file as well as jQuery (a JavaScript library) into the page. If these resources are included in the source files but not linked to in the head section, they will not function. Note that the links for these could either point to something in the local folder hierarchy (as above) or something hosted on another web server.

The link used above for the CSS file uses a link relation (rel=”stylesheet”). For more on link relations, check out this article .

Also, as an alternative to linking to external files, you can embed code right into the head element. Here’s an example with CSS, but the same can be done via the “script” tag and JavaScript (embedded scripts are often placed at the end of the body element instead).

Body Element

The final portion of an HTML page is the most important. Everything inside of the body element defines the content and structure of your page. As far as development time, you’ll likely use a set template for everything above and spend a few minutes customizing it for specific projects. The rest of your HTML time will be spend inside the body element.

Putting it All Together

Now that we’ve walked through each individual piece of an HTML file, let’s put it all together into one extremely basic HTML5 template.

An Overview

A thousand apologies for the mundane nature of this topic, beginners are often turned off by boredom at this point but hang in there, the real fun of HTML is everything between the body tags, which we haven’t even discussed!

All of these pieces were necessary to accurately paint the picture of what an HTML document actually is. We now see that an HTML document has a DOCTYPE that tells the browser how to render the page and helps ensure the proper standards are being used.

We also know that there’s a set hierarchy to how HTML pages are structured. Just about everything but the DOCTYPE is thrown into the root element, meaning it is the “parent element” of the head and body elements, which in turn have their own children.

screenshot

The basic structure of an HTML document is referred to as the DOM, or the Document Object Model. This is almost always metaphorically referred to as a tree and depicted like image above. Our own Jack Rocheleau wrote an in-depth look into the DOM titled Deeper Study Into the WWW’s Document Object Model . For the next set in understanding the basic structure of an HTML page, check out that article.

This article represents a very brief overview of how an HTML skeleton is structured and the types of things that are typically included. It is by no means exhaustive, but should serve as a good basic introduction to these topics.

When you’re just starting out in code, most people will simply give you a template for all of the code above without really explaining what it all does. This can leave a sizable hole in your education so it’s important to read through this information and attempt to understand what you can.

Stay with us in this series and check back soon as we answer another important question: What is CSS?

Web Development

What is html.

HTML

HTML stands for H yper T ext M arkup L anguage

HTML is the standard markup language for Web pages

HTML elements are the building blocks of HTML pages

HTML elements are represented by <> tags

HTML Elements

An HTML element is a start tag and an end tag with content in between:

HTML Attributes

  • HTML elements can have attributes
  • Attributes provide additional information about the element
  • Attributes come in name/value pairs like charset="utf-8"

A Simple HTML Document

Try it Yourself »

Example Explained

HTML elements are the building blocks of HTML pages.

  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The lang attribute  defines the language of the document
  • The <meta> element contains meta information about the document
  • The charset attribute defines the character set used in the document
  • The <title> element specifies a title for the document
  • The <body> element contains the visible page content
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

HTML Documents

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 Document Structure

Below is a visualization of an HTML document (an HTML Page):

Note: Only the content inside the <body> section (the white area above) is displayed in a browser.

HTML Headings

HTML headings are defined with <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading: 

Advertisement

HTML Paragraphs

HTML paragraphs are defined with <p> tags:

HTML links are defined with <a> tags:

The link's destination is specified in the href attribute. 

HTML Images

HTML images are defined with <img> tags.

The source file ( src ), alternative text ( alt ), width , and height are provided as attributes:

HTML Buttons

HTML buttons are defined with <button> tags:

HTML lists are defined with <ul> (unordered/bullet list) or <ol> (ordered/numbered list) tags, followed by <li> tags (list items):

HTML Tables

An HTML table is defined with a <table> tag.

Table rows are defined with <tr> tags.

Table headers are defined with <th> tags. (bold and centered by default).

Table cells (data) are defined with <td> tags.

Programming HTML

Every HTML element can have attributes .

For web development and programming, the most important attributes are id and class. These attributes are often used to address program based web page manipulations.

Full HTML Tutorial

This has been a short description of HTML.

For a full HTML tutorial go to W3Schools HTML Tutorial .

For a full HTML tag reference go to W3Schools Tag Reference .

Get Certified

COLOR PICKER

colorpicker

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

  • 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.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Get started

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.

Assessments

The following assessments will test your understanding of the HTML basics covered in the guides above.

We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment, you'll be given a letter to mark up.

This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar.

COMMENTS

  1. HTML Structure and Presentation

    HTML (Hypertext Markup Language) is the recognised markup language utilised in forming web pages. Learn more about HTML Structure and Presentation here!

  2. HTML Structure and Presentation

    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.

  3. Structuring the web with HTML

    HTML Structuring the web with HTML To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage.

  4. HTML

    HTML is a markup language that defines the structure and presentation of web pages. It is one of the core technologies of the World Wide Web, along with CSS and JavaScript. HTML allows creating and formatting text, images, links, tables, forms, and other elements on a web page. Learn more about the history, syntax, and features of HTML on Wikipedia.

  5. 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 ).

  6. The 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: <!DOCTYPE html> <html> <head> <!-- The head section goes here --> </head> <body> <!--

  7. 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 ...

  8. What is HTML: Common uses and defining features

    HTML is an acronym that stands for HyperText Markup Language. Markup languages are different from programming languages. Whereas programming languages help us modify data, we use markup languages to determine how elements are displayed on a webpage. HTML has a simple, text-based structure that's easy for beginners to learn and understand.

  9. What is HTML? A Guide to the Backbone of the Web

    Contrary to common belief, HTML is not actually programming language. It's a markup language, which means it's used to structure content on the web. It lays down the foundation for web pages, allowing us to insert various types of content such as text, images, videos, and more into web pages. HTML dates back to the early days of the web.

  10. Structure vs. Presentation

    Structure refers to the practice of using HTML on content to convey meaning ( semantics ) and to describe how blocks of information are structured to one another. Examples: "this is a list" (ol, ul, li), "this is headings and subheadings" (<h1>, <h2>, ..., <h6>), "this section is related to" (<a>), etc..

  11. HTML Course

    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.

  12. What is HTML

    HTML, or Hypertext Markup Language, is a markup language for the web that defines the structure of web pages. It is one of the most basic building blocks of every website, so it's crucial to learn if you want to have a career in web development.

  13. Document and website structure

    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").

  14. HTML structure

    HTML structure - Web design tutorial. HTML (HyperText Markup Language) is one of the most important foundations on the web. It's the markup language that's used for creating websites. The content and settings of a website can be found in our HTML. The two primary structural components in HTML are the body and the head.

  15. Learn HTML Basics: Introduction to HTML Structure & Elements

    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. Table of Contents

  16. What Is HTML? the Anatomy of an HTML5 Document

    There's a lot going on here and every bit of it speaks to either the web browser, the reader or both. The "PUBLIC" part just speaks to the availability, the DTD stands for Document Type Definition, which declares the version of HTML being used and the final section is a URL pointing to where the DTD can be found.. The words "loose," (or transitional) "strict" and "frameset ...

  17. Introduction to HTML

    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

  18. What Is HTML? Hypertext Markup Language Basics for Beginners

    HTML stands for HyperText Markup Language. It is a standard markup language for web page creation. It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes. HTML has a lot of use cases, namely: Web development.

  19. Getting started with HTML

    HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a ...

  20. What is HTML

    HTML stands for H yper T ext M arkup L anguage. HTML is the standard markup language for Web pages. HTML elements are the building blocks of HTML pages. HTML elements are represented by <> tags.

  21. HTML BASICS Slides Presentation

    HTML BASICS: This slide presentation shows basics of HTML. ... (XHTML and the emerging HTML 5.0 standard) go back to the original purpose of HTML: to describe the structure of the data only, and leave all formatting to CSS (Please see the DZone CSS Refcard Series). ... It is meant to be used inside a form, and it is the basis for several types ...

  22. Introduction to HTML

    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. Creating hyperlinks.

  23. html

    Another benefit that comes naturally by separating content and presentation (HTML - CSS files) is that you have less to type and less to maintain, plus your pages can have a consistent styling applied very easily. Contrast thousands of inline styles vs. one style definition in one CSS file, which is "naturally" applied to all elements with the ...