structure and presentation of html

Teach Computer Science

HTML Structure and Presentation

Ks3 computer science.

11-14 Years Old

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

GCSE Computer Science

14-16 Years Old

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

A-Level Computer Science

16-18 Years Old

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

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

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

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

Html structure.

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

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

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

HTML tags are not case sensitive.

HTML Attributes

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

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

Ways to add CSS to HTML Elements

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

HTML Structure vs. HTML Presentation

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

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

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

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

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

HTML structure and presentation are essential for the proper functioning of web pages

Document and website structure

Overview: Introduction to HTML

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

Prerequisites:	Basic HTML familiarity, as covered in . HTML text formatting, as covered in . How hyperlinks work, as covered in .
Objective:	Learn how to structure your document using semantic tags, and how to work out the structure of a simple website.

Basic sections of a document

Webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured:

Usually a big strip across the top with a big heading, logo, and perhaps a tagline. This usually stays the same from one webpage to another.

Links to the site's main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than an individual component, but that's not a requirement; in fact, some also argue that having the two separate is better for accessibility , as screen readers can read the two features better if they are separate.

A big area in the center that contains most of the unique content of a given webpage, for example, the video you want to watch, or the main story you're reading, or the map you want to view, or the news headlines, etc. This is the one part of the website that definitely will vary from page to page!

Some peripheral info, links, quotes, ads, etc. Usually, this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author's bio, or links to related articles) but there are also cases where you'll find some recurring elements like a secondary navigation system.

A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It's a place to put common information (like the header) but usually, that information is not critical or secondary to the website itself. The footer is also sometimes used for SEO purposes, by providing links for quick access to popular content.

A "typical website" could be structured something like this:

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

Note: The image above illustrates the main sections of a document, which you can define with HTML. However, the appearance of the page shown here - including the layout, colors, and fonts - is achieved by applying CSS to the HTML.

In this module we're not teaching CSS, but once you have an understanding of the basics of HTML, try diving into our CSS first steps module to start learning how to style your site.

HTML for structuring content

The simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job .

This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

Note: Roughly 8% of men and 0.5% of women are colorblind; or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women. Blind and visually impaired people represent roughly 4-5% of the world population (in 2015 there were 940 million people with some degree of vision loss , while the total population was around 7.5 billion ).

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screen readers can recognize those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job .

To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

header: <header> .
navigation bar: <nav> .
main content: <main> , with various content subsections represented by <article> , <section> , and <div> elements.
sidebar: <aside> ; often placed inside <main> .
footer: <footer> .

Active learning: exploring the code for our example

Our example seen above is represented by the following code (you can also find the example in our GitHub repository ). We'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.

Take some time to look over the code and understand it — the comments inside the code should also help you to understand it. We aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS. We'll wait for this until you start to study CSS layout as part of the CSS topic.

HTML layout elements in more detail

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference . For now, these are the main definitions that you should try to understand:

<main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body> . Ideally this shouldn't be nested within other elements.
<article> encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).
<section> is similar to <article> , but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries), or a theme. It's considered best practice to begin each section with a heading ; also note that you can break <article> s up into different <section> s, or <section> s up into different <article> s, depending on the context.
<aside> contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).
<header> represents a group of introductory content. If it is a child of <body> it defines the global header of a webpage, but if it's a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings ).
<nav> contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.
<footer> represents a group of end content for a page.

Each of the aforementioned elements can be clicked on to read the corresponding article in the "HTML element reference" section, providing more detail about each one.

Non-semantic wrappers

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some CSS or JavaScript . For cases like these, HTML provides the <div> and <span> elements. You should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted.

<span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.

<div> is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

This isn't really an <aside> , as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a <section> , as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screen reader users in finding it.

Warning: Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.

Line breaks and horizontal rules

Two elements that you'll use occasionally and will want to know about are <br> and <hr> .

<br>: the line break element

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace ); with <br> elements in the code, the markup renders like this:

<hr>: the thematic break element

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

Would render like this:

Planning a simple website

Once you've planned out the structure of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called Information architecture . In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages, this can be fairly simple, and fun!

Active learning: create your own sitemap

Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?

Note: Save your work somewhere; you might need it later on.

At this point, you should have a better idea about how to structure a web page/site. In the next article of this module, we'll learn how to debug HTML .

Español – América Latina
Português – Brasil
Tiếng Việt

Overview of HTML

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

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

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

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

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

The tags and content that make up an HTML element.

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

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

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

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

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

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

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

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

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

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

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

Non-replaced elements

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

Replaced and void elements

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

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

Output of the above HTML:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Appearance of elements

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

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

Element, attributes, and JavaScript

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

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

Check your understanding

Test your knowledge of HTML

HTML elements are used for styling.

Select the replaced elements.

Select all of the true statements.

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

Last updated 2022-09-27 UTC.

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 1026

The Structure of an HTML Document

Yasin Cakal

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

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

Basic Structure of an HTML Document

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

Here’s the basic structure of an HTML document:

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

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

Head Section

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

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

Body Section

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

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

Elements and Attributes

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

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

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

Block-Level and Inline Elements

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

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

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

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

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

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

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

What is the root element of an HTML document?

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

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

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

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

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

What is the purpose of HTML attributes?

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

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

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

Learn HTML Basics: Introduction to HTML Structure & Elements

By Faraz - June 07, 2023

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

learn html basics introduction to html structure and elements.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Using Headings

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

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

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

Choosing the Right Heading Level

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

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

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

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

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

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

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

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

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

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

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

Creating a Basic Link

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

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

Linking to Email Addresses

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

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

Linking to Anchors

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

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

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

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

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

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

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

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

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

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

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

Unordered Lists

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

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

Here's an example of an unordered list:

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

Ordered Lists

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

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

Here's an example of an ordered list:

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

Nested Lists

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

Here's an example of a nested list:

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

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

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

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

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

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

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

Italic Text

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

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

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

Underlined Text

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

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

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

Strikethrough Text

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

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

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

Superscript and Subscript Text

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

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

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

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

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

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

Creating a Basic Table

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

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

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

Table Caption and Header Groups

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

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

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

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

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

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

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

Embedding Images

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

Here's an example:

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

Embedding Videos

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

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

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

Embedding Audio

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

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

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

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

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

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

Form Structure

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

Here's an example of a basic form:

Input Fields

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

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

Here's an example of a text input field:

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

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

Checkboxes and Radio Buttons

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

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

Here's an example of a checkbox:

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

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

Here's an example of a radio button group:

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

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

Here's an example of a submit button:

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

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

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

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

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

Semantic Elements

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

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

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

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

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

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

Semantic Headings

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

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

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

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

Semantic Links

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Q2: Can I create a website using only HTML?

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

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

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

Q4: Can I learn HTML on my own?

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

Q5: Is HTML a programming language?

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

Q6: How long does it take to learn HTML?

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

Create a Mobile-Friendly Blog Card Using HTML and CSS Tutorial.jpg

That’s a wrap!

Thank you for taking the time to read this article! I hope you found it informative and enjoyable. If you did, please consider sharing it with your friends and followers. Your support helps me continue creating content like this.

Stay updated with our latest content by signing up for our email newsletter ! Be the first to know about new articles and exciting updates directly in your inbox. Don't miss out—subscribe today!

If you'd like to support my work directly, you can buy me a coffee . Your generosity is greatly appreciated and helps me keep bringing you high-quality articles.

Thanks! Faraz 😊

Subscribe to my Newsletter

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

