M1 Introduction to HTML
Contents
HTML
HTML?
HTML, which stands for HyperText Markup Language, is the standard language used to create webpages. It describes the structure and content of a webpage. HTML uses a system of tags and attributes to define elements on the page. These elements can be things like headings, paragraphs, links, images, lists, tables, forms, and many more. Each of these elements has a specific tag that describes what it is and helps the browser know how to display it.
Here's a very basic example:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Image will go here
In this example:
<!DOCTYPE html>The page begins with a DOCTYPE declaration. This is a mandatory part of a web page, and it tells the browser what version of HTML to use when rendering your page. In this case, the browser should use HTML 5.- The
<html>tag is the root of an HTML document. - The
<head>tag contains meta-information about the document. This can include the title, character set declarations, CSS style definitions, and more. - The
<title>tag is the title of the document and is displayed in the browser's title bar or tab. - The
<body>tag contains the content of the document, such as text, hyperlinks, images, tables, lists, etc. When you visit a website, the content you see is rendered in the body. - The
<h1>tag defines a top-level heading, and the<p>tag defines a paragraph.
In essence, HTML gives the webpage its basic structure and content; without it, a webpage can't exist.
You can view a web page's source code in your browser; in Firefox, the keyboard shortcut is Ctrl-U (or Command-U), and in Chrome, it is Alt-Ctrl-U (or Option-Command-U).
Tags
Tags in HTML are special words or symbols enclosed in angle brackets (< >) that define the structure and formatting of elements within a web page. They act as instructions to the web browser on how to display and interpret the content. Opening tags, such as <tagname>, mark the beginning of an element, while closing tags, like </tagname>, denote the end. Tags are like containers that hold different types of content, such as text, images, links, or other elements, and they play a crucial role in creating the structure and appearance of a webpage.
Here are some of the most common HTML tags you will encounter. Get to know these well. For more information on how to use a given tag, MDN docs are an incredible resource.
| Tag | Description |
|---|---|
<html>
|
Defines the root element of an HTML document. |
<head>
|
Contains metadata and information about the HTML document. (docs) |
<title>
|
Sets the title of the document, displayed in the browser's title bar or tab. (docs) |
<body>
|
Represents the main content of the HTML document. |
<h1> to <h6>
|
Defines headings of different levels, from the most important (<h1>) to the least (<h6>).
|
<p>
|
Represents a paragraph of text. |
<a>
|
Creates a hyperlink to another web page, file, or a specific location within the same page. |
<img>
|
Inserts an image into the HTML document. |
<ul>
|
Represents an unordered list (a bulleted list). |
<ol>
|
Represents an ordered list (a numbered list). |
<li>
|
Defines an item in a list (<ul> or <ol>).
|
<table>
|
Represents tabular data organized into rows and columns. |
<tr>
|
Defines a row within a table. |
<td>
|
Defines a cell within a table row (<tr>).
|
<th>
|
Defines a header cell within a table row (<tr>).
|
<div>
|
Defines a division or a container for other elements. |
<span>
|
Defines an inline container for a small section of HTML. |
<form>
|
Creates an interactive form for user input. |
<input>
|
Creates an input field for user data entry. |
<button>
|
Creates a clickable button. |
<textarea>
|
Creates a multiline text input field. |
Built-in Functionality
While HTML primarily focuses on structure and content, some HTML tags come with built-in functionality that extends beyond that. These tags incorporate specific behaviors or interactivity into the elements they define. For example, the <a> tag creates hyperlinks, allowing users to navigate to different web pages or sections within the same page. The <form> tag enables the creation of interactive forms to gather user input, and the <input> tag provides various types of input fields like text boxes or checkboxes.
To learn about less common tags with fun built-in functionality, see the optional reading, HTML Extended. I also encourage you to spend some time exploring MDN docs.
Default Styling
When rendering HTML documents, web browsers apply default styles to each HTML element. These default styles determine how the elements are displayed visually, such as their font, color, size, spacing, and positioning. However, it's important to note that default styles may vary slightly between different browsers.
Browsers have their own predefined stylesheets, often referred to as user agent stylesheets, which dictate the initial appearance of HTML elements. This means that even without explicitly applying any styles, elements will still have some visual presentation based on these default styles.
See [M1 Introduction to CSS|Introduction to CSS] for a guide to styling elements.
Nodes
Where a tag is a syntax used in HTML to define elements, a node is a conceptual representation of an element within the Document Object Model (DOM) hierarchy. In simpler terms, a tag is the markup language used to define an element, whereas a node is an object that represents that element within the structured model of the HTML document.
Nodes form a hierarchical structure known as the Document Object Model (DOM). The DOM represents the HTML document as a tree-like structure, where each node has a relationship with its parent, children, and siblings. The topmost node in the DOM is the document node, representing the entire HTML document.
Here are the main types of nodes commonly encountered in HTML:
Element Nodes
These nodes represent HTML elements and are the most common type. They correspond to the opening and closing tags of an HTML element. For example, <div>...</div>, <p>...</p>, <h1>...</h1> are all element nodes. Element nodes can contain child nodes, such as other elements, text nodes, or comment nodes.
Text Nodes
Text nodes represent the textual content within an HTML element. They can contain plain text, including spaces, line breaks, or any other characters. For instance, in the element
<p>Hello, <strong>world!</strong></p>
the text node would contain "Hello," and "world!".
Attribute Nodes
These nodes represent the attributes of an HTML element. An element can have multiple attributes like id, class, src, etc. Attribute nodes contain the name and value of the attribute. For example, in the element
<img src="image.jpg" alt="An image" />
the `src` and `alt` attributes would be represented as attribute nodes.
Comment Nodes
Comment nodes represent HTML comments within the document. They are used to add explanatory or descriptive notes that are not displayed in the rendered output. Comment nodes start with <!--and end with -->. For example:
<!-- This is a comment -->
The High School Analogy
In more ways than not, HTML can be thought of as a markup language for five-paragraph essays that you wrote in history class in high school. <blockquote> is used to denote long quotations; <h1> through <h6> denote the outline; <p> denotes new paragraphs; <figure> and <figcaption> represent exhibits; <section> could represent chapters if you were writing a longer report; and so on.
Take home message: HTML defines the content of your page. Use it to its full ability.
