Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. HTML 5 is the fifth and current major version of the HTML standard, and subsumes XHTML.
HTML describes the structure of Web pages using markup. HTML elements, represented by tags, are the building blocks of HTML pages. These tags label pieces of content such as "heading", "paragraph", "table", and so on. Web browsers do not display the HTML tags, but use them to render the content of the page.
Although it is not exhaustive, the content below describes some basic components of HTML structure.
An HTML element is an individual component of an HTML document or web page. HTML is composed of a tree of HTML nodes, such as text nodes. Many HTML nodes represent semantics, or meaning. For example, the <title> node represents the title of the document.
<title>HTML Reference</title>
HTML tags are element names surrounded by angle brackets:
<tagname>Content Goes Here</tagname>
HTML tags most commonly come in pairs like <h1> and </h1>, although some represent empty elements and so are unpaired, for example <img>. The first tag in such a pair is the start tag, and the second is the end tag. They are also called opening tags and closing tags.
All HTML elements can have attributes which provide additional information about an element. They are always specified in the start tag and usually come in name/value pairs like: name="value".
For example, links are defined with the <a> tag. The link address is specified in the href attribute:
<a href="https://www.w3schools.com">This is a link</a>
Websites often display content in multiple columns (like a magazine or newspaper). HTML5 offers new semantic elements that define the different parts of a web page:
<header>Defines a header for a document or a section<nav>Defines a container for navigation links<section>Defines a section in a document<article>Defines an independent self-contained article<aside>Defines content aside from the content (like a sidebar)<footer>Defines a footer for a document or a section<details>Defines additional details<summary>Defines a heading for the<details>element
There are five different ways to create multicolumn layouts. Each way has its pros and cons:
HTML Tables
The purpose of the <table> element is to display tabular data. So, do not use tables for your page layout! They will bring a mess into your code.
CSS Frameworks
If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.
CSS Floats
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.
CSS Flexbox
Flexbox is a new layout mode in CSS3. Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier.
CSS Grid
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. Disadvantages: Does not work in IE nor in Edge 15 and earlier.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- The
<!DOCTYPE html>declaration defines this document to be HTML5 - The
<html>element is the root element of an HTML page - The
<head>element contains meta information about the document - The
<title>element specifies a title for the document - The
<body>element contains the visible page content - The
<h1>element defines a large heading - The
<p>element defines a paragraph
The content for this page was sampled from HTML articles on W3Schools.com and Wikipedia.