Create Draggable Modal Using HTML, CSS, and JavaScript

Learn how to create a draggable modal using HTML, CSS, and JavaScript with this easy-to-follow guide. Perfect for web developers of all skill levels.

Create Sticky Bottom Navbar using HTML and CSS

August 29, 2024

How to Create a Dropdown List with HTML and CSS

10 Modern Logo Hover Effects with HTML and CSS

August 28, 2024

Create Alert Ticker using HTML, CSS, and JavaScript

Create Animated Logout Button Using HTML and CSS

Learn to create an animated logout button using simple HTML and CSS. Follow step-by-step instructions to add smooth animations to your website’s logout button.

Create Fortnite Buttons Using HTML and CSS - Step-by-Step Guide

June 05, 2024

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

March 17, 2024

How to Create a Trending Animated Button Using HTML and CSS

March 15, 2024

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

March 10, 2024

Create Dice Rolling Game using HTML, CSS, and JavaScript

Learn how to create a dice rolling game using HTML, CSS, and JavaScript. Follow our easy-to-understand guide with clear instructions and code examples.

Create a Breakout Game with HTML, CSS, and JavaScript | Step-by-Step Guide

July 14, 2024

Create a Whack-a-Mole Game with HTML, CSS, and JavaScript | Step-by-Step Guide

June 12, 2024

Create Your Own Bubble Shooter Game with HTML and JavaScript

May 01, 2024

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

April 01, 2024

Tooltip Hover to Preview Image with Tailwind CSS

Learn how to create a tooltip hover effect to preview images using Tailwind CSS. Follow our simple steps to add this interactive feature to your website.

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

January 23, 2024

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

January 04, 2024

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

November 30, 2023

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

October 30, 2023

Learn how to create a sticky bottom navbar using HTML and CSS with this easy-to-follow guide.

Creating a Responsive Footer with Tailwind CSS (Source Code)

February 25, 2024

Crafting a Responsive HTML and CSS Footer (Source Code)

November 11, 2023

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

October 17, 2023

Bootstrap Footer Template for Every Website Style

March 08, 2023

HTML Page Elements – Explained for Beginners

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

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

What Does HTML Do?

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

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

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

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

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

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

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

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

Understanding HTML Page Structure

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

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

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

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

If you scroll all the way to the bottom of a page, you'll see a closing tag like this: </html> .

What's in the section of your HTML code?

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

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

Here's how all that might look:

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

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

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

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

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

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

Understanding Semantic Tags

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

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

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

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

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

This article comes from my Complete LPI Web Development Essentials Study Guide course . And there's much more technology goodness available at bootstrap-it.com

HTML Structure and Presentation

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

HTML	Provides the and structure of each page
CSS	A language used to style the HTML content
JavaScript	A scripting language used to provide additional , interactivity and behaviours

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

Hypertext Markup Language (HTML)

HTML is markup language used to create web pages.

HTML pages are interpreted by a web browser .

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

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

Images, tables and hyperlinks are also included using HTML.

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

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

Example of HTML

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

Cascading Style Sheets (CSS)

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

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

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

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

Example of CSS

p { color: blue }

Related Theory

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

Related Quizzes

The Internet

Sign up for Guru News

Popular downloads.

Von Neumann Architecture Cheat Sheet

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

Small Print

Cookie Policy
Privacy Policy
Terms and Conditions

Downloads Shop

Information & Terms

HTML Tutorial
HTML Exercises
HTML Attributes
Global Attributes
Event Attributes
HTML Interview Questions
DOM Audio/Video
HTML Examples
Color Picker
A to Z Guide
HTML Formatter

HTML Course Structure of an HTML Document

HTML(Hypertext Markup Language) , structures web pages. Unlike programming languages, it isn’t compiled or interpreted. Browsers render HTML directly, displaying content without typical errors. It’s a markup language, not a programming one, making execution smooth without encountering compilation or interpretation issues.

Table of Content

HTML Document Structure

Tags and attributes

Structure of an html document, understanding essential html tags.

HTML uses predefined tags and attributes to instruct the browser on how to display content, including formatting, style, font size, and images. HTML is a case-insensitive language, meaning there is no distinction between uppercase and lowercase letters.

There are generally two types of tags in HTML:

Paired Tags : These tags come in pairs i.e. they have both opening(< >) and closing(</ >) tags.
Empty Tags : These tags are self-closing and do not require a closing tag.”

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

HTML tags are structural components enclosed in angle brackets. They are typically opened and closed with a forward slash (e.g., <h1></h1> ). Some tags are self-closing, while others support attributes like width, height, and controls for defining properties or storing metadata.

An HTML Document is mainly divided into two parts:

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

Example: To demonstrate basic HTML document structure.

DOCTYPE Declaration (`<!DOCTYPE HTML>`): It specifies the HTML version; typically indicates HTML5 .
<html>: The root element that encompasses the entire HTML document structure. It serves as the parent to both the <head> and <body> tags.
lang attribute: Specifies the language using the “lang” attribute (e.g., lang=”en” for English
<head>: Container for metadata, title, CSS , scripts, etc.
Content: While not directly displayed, it serves informational and structural purposes.
<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.

Please Login to comment...

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

HTML Structure

Programmers should follow certain rules about how to structure an HTML file. The rules about how to structure an HTML file and the tags used to lay out this structure are vital to the browser being able to render the page.

Structure Rules

When it comes to laying out the overarching structure of an HTML file, a programmer should follow 5 rules:

Every HTML file needs a DOCTYPE tag, specifying the HTML version used. When using the current version of HTML, the DOCTYPE tag is simple to remember as it is: <!DOCTYPE html> . This is one of few tags that does not require a closing tag.
The <html> tag denotes the beginning and end of the HTML the programmer has written.
The <head> tag contains data about the web page.
The <body> tag contains everything that appears on the page of the document.
The <title> tag goes in the <head> of the document and browsers require it. It gives the title of the web page that appears in the tab.

Here is an example of the structure of an HTML page based off of these rules:

2 3 4 5 6 7 8 9 10

<html> <head> <title>My Web Page</title> content </head> <body> content </body> </html>

Document Head

So other than the title, what goes in the head of an HTML file? The head includes links to other files and other data about the document. Browsers do not display the content in the head.

The head can also include some styling to make the page beautiful. How to do that is covered in the next chapter on CSS.

Document Body

After the programmer has written the head of the document, it is time to move on to the body of the document. The body of the document contains the content that appears on the web page. Within the body tags, programmers add images, text, and even code samples with different HTML tags. Content outside of the body will not appear on the page.

To make HTML more readable to other programmers, programmers write comments in HTML. When adding a comment, the programmer uses  to end the comment, like so:

2 3	> <!-- This is an important comment --> </body>

Spacing and tabs helps many programmers read through theirs and their colleagues’ code. Be aware that doing so in HTML can affect how the browser renders the page in rare instances.

Check Your Understanding

Which HTML tag does not require a closing tag?

HTML BASICS Slides Presentation

Click to access all Slides..

This slide presentation shows basics of HTML.

HTML and XHTML are the foundation of all web development. HTML is used as the graphical user interface in client-side programs written in JavaScript. Server-side languages like PHP and Java also receive data from web pages and use HTML as the output mechanism. The emerging Ajax technologies likewise use HTML and XHTML as their visual engine. HTML was once a very loosely-defined language with very little standardization, but as it has become more important, the need for standards has become more apparent. Regardless of whether you choose to write HTML or XHTML, understanding the current standards will help you provide a solid foundation that will simplify all your other web coding. Fortunately HTML and XHTML are actually simpler than they used to be, because much of the functionality has moved to CSS.

Common Elements

Every page (HTML or XHTML shares certain elements in common.) All are essentially plain text files, with the .html extension. HTML files should not be created with a word processor, but in some type of editor that creates plain text. Every page has a large container (HTML or XHTML) and two major subcontainers, the head and the body. The head area contains information useful behind the scenes, such as CSS formatting instructions and JavaScript code. The body contains the part of the page that is visible to the user.

Tags and Attributes

An HTML document is based on the notion of tags. A tag is a piece of text inside angle brackets (<>). Tags typically have a beginning and an end, and usually contain some sort of text inside them. For example, a paragraph is normally denoted like this:

The <p> indicates the beginning of a paragraph. Text is then placed inside the tag, and the end of the paragraph is denoted by an end tag, which is similar to the start tag but with a slash (</p>.) It is common to indent content in a multi-line tag, but it is also legal to place tags on the same line:

Tags are sometimes enhanced by attributes, which are name value pairs that modify the tag. For example, the tag (used to embed an image into a page) usually includes the following attributes:

The src attribute describes where the image file can be found, and the alt attribute describes alternate text that is displayed if the image is unavailable.

Nested tags

Tags can be (and frequently are) nested inside each other. Tags cannot overlap, so <a><b></a></b> is not legal, but <a><b></b></a> is fine.

HTML VS XHTML

HTML has been around for some time. While it has done its job admirably, that job has expanded far more than anybody expected. Early HTML had very limited layout support. Browser manufacturers added many competing standards and web developers came up with clever workarounds, but the result is a lack of standards and frustration for web developers. The latest web standards (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). XHTML is nothing more than HTML code conforming to the stricter standards of XML. The same style guidelines are appropriate whether you write in HTML or XHTML (but they tend to be enforced in XHTML):

Most of the requirements of XHTML turn out to be good practice whether you write HTML or XHTML. I recommend using XHTML strict so you can validate your code and know it follows the strictest standards.

XHTML has a number of flavors. The strict type is recommended, as it is the most up-to-date standard which will produce the most predictable results. You can also use a transitional type (which allows deprecated HTML tags) and a frameset type, which allows you to add frames. For most applications, the strict type is preferred.

HTML Template

The following code can be copied and pasted to form the foundation of a basic web page:

The structure of your web pages is critical to the success of programs based on those pages, so use a validating tool to ensure you haven't missed anything

Validating Tool	Description
WC3	The most commonly used validator is online at http://validator.w3.org this free tool checks your page against the doctype you specify and ensures you are following the standards. This acts as a 'spell-checker' for your code and warns you if you made an error like forgetting to close a tag.
HTML Tidy	There's an outstanding free tool called HTML tidy which not only checks your pages for validity, but also fixes most errors automatically. Download this tool at http://tidy.sourceforge.net/ or (better) use the HTML validator extension to build tidy into your browser.
HTML Validator extension	The extension mechanism of Firefox makes it a critical tool for web developers. The HTML Validator extension is an invaluable tool. It automatically checks any page you view in your browser against both the w3 validation engine and tidy. It can instantly find errors, and repair them on the spot with tidy. With this free extension available at http://users.skynet. be/mgueury/mozilla/ , there's no good reason not to validate your code.

USEFUL OPEN SOURCE TOOLS

Some of the best tools for web development are available through the open source community at no cost at all. Consider these application as part of your HTML toolkit:

Open Source Tool	Description
Aptana	http://www.aptana.com/ This free programmer's editor (based on Eclipse) is a full-blown IDE customized for HTML / XHTML, CSS, JavaScript, and Ajax. It offers code completion, syntax highlighting, and FTP support within the editor.
Web Developer Toolbar	https://www.addons.mozilla.org/en-US/firefox/addon/60 This Firefox extension adds numerous debugging and web development tools to your browser.
Firebug	https://addons.mozilla.org/en-US/firefox/addon/1843 is an add-on that adds full debugging capabilities to the browser. The firebug lite version even works with IE.

PAGE STRUCTURE ELEMENTS

The following elements are part of every web page.

Element	Description
<html></html>	Surrounds the entire page
<head></head>	Contains header information (metadata, CSS styles, JavaScript code)
<title></title>	Holds the page title normally displayed in the title bar and used in search results
<body></body>	Contains the main body text. All parts of the page normally visible are in the body

KEY STRUCTURAL ELEMENTS

Most pages contain the following key structural elements:

Element	Name	Description
<h1> </h1>	Heading 1	Reserved fo strongest emphasis
<h2> </h2>	Heading 2	Secondary level heading. Headings go down to level 6, but <h1> through <h3> are most common
<p> </p>	Paragraph	Most of the body of a page should be enclosed in paragraphs
<div> </div>	Division	Similar to a paragraph, but normally marks a section of a page. Divs usually contain paragraphs

LISTS AND DATA

Web pages frequently incorporate structured data so HTML includes several useful list and table tag

Element	Name	Description
<ul></ul>	Unordered list	Normally these lists feature bullets (but that can be changed with CSS)
<ol></ol>	Ordered list	These usually are numbered, but this can be changed with CSS
<li></li>	List item	Used to describe a list item in an unordered list or an ordered list
<dl></dl>	Definition list	Used for lists with name-value pairs
<dt></dt>	Definition term	The name in a name-value pair. Used in definition lists
<dd></dd>	Definition description	The value (or definition) of a name, value pair
<table></table>	Table	Defines beginning and end of a table
<tr></tr>	Table row	Defines a table row. A table normally consists of several <tr> pairs (one per row)
<td></td>	Table data	Indicates data in a table cell. <td> tags occur within <tr> (which occur within <table>)
<th></th>	Table heading	Indicates a table cell to be treated as a heading with special formatting

Standard List Types

HTML supports three primary list types. Ordered lists and unordered lists are the primary list types. By default, ordered lists use numeric identifiers, and unordered lists use bullets.

However, you can use the list-style-type CSS attribute to change the list marker to one of several types.

Lists can be nested inside each other

Definition lists

The special definition list is used for name / value pairs. The definition term (dt) is a word or phrase that is used as the list marker, and the definition data is normally a paragraph:

Use of tables

Tables were used in the past to overcome the page-layout shortcomings of HTML. That use is now deprecated in favor of CSS-based layout. Use tables only as they were intended, to display tabular data.

A table mainly consists of a series of table rows (tr.) Each table row consists of a number of table data (td) elements. The table heading (th) element can be used to indicate a table cell should be marked as a heading.

The rowspan and colspan attributes can be used to make a cell span more than one row or column.

Each row of a table should have the same number of columns, and each column should have the same number of rows. Use of the span attribute may require adjustment to other rows or columns.

LINKS AND IMAGES

Links and images are both used to incorporate external resources into a page. Both are reliant on URIs (Universal Resource Indicators), commonly referred to as URLs or addresses.

<a> (anchor) The anchor tag is used to provide the basic web link:

In this example, http://www.example.com is the site to be visited. The text "link to example.com" will be highlighted as a link.

absolute and relative references

<link>

The link tag is used primarily to pull in external CSS files:

<img>

The img tag is used in to attach an image. Valid formats are .jpg, .png, and .gif. An image should always be accompanied by an alt attribute describing the contents of the image.

Image formatting attributes (height, width, and align) are deprecated in favour of CSS.

SPECIALTY MARKUP

HTML / XHTML includes several specialty tags. These are used to describe special purpose text. They have default styling, but of course the styles can be modified with CSS.

<quote>

The quote tag is intended to display a single line quote:

Quote is an inline tag. If you need a block level quote, use <blockquote>.

<pre>

The <pre> tag is used for pre-formatted text. It is sometimes used for code listings or ASCII art because it preserves carriage returns. Pre-formatted text is usually displayed in a fixed-width font.

<code>

The code format is used to manage pre-formatted text, especially code listings. It is very similar to pre.

This tag is used to mark multi-line quotes. Frequently it is set off with special fonts and indentation through CSS. It is a block-level tag.

<span>

The span tag is a vanilla inline tag. It has no particular formatting of its own. It is intended to be used with a class or ID when you want to apply style to an inline chunk of code.

The em tag is used for standard emphasis. By default, <em> italicizes text, but you can use CSS to make any other type of emphasis you wish.

This tag represents strong emphasis. By default, it is bold, but you can modify the formatting with CSS.

Forms are the standard user input mechanism in HTML / XHTML. You will need another language like JavaScript or PHP to read the contents of the form elements and act upon them.

Form Structure

A number of tags are used to describe the structure of the form. Begin by looking over a basic form:

The <form></form> pair describes the form. In XHTML strict, you must indicate the form's action property. This is typically the server-side program that will read the form. If there is no such program, you can set the action to null ("") The method attribute is used to determine whether the data is sent through the get or post mechanism.

Most form elements are inline tags, and must be encased in a block element. The fieldset is designed exactly for this purpose. Its default appearance draws a box around the form. You can have multiple fieldsets inside a single form.

You can add a legend inside a fieldset. This describes the purpose of the fieldset.

A label is a special inline element that describes a particular field. A label can be paired with an input element by putting that element's ID in the label's for attribute.

The input element is a general purpose inline element. It is meant to be used inside a form, and it is the basis for several types of more specific input. The subtype is indicated by the type attribute. Input elements usually include an id attribute (used for CSS and JavaScript identification) and / or a name attribute (used in server-side programming.) The same element can have both a name and an id.

This element allows a single line of text input:

Passwords display just like textboxes, except rather than showing the text as it is typed, an asterisk appears for each letter. Note that the data is not encoded in any meaningful way. Typing text into a password field is still entirely unsecure.

Radio Button

Radio buttons are used in a group. Only one element of a radio group can be selected at a time. Give all members of a radio group the same name value to indicate they are part of a group.

Attaching a label to a radio button means the user can activate the button by clicking on the corresponding label. For best results, use the selected attribute to force one radio button to be the default.

Checkboxes are much like radio buttons, but they are independent. Like radio buttons, they can be associated with a label.

Hidden fields hold data that is not visible to the user (although it is still visible in the code) It is primarily used to preserve state in server-side programs.

Note that the data is still not protected in any meaningful way.

Buttons are used to signal user input. Buttons can be created through the input tag:

This will create a button with the caption "launch the missiles." When the button is clicked, the page will attempt to run a JavaScript function called "launchMissiles()" Standard buttons are usually used with JavaScript code on the client. The same button can also be created with this alternate format:

This second form is preferred because buttons often require different CSS styles than other input elements. This second form also allows an <img> tag to be placed inside the button, making the image act as the button.

The reset button automatically resets all elements in its form to their default values. It doesn't require any other attributes.

Select / option

Drop-down lists can be created through the select / option mechanism. The select tag creates the overall structure, which is populated by option elements.

The select has an id (for client-side code) or name (for serverside code) identifier. It contains a number of options. Each option has a value which will be returned to the program. The text between <option> and </option> is the value displayed to the user. In some cases (as in this example) the value displayed to the user is not the same as the value used by programs.

Multiple Selections

You can also create a multi-line selection with the select and option tags:

DEPRECATED FORMATTING TAGS

Certain tags common in older forms of HTML are no longer recommended as CSS provides much better alternatives.

The font tag was used to set font color, family (typeface) and size. Numerous CSS attributes replace this capability with much more flexible alternatives. See the CSS refcard for details.

I (italics)

HTML code should indicate the level of emphasis rather than the particular stylistic implications. Italicizing should be done through CSS. The <em> tag represents emphasized text. It produces italic output unless the style is changed to something else. The <i> tag is no longer necessary and is not recommended. Add font-style: italic to the style of any element that should be italicized.

Like italics, boldfacing is considered a style consideration. Use the <strong> tag to denote any text that should be strongly emphasized. By default, this will result in boldfacing the enclosed text. You can add bold emphasis to any style with the font-weight: bold attribute in CSS.

DEPRECATED TECHNIQUES

In addition to the deprecated tags, there are also techniques which were once common in HTML that are no longer recommended.

Frames have been used as a layout mechanism and as a technique for keeping one part of the page static while dynamically loading other parts of the page in separate frames. Use of frames has proven to cause major usability problems. Layout is better handled through CSS techniques, and dynamic page generation is frequently performed through server-side manipulation or AJAX.

Table-based design

Before CSS became widespread, HTML did not have adequate page formatting support. Clever designers used tables to provide an adequate form of page layout. CSS provides a much more flexible and powerful form of layout than tables, and keeps the HTML code largely separated from the styling markup.

HTML ENTITIES

Sometimes you need to display a special character in a web page. HTML has a set of special characters for exactly this purpose. Each of these entities begins with the ampersand(&) followed by a code and a semicolon.

Character	Name	Code	Note
	Non-breaking space		Adds white space
	<	Used to display HTML code or mathematics
>	Greater than	>	Used to display HTML code or mathematics
&	Ampersand	&	If you're not displaying an entity but really want the & symbol
©	Copyright	©	Copyright symbol
®	Registered trademark	®	Registered trademark

HTML 5 / CSS3 PREVIEW

New technologies are on the horizon. Firefox 3.5 now has support for significant new HTML 5 features, and CSS 3 is not far behind. While the following should still be considered experimental, they are likely to become very important tools in the next few years. Firefox 3.5, Safari 4 (and a few other recent browsers) support the following new features:

Audio and video tags

Finally the browsers have direct support for audio and video without plugin technology. These tags work much like the img tag.

The HTML 5 standard currently supports Ogg Theora video, Ogg Vorbis audio, and wav audio. The Ogg formats are opensource alternatives to proprietary formats, and plenty of free tools convert from more standard video formats to Ogg. The autoplay option causes the element to play automatically. The controls element places controls directly into the page.

The code between the beginning and ending tag will execute if the browser cannot process the audio or video tag. You can place alternate code here for embedding alternate versions (Flash, for example)

The canvas tag offers a region of the page that can be drawn upon (usually with Javascript.) This creates the possibility of real interactive graphics without requiring plugins like Flash.

This is actually a CSS improvement, but it's much needed. It allows you to define a font-face in CSS and include a ttf font file from the server. You can then use this font face in your ordinary CSS and use the downloaded font. If this becomes a standard, we will finally have access to reliable downloadable fonts on the web, which will usher in web typography at long last.

Weekly Trends and Language Statistics

7 The global structure of an HTML document

Introduction to the structure of an HTML document
HTML version information
The HTML element
The HEAD element
The TITLE element
The title attribute
Specifying meta data
The META element
Meta data profiles
The BODY element
Element identifiers: the id and class attributes
Block-level and inline elements
Grouping elements: the DIV and SPAN elements
Headings: The H1 , H2 , H3 , H4 , H5 , H6 elements
The ADDRESS element

7.1 Introduction to the structure of an HTML document

An HTML 4 document is composed of three parts:

a line containing HTML version information ,
a declarative header section (delimited by the HEAD element),
a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.

White space (spaces, newlines, tabs, and comments) may appear before or after each section. Sections 2 and 3 should be delimited by the HTML element.

Here's an example of a simple HTML document:

7.2 HTML version information

A valid HTML document declares what version of HTML is used in the document. The document type declaration names the document type definition (DTD) in use for the document (see [ISO8879] ).

HTML 4.01 specifies three DTDs, so authors must include one of the following document type declarations in their documents. The DTDs vary in the elements they support.

The HTML 4.01 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents. For documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation). For documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well. For documents that use this DTD, use this document type declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

The URI in each document type declaration allows user agents to download the DTD and any entity sets that are needed. The following (relative) URIs refer to DTDs and entity sets for HTML 4:

" strict.dtd " -- default strict DTD
" loose.dtd " -- loose DTD
" frameset.dtd " -- DTD for frameset documents
" HTMLlat1.ent " -- Latin-1 entities
" HTMLsymbol.ent " -- Symbol entities
" HTMLspecial.ent " -- Special entities

The binding between public identifiers and files can be specified using a catalog file following the format recommended by the Oasis Open Consortium (see [OASISOPEN] ). A sample catalog file for HTML 4.01 is included at the beginning of the section on SGML reference information for HTML. The last two letters of the declaration indicate the language of the DTD. For HTML, this is always English ("EN").

Note. As of the 24 December version of HTML 4.01, the HTML Working Group commits to the following policy:

Any changes to future HTML 4 DTDs will not invalidate documents that conform to the DTDs of the present specification. The HTML Working Group reserves the right to correct known bugs.
Software conforming to the DTDs of the present specification may ignore features of future HTML 4 DTDs that it does not recognize.

This means that in a document type declaration, authors may safely use a system identifier that refers to the latest version of an HTML 4 DTD. Authors may also choose to use a system identifier that refers to a specific (dated) version of an HTML 4 DTD when validation to that particular DTD is required. W3C will make every effort to make archival documents indefinitely available at their original address in their original form.

7.3 The HTML element

Start tag: optional , End tag: optional

Attribute definitions

Attributes defined elsewhere

lang ( language information ), dir ( text direction )

After document type declaration, the remainder of an HTML document is contained by the HTML element. Thus, a typical HTML document has this structure:

7.4 The document head

7.4.1 the head element.

The HEAD element contains information about the current document, such as its title, keywords that may be useful to search engines, and other data that is not considered document content. User agents do not generally render elements that appear in the HEAD as content. They may, however, make information in the HEAD available to users through other mechanisms.

7.4.2 The TITLE element

Start tag: required , End tag: required

Every HTML document must have a TITLE element in the HEAD section.

Authors should use the TITLE element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to Medieval Bee-Keeping" instead.

For reasons of accessibility, user agents must always make the content of the TITLE element available to users (including TITLE elements that occur in frames). The mechanism for doing so depends on the user agent (e.g., as a caption, spoken).

Titles may contain character entities (for accented characters, special characters, etc.), but may not contain other markup (including comments). Here is a sample document title:

7.4.3 The title attribute

Unlike the TITLE element, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements. Please consult an element's definition to verify that it supports this attribute.

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:

The title attribute has an additional role when used with the LINK element to designate an external style sheet. Please consult the section on links and style sheets for details.

Note. To improve the quality of speech synthesis for cases handled poorly by standard techniques, future versions of HTML may include an attribute for encoding phonemic and prosodic information.

7.4.4 Meta data

Note. The W3C Resource Description Framework (see [RDF10] ) became a W3C Recommendation in February 1999. RDF allows authors to specify machine-readable metadata about HTML documents and other network-accessible resources.

HTML lets authors specify meta data -- information about a document rather than document content -- in a variety of ways.

For example, to specify the author of a document, one may use the META element as follows:

The META element specifies a property (here "Author") and assigns a value to it (here "Dave Raggett").

This specification does not define a set of legal meta data properties. The meaning of a property and the set of legal values for that property should be defined in a reference lexicon called a profile . For example, a profile designed to help search engines index documents might define properties such as "author", "copyright", "keywords", etc.

Specifying meta data

In general, specifying meta data involves two steps:

From within a document, via the META element.
From outside a document, by linking to meta data via the LINK element (see the section on link types ).
Referring to a profile where the property and its legal values are defined. To designate a profile, use the profile attribute of the HEAD element.

Note that since a profile is defined for the HEAD element, the same profile applies to all META and LINK elements in the document head.

User agents are not required to support meta data mechanisms. For those that choose to support meta data, this specification does not define how meta data should be interpreted.

The META element

Start tag: required , End tag: forbidden

For the following attributes, the permitted values and their interpretation are profile dependent:

The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.

Each META element specifies a property/value pair. The name attribute identifies the property and the content attribute specifies the property's value.

For example, the following declaration sets a value for the Author property:

The lang attribute can be used with META to specify the language for the value of the content attribute. This enables speech synthesizers to apply language dependent pronunciation rules.

In this example, the author's name is declared to be French:

Note. The META element is a generic mechanism for specifying meta data. However, some HTML elements and attributes already handle certain pieces of meta data and may be used by authors instead of META to specify those pieces: the TITLE element, the ADDRESS element, the INS and DEL elements, the title attribute, and the cite attribute.

Note. When a property specified by a META element takes a value that is a URI , some authors prefer to specify the meta data via the LINK element. Thus, the following meta data declaration:

might also be written:

META and HTTP headers

The http-equiv attribute can be used in place of the name attribute and has a special significance when documents are retrieved via the Hypertext Transfer Protocol (HTTP). HTTP servers may use the property name specified by the http-equiv attribute to create an [RFC822] -style header in the HTTP response. Please see the HTTP specification ( [RFC2616] ) for details on valid HTTP headers.

The following sample META declaration:

will result in the HTTP header:

This can be used by caches to determine when to fetch a fresh copy of the associated document.

Note. Some user agents support the use of META to refresh the current page after a specified number of seconds, with the option of replacing it by a different URI. Authors should not use this technique to forward users to different pages, as this makes the page inaccessible to some users. Instead, automatic page forwarding should be done using server-side redirects.

META and search engines

A common use for META is to specify keywords that a search engine may use to improve the quality of search results. When several META elements provide language-dependent information about a document, search engines may filter on the lang attribute to display search results using the language preferences of the user. For example,

The effectiveness of search engines can also be increased by using the LINK element to specify links to translations of the document in other languages, links to versions of the document in other media (e.g., PDF), and, when the document is part of a collection, links to an appropriate starting point for browsing the collection.

Further help is provided in the section on helping search engines index your Web site .

META and PICS

This example illustrates how one can use a META declaration to include a PICS 1.1 label:

META and default information

The META element may be used to specify the default information for a document in the following instances:

The default scripting language .
The default style sheet language .
The document character encoding .

The following example specifies the character encoding for a document as being ISO-8859-5

Meta data profiles

As a globally unique name. User agents may be able to recognize the name (without actually retrieving the profile) and perform some activity based on known conventions for that profile. For instance, search engines could provide an interface for searching through catalogs of HTML documents, where these documents all use the same profile for representing catalog entries.
As a link. User agents may dereference the URI and perform some activity based on the actual definitions within the profile (e.g., authorize the usage of the profile within the current HTML document). This specification does not define formats for profiles.

This example refers to a hypothetical profile that defines useful properties for document indexing. The properties defined by this profile -- including "author", "copyright", "keywords", and "date" -- have their values set by subsequent META declarations.

