📄️ Markup Language
HTML (HyperText Markup Language) is the standard markup language used to create and structure content on the web. It defines the elements of a web page using tags for content like headings, lists, images, and links. HTML is not a programming language—it doesn’t perform logic or calculations—but rather a markup language used to describe the structure of a web page. Everything viewable in a browser is built with HTML. The HTML may be written directly as in a traditional website or generated by a framework like React. To write a web application that generates HTML (as in React), we need to understand how HTML structures a webpage.
📄️ Anatomy of HTML tags
We create elements of the page with tags. Html tags are enclosed in angle brackets ` and contain lowercase letters. Most html tags have an opening and a closing `tag.
📄️ Tools of the Trade
Web programs and web pages are created and modified with a text editor but are viewed - or run - in a browser. To create and modify our web programs, we'll use a popular IDE - VSCode. VSCode has features for many programming languages.
📄️ HTML Page Structure
There are required elements for every HTML page. We refer to these required elements as the boilerplate.
📄️ Headings
In HTML, headings (` through `) are used to organize and structure content hierarchically, similar to an outline. The levels provide meaning, not just formatting, to the content, to help users, search engines and screen readers understand the flow of information.
📄️ Paragraphs and Breaks
What is a paragraph?
📄️ Lists
You may think lists are not a big deal. However, lists are how most all sets are tagged in a web page. Not only bulleted items and numbered steps, but also things like the list of options in the navigation bar. HTML includes three types of lists: ordered, unordered and description lists.
📄️ Block vs Inline
HTML elements all have a default display value and most are either block or inline.
📄️ Text Decoration
You have just learned about display properties block and inline. Elements that are block take up the full width of the line so the next element starts on a new line below. On this page we discuss several formatting tags that are inline. You wouldn't normally want some text that you mark as bold or italic to take up the full width. You likely want the text to remain inline with the surrounding text. The text decoration tags described on this page have display property inline.
📄️ Links & Images
Links
📄️ Characters & Icons
Character entities
📄️ Grouping Elements
Frequently, we want to group multiple HTML elements so that we can treat them as a section. For example, we may want to put the company logo, a heading and a background image together to for a header for the page. The same for a column or a footer. The most common way to group elements is with tags.
📄️ Forms
We have learned a good bit about how to display text and images on a web page. Now we want to learn how a web page can take input. How does a web page accept input from the user? This is the role of the element. The `` element in HTML is used to collect user input and submit that data to a server or handler for processing.