Home > html

HTML: HyperText Markup Language

HyperText Markup Language (HTML) 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, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

[Source: https://developer.mozilla.org/en-US/docs/Web/HTML]

Element Categories

Elements

HTML Elements are the basic building blocks of any web page.

Document

Document elements describe the high-level parts of the page. The <html> element is the root element of the page. Non-visible elements like <style> and <script> are defined in the <head> section. All viewable content is defined in the <body> section.

Section

Section elements were introduced in HTML5 to help the developer semantically describe the basic parts of a document. The <main> is where the primary information of the page should live. <main> can optionally be surrounded by <header> and <footer>.

Content

Content elements describe the basic hierarchy of the page. Think of them as elements that might appear in a Table of Contents.

<h1> is the primary heading. There should only be one per page. <h2> sections are subtopics. If you need to further subdivide the sections, use <h3> - <h6>.

Action

Action elements are the primary way that users interact with the page. <a> is for creating hyperlinks. <button> provides a larger, more obvious enticement for the user to interact with the page.

List

List elements allow you to present the user with a collection of <li> list items. <ul> is an unordered list, or bullet list. <ol> is an ordered list, or numbered list.

Form

Form elements allow the user to submit information, upload files, and search. HTML5 introduced a number of new <input> types, like <type="email">, <type="range">, and <type="date">.

Be sure to use the <label> element to associate the text with the <input> field. Similarly, use an associated <output> field to display calculated output.

Table

Table elements are ideal for displaying spreadsheet-like information. If your data can be logically grouped by columns, rows, or both, use a <table>.

Semantics

Semantic elements should be used to describe or clarify the meaning of the text. The way the text appears is far less important than providing the meaning or significance of the text.

Editing

Editing elements provide visual indicators for the changes made to the document. Use <mark> to highlight changes. Use <del> to indicate deleted text.

Graphics

Graphic elements show non-text information. Use <img> to display raster or photographic images. <picture> and <source> are modern additions to HTML that give the developer fine-grained control for providing a list of potential images, each one optimized for a specific viewport size and resolution.

Use <svg> to display (as the name implies) Scalable Vector Graphics – things like icons and charts that automatically scale to the proper size for the device they are being viewed on.

Media

Media elements allow you to add <audio> and <video> to the page.