As this specification is being written, it is common practice to use the date formats described in [RFC2616] , section 3.3. As these formats are relatively hard to process, we recommend that authors use the [ISO8601] date format. For more information, see the sections on the INS and DEL elements.

The scheme attribute allows authors to provide user agents more context for the correct interpretation of meta data. At times, such additional information may be critical, as when meta data may be specified in different formats. For example, an author might specify a date in the (ambiguous) format "10-9-97"; does this mean 9 October 1997 or 10 September 1997? The scheme attribute value "Month-Day-Year" would disambiguate this date value.

At other times, the scheme attribute may provide helpful but non-critical information to user agents.

For example, the following scheme declaration may help a user agent determine that the value of the "identifier" property is an ISBN code number:

Values for the scheme attribute depend on the property name and the associated profile .

Note. One sample profile is the Dublin Core (see [DCORE] ). This profile defines a set of recommended properties for electronic bibliographic descriptions, and is intended to promote interoperability among disparate description models.

7.5 The document body

7.5.1 the body element.

id , class ( document-wide identifiers )
title ( element title )
style ( inline style information )
bgcolor ( background color )
onload , onunload ( intrinsic events )
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup ( intrinsic events )

The body of a document contains the document's content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas where the content appears: text, images, colors, graphics, etc. For audio user agents, the same content may be spoken. Since style sheets are now the preferred way to specify a document's presentation, the presentational attributes of BODY have been deprecated .

DEPRECATED EXAMPLE: The following HTML fragment illustrates the use of the deprecated attributes. It sets the background color of the canvas to white, the text foreground color to black, and the color of hyperlinks to red initially, fuchsia when activated, and maroon once visited.

Using style sheets , the same effect could be accomplished as follows:

Using external (linked) style sheets gives you the flexibility to change the presentation without revising the source HTML document:

Framesets and HTML bodies. Documents that contain framesets replace the BODY element by the FRAMESET element. Please consult the section on frames for more information.

7.5.2 Element identifiers: the id and class attributes

The id attribute has several roles in HTML:

As a style sheet selector.
As a target anchor for hypertext links.
As a means to reference a particular element from a script .
As the name of a declared OBJECT element.
For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:

As a style sheet selector (when an author wishes to assign style information to a set of elements).
For general purpose processing by user agents.

In the following example , the SPAN element is used in conjunction with the id and class attributes to markup document messages. Messages appear in both English and French versions.

The following CSS style rules would tell visual user agents to display informational messages in green, warning messages in yellow, and error messages in red:

Note that the French "msg1" and the English "msg1" may not appear in the same document since they share the same id value. Authors may make further use of the id attribute to refine the presentation of individual messages, make them target anchors, etc.

Almost every HTML element may be assigned identifier and class information.

Suppose, for example, that we are writing a document about a programming language. The document is to include a number of preformatted examples. We use the PRE element to format the examples. We also assign a background color (green) to all instances of the PRE element belonging to the class "example".

By setting the id attribute for this example, we can (1) create a hyperlink to it and (2) override class style information with instance style information.

Note. The id attribute shares the same name space as the name attribute when used for anchor names. Please consult the section on anchors with id for more information.

7.5.3 Block-level and inline elements

Certain HTML elements that may appear in BODY are said to be "block-level" while others are "inline" (also known as "text level"). The distinction is founded on several notions:

Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.

The alteration of the traditional presentation idioms for block level and inline elements also has an impact on the bidirectional text algorithm. See the section on the effect of style sheets on bidirectionality for more information.

7.5.4 Grouping elements: the DIV and SPAN elements

align ( alignment )

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline ( SPAN ) or block-level ( DIV ) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets , the lang attribute, etc., to tailor HTML to their own needs and tastes.

Suppose, for example, that we wanted to generate an HTML document based on a database of client information. Since HTML does not include elements that identify objects such as "client", "telephone number", "email address", etc., we use DIV and SPAN to achieve the desired structural and presentational effects. We might use the TABLE element as follows to structure the information:

Later, we may easily add style sheet declarations to fine tune the presentation of these database entries.

For another example of usage, please consult the example in the section on the class and id attributes .

Visual user agents generally place a line break before and after DIV elements, for instance:

which is typically rendered as:

7.5.5 Headings: The H1 , H2 , H3 , H4 , H5 , H6 elements

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

The following example shows how to use the DIV element to associate a heading with the document section that follows it. Doing so allows you to define a style for the section (color the background, set the font, etc.) with style sheets.

This structure may be decorated with style information such as:

Numbered sections and references HTML does not itself cause section numbers to be generated from headings. This facility may be offered by user agents, however. Soon, style sheet languages such as CSS will allow authors to control the generation of section numbers (handy for forward references in printed documents, as in "See section 7.2").

Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.

7.5.6 The ADDRESS element

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

For example, a page at the W3C Web site related to HTML might include the following contact information:

Election 2024
Entertainment
Newsletters
Photography
AP Buyline Personal Finance
AP Buyline Shopping
Press Releases
Israel-Hamas War
Russia-Ukraine War
Global elections
Asia Pacific
Latin America
Middle East
Election results
Google trends
AP & Elections
U.S. Open Tennis
Paralympic Games
College football
Auto Racing
Movie reviews
Book reviews
Financial Markets
Business Highlights
Financial wellness
Artificial Intelligence
Social Media

A lightning strike damages Rome’s ancient Constantine Arch

Workers inspect the 315 A.D Arch of Constantine, near the Colosseum, in Rome, Wednesday, Sept. 4, 2024, after lightning struck it during a storm Tuesday, Sept. 3, loosening fragments from the ancient Roman structure. (AP Photo/Andrew Medichini)

A tourist takes photos of the 315 A.D Arch of Constantine, near the Colosseum, in Rome, Wednesday, Sept. 4, 2024, as workers on site with cranes gather up fragments and secure broken areas of the arch after lightning struck it during a storm Tuesday, Sept. 3, loosening fragments from the ancient Roman structure. (AP Photo/Andrew Medichini)

Workers on site with cranes gather up fragments and secure broken areas of the 315 A.D Arch of Constantine, near the Colosseum, in Rome, Wednesday, Sept. 4, 2024, after lightning struck it during a storm Tuesday, Sept. 3, loosening fragments from the ancient Roman structure. (AP Photo/Andrew Medichini)

FILE -A view the Arch of Constantine, and the Colosseum, background right, on the occasion of the unveiling of new lightning, in Rome, July 17, 2020. (AP Photo/Riccardo De Luca, File)

Copy Link copied

ROME (AP) — Workers mounted a crane Wednesday to secure Rome’s Constantine Arch near the Colosseum after a lightning strike loosened fragments from the ancient structure.

A violent thunder and lightning storm that felled trees and flooded streets in the Italian capital damaged the honorary arch late Tuesday afternoon.

Fragments of white marble were gathered and secured by workers for the Colosseum Archeological Park as soon as the storm cleared, officials said. The extent of the damage was being evaluated.

“The recovery work by technicians was timely. Our workers arrived immediately after the lightning strike. All of the fragments were recovered and secured,’’ the park said in a statement.

Tourists visiting the site Wednesday found some stray fragments that they turned over to park workers out of concern they might have fallen from the arch.

“It is kind of surreal that we found pieces,″ said Jana Renfro, a 69-year-old tourist from the U.S. state of Indiana, who said found the fragments about 12 feet (three meters) from the base of the monument.

