M1 Introduction to HTML

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> is the document type declaration. This tells the browser that this document is an HTML document.
• 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.

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.