The group’s tour guide, Serena Giuliani, praised them for turning over the found pieces, saying it showed “great sensitivity for Roman antiquities.”

The honorary arch, more than 20 meters (nearly 70 feet) in height, was erected in A.D. 315 to celebrate the victory of Emperor Constantine over Maxentius following the battle at Milvian Bridge.

HTML Tutorial

Html graphics, html examples, html references, html layout elements and techniques.

Websites often display content in multiple columns (like a magazine or a newspaper).

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

- Defines a header for a document or a section - Defines a set of navigation links - Defines a section in a document - Defines an independent, self-contained content - Defines content aside from the content (like a sidebar) - Defines a footer for a document or a section - Defines additional details that the user can open and close on demand - Defines a heading for the element

You can read more about semantic elements in our chapter.

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

CSS framework
CSS float property
CSS flexbox

CSS Frameworks

If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap .

Ever heard about W3Schools Spaces ? Here you can create your website from scratch or use a template, and host it for free.

* no credit card required

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Learn more about flexbox in our CSS Flexbox chapter.

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Learn more about CSS grids in our CSS Grid Intro chapter.

COLOR PICKER

Contact Sales

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

Report Error

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

De Novo Designed Cell-Penetrating Peptide Self-Assembly Featuring Distinctive Tertiary Structure

PDB DOI: https://doi.org/10.2210/pdb9J7T/pdb
Classification: DE NOVO PROTEIN
Organism(s): synthetic construct
Mutation(s): No
Deposited: 2024-08-19 Released: 2024-09-04
Deposition Author(s): Park, J. , Hyun, S. , Lee, S.J.
Funding Organization(s): National Research Foundation (NRF, Korea)

Experimental Data Snapshot

Method: X-RAY DIFFRACTION
Resolution: 1.92 Å
R-Value Free: 0.272
R-Value Work: 0.252
R-Value Observed: 0.253

Starting Model: experimental View more details

wwPDB Validation 3D Report Full Report

(2024) ACS Omega 9 : 32991-32999

PubMed : 39100342 Search on PubMed Search on PubMed Central
DOI: https://doi.org/10.1021/acsomega.4c04004
Primary Citation of Related Structures: 9J7T

Recent attention has focused on the de novo design of proteins, paralleling advancements in biopharmaceuticals. Achieving protein designs with both structure and function poses a significant challenge, particularly considering the importance of quaternary structures, such as oligomers, in protein function. The cell penetration properties of peptides are of particular interest as they involve the penetration of large molecules into cells. We previously suggested a link between the oligomerization propensity of amphipathic peptides and their cell penetration abilities, yet concrete evidence at cellular-relevant concentrations was lacking due to oligomers' instability. In this study, we sought to characterize oligomerization states using various techniques, including X-ray crystallography, acceptor photobleaching Förster resonance energy transfer (FRET), native mass spectrometry (MS), and differential scanning calorimetry (DSC), while exploring the function related to oligomer status. X-ray crystallography revealed the atomic structures of oligomers formed by LK-3, a bis-disulfide bridged dimer with amino acid sequence LKKLCLKLKKLCKLAG, and its derivatives, highlighting the formation of hexamers, specifically the trimer of dimers, which exhibited a stable hydrophobic core. FRET experiments showed that LK-3 oligomer formation was associated with cell penetration. Native MS confirmed higher-order oligomers of LK-3, while an intriguing finding was the enhanced cell-penetrating capability of a 1:1 mixture of l/d-peptide dimers compared to pure enantiomers. DSC analysis supported the notion that this enantiomeric mixture promotes the formation of functional oligomers, crucial for cell penetration. In conclusion, our study provides direct evidence that amphipathic peptide LK-3 forms oligomers at low nanomolar concentrations, underscoring their significance in cell penetration behavior.

College of Pharmacy, Chungbuk National University, Cheongju 28160, Korea.

Explore in 3D : Structure | Sequence Annotations | Electron Density | Validation Report | Ligand Interaction (GOL)

Biological assembly 1 assigned by authors and generated by PISA (software)

Biological assembly 2 assigned by authors and generated by PISA (software)

Biological assembly 3 assigned by authors and generated by PISA (software)

Biological assembly 4 assigned by authors and generated by PISA (software)

Macromolecule Content

Total Structure Weight: 41.09 kDa
Atom Count: 2,958
Modelled Residue Count: 355
Deposited Residue Count: 360
Unique protein chains: 1

Find similar proteins by: Sequence | 3D Structure


Molecule	Chains	Sequence Length	Organism	Details	Image
LKa14	, , , , , , , , , , , , , , , , , , , , , , , Less	15		: 0

Sequence Clusters

Ligands 1 Unique
ID	Chains	Name / Formula / InChI Key	2D Diagram	3D Interactions
	Y [auth D], Z [auth J]	C H O PEDCQBHIVMGVHV-UHFFFAOYSA-N		Interactions Interactions & Density

Experimental Data

Space Group: P 1 2 1 1

Length ( Å )	Angle ( ˚ )
a = 35.2	α = 90
b = 99.73	β = 103.73
c = 67.51	γ = 90

Software Name	Purpose
PHENIX	refinement
XDS	data scaling
XDS	data reduction
PHENIX	phasing

Structure Validation

View Full Validation Report

Deposition Data

Released Date: 2024-09-04

Funding Organization	Location	Grant Number
National Research Foundation (NRF, Korea)	Korea, Republic Of	--

Revision History (Full details and data files)

Version 1.0: 2024-09-04 Type: Initial release
Publications
Usage & Privacy
Documentation
Website FAQ
Service Status

RCSB PDB ( citation ) is hosted by

RCSB PDB is a member of the

RCSB Partners
Nucleic Acid Knowledgebase
wwPDB Partners

RCSB PDB Core Operations are funded by the U.S. National Science Foundation (DBI-2321666), the US Department of Energy (DE-SC0019749), and the National Cancer Institute , National Institute of Allergy and Infectious Diseases , and National Institute of General Medical Sciences of the National Institutes of Health under grant R01GM133198.

IMAGES

PPT
Structure of an HTML Page
Basic HTML Structure
Basic html structure
PPT
What is HTML? How does it work? This guide will walk you right through

VIDEO

Basic Structure of HTML
Basic Structure of HTML. please Like Comment and Subscribe for more #codesangle #html #htmlshorts
Structure presentation of TYPO3 Teams
LARGE STRUCTURE MODEL PRESENTATION PART-1 IN REVIT IN HINDI
#HTML Tutorial: #Basic Structure of a Website #| Web Development Tutorial👾👆☠️
LARGE STRUCTURE MODEL PRESENTATION PART-2 IN REVIT IN HINDI

COMMENTS

HTML Structure and Presentation
HTML Structure vs. HTML Presentation. The composition of a webpage could be regarded as a mixture of the following four elements: Content is the general term used for all the browser-displayed information elements—such as text, audio, still images, animation, video, multimedia, and files belonging to web pages. ...
HTML: HyperText Markup Language
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript). "Hypertext" refers to links that connect web pages to one another ...
Introduction to HTML
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is ...
HTML basics
HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
HTML for Beginners
The basic structure of an HTML form involves several key elements: <form>  </form> The <form> tag marks the beginning and end of your form. It acts as a container for various form elements. It commonly houses label, input types, textarea, and button tags.
HTML Introduction
HTML, or HyperText Markup Language is the standard markup language used to create web pages. It is a combination of Hypertext, and Markup language. The Hypertext defines the link between web pages, and Markup is used to define the text document within tags to structure the web pages. This language is used to annotate text so that machines can ...
An Introduction to HTML for Beginners
An Introduction to HTML for Beginners. HTML, which stands for HyperText Markup Language, serves as the foundation of web development. It enables you to create interactive web pages, structure content, and effectively communicate your message. In this guide, we'll explore HTML comprehensively, addressing essential questions to provide a strong ...
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 ...
Document structure
For HTML, all you need is <!DOCTYPE html>. This may look like an HTML element, but it isn't. It's a special kind of node called "doctype". The doctype tells the browser to use standards mode. If omitted, browsers will use a different rendering mode known as quirks mode. Including the doctype helps prevent quirks mode.
Document and website structure
Document and website structure. In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). This article looks into how to plan a basic website ...
HTML Tutorial
Learn the basics of HTML in a fun and engaging video tutorial. Templates. We have created a bunch of responsive website templates you can use - for free! Web Hosting. Host your own website, and share it to the world with W3Schools Spaces. Create a Server. Create your own server using Python, PHP, React.js, Node.js, Java, C#, etc. ...
Overview of HTML
Overview of HTML. HyperText Markup Language, or HTML, is the standard markup language for describing the structure of documents displayed on the web. HTML consists of a series of elements and attributes which are used to mark up all the components of a document to structure it in a meaningful way. HTML documents are basically a tree of nodes ...
HTML
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.
The Structure of an HTML Document: A Beginner's Guide
Understanding the structure of an HTML document is crucial for any aspiring web developer. It lays the foundation upon which more complex web applications and websites are built. ... Semantic HTML uses HTML tags that give meaning to the web content (like , , , , etc.), rather than solely for presentation. It is important because it helps with ...
The Structure of an HTML Document
The structure of an HTML document is the foundation of any web page. It determines how the content of the page is organized and displayed, and it's important to understand how it works in order to create professional-quality websites. In this article, we looked at the basic structure of an HTML document, including the head and body sections ...
HTML Tutorial
HTML is the language of the web, used by billions of websites to create the pages you see every day. Want to learn HTML from scratch and make your web pages? This tutorial is for you! In this HTML tutorial, you will learn how to use HTML to create and style web pages.You will start with HTML fundamentals, such as basic HTML tags and their attributes, classes, layout, and responsiveness.
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.
HTML Page Elements
The main role of HTML is to define the structure and layout of a web page by using a set of tags or elements. These tags represent different types of content such as headings, paragraphs, images, links, forms, and tables. ... and presentation of elements on a webpage. It ensures that everything displays as intended and that there's appropriate ...
HTML Structure and Presentation
CSS is a presentation language. Its purpose is to provide a web browser with styling instructions for the HTML. CSS can be included directly in the HTML tags, in the head section of the HTML, or in an entirely separate document (CSS style sheet). CSS is a very powerful tool, enabling very complex and unique designs to be made possible.
HTML Course Structure of an HTML Document
An HTML Document is mainly divided into two parts: HEAD: This contains the information about the HTML document including the Title of the page, version of HTML, Meta Data, etc. BODY: This contains everything you want to display on the Web Page. HTML Document Structure. Example: To demonstrate basic HTML document structure.
HTML Structure :: Introduction to Web Dev
Structure Rules. When it comes to laying out the overarching structure of an HTML file, a programmer should follow 5 rules: Every HTML file needs a DOCTYPE tag, specifying the HTML version used. When using the current version of HTML, the DOCTYPE tag is simple to remember as it is: <!DOCTYPE html> . This is one of few tags that does not require ...
HTML BASICS Slides Presentation
HTML BASICS: This slide presentation shows basics of HTML. w3resource. HTML BASICS Slides Presentation Last update on August 19 2022 21:50:26 (UTC/GMT +8 hours) ... (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 ...
7 The global structure of an HTML document
7.1 Introduction to the structure of an HTML document. An HTML 4 document is composed of three parts: a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element. White space (spaces, newlines, tabs, and comments) may appear before or after each section.
9BKA: Crystal structure of Rid family protein PSPTO3006
Macromolecule Content. Total Structure Weight: 15.13 kDa ; Atom Count: 1,084 ; Modelled Residue Count: 132 ; Deposited Residue Count: 144 ; Unique protein chains: 1
A lightning strike damages Rome's ancient Constantine Arch
A tourist takes photos of the 315 A.D Arch of Constantine, near the Colosseum, in Rome, Wednesday, Sept. 4, 2024, as workers on site with cranes gather up fragments and secure broken areas of the arch after lightning struck it during a storm Tuesday, Sept. 3, loosening fragments from the ancient Roman structure. (AP Photo/Andrew Medichini)
HTML Layout Elements and Techniques
HTML has several semantic elements that define the different parts of a web page: <header> - Defines a header for a document or a section. <nav> - Defines a set of navigation links. <section> - Defines a section in a document. <article> - Defines an independent, self-contained content. <aside> - Defines content aside from the content (like a ...
City of Tallahassee to host ribbon cutting for First Florida Log Cabin
According to project manager Bob Knight, the logs will be going up as the final part of the project, which will take place at the two community build days happening Wednesday and Thursday night.
RCSB PDB
Recent attention has focused on the de novo design of proteins, paralleling advancements in biopharmaceuticals. Achieving protein designs with both structure and function poses a significant challenge, particularly considering the importance of quaternary structures, such as oligomers, in protein function.

HTML Structure and Presentation

GCSE Computer Science

A-Level Computer Science

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

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

HTML Attributes

HTML Structure vs. HTML Presentation

Further Readings:

Document and website structure

Basic sections of a document

HTML for structuring content

Active learning: exploring the code for our example

HTML layout elements in more detail

Non-semantic wrappers

Line breaks and horizontal rules

<br>: the line break element

<hr>: the thematic break element

Planning a simple website

Active learning: create your own sitemap

Overview of HTML

Non-replaced elements

Replaced and void elements

Appearance of elements

Element, attributes, and JavaScript

Check your understanding

Participants 1026

The Structure of an HTML Document

Yasin Cakal

Basic Structure of an HTML Document

Head Section

Body Section

Elements and Attributes

Block-Level and Inline Elements

What is the root element of an HTML document?

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

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

What is the purpose of HTML attributes?

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

Learn HTML Basics: Introduction to HTML Structure & Elements

Table of Contents

Using Headings

Choosing the Right Heading Level

Creating a Basic Link

Linking to Email Addresses

Linking to Anchors

Unordered Lists

Ordered Lists

Nested Lists

Italic Text

Underlined Text

Strikethrough Text

Superscript and Subscript Text

Creating a Basic Table

Table Caption and Header Groups

Embedding Images

Embedding Videos

Embedding Audio

Form Structure

Input Fields

Checkboxes and Radio Buttons

Semantic Elements

Semantic Headings

Semantic Links

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

Q2: Can I create a website using only HTML?

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

Q4: Can I learn HTML on my own?

Q5: Is HTML a programming language?

Q6: How long does it take to learn HTML?

Subscribe to my Newsletter

Create Draggable Modal Using HTML, CSS, and JavaScript

Create Sticky Bottom Navbar using HTML and CSS

How to Create a Dropdown List with HTML and CSS

10 Modern Logo Hover Effects with HTML and CSS

Create Alert Ticker using HTML, CSS, and JavaScript

Create Animated Logout Button Using HTML and CSS

Create Fortnite Buttons Using HTML and CSS - Step-by-Step Guide

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

How to Create a Trending Animated Button Using HTML and CSS

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