📊 Table of Contents

📊 Table of Contents
You’ve probably heard of it before...
🧰 The DOM
📦 What is an HTML Element?
🧣 Element Attributes
What is <head>?
Scripts Inside HTML
HTML Structure
Additional Resources

You’ve probably heard of it before...

HTML stands for Hypertext Markup Language and is the basis for every website on the internet. The foundations of HTML are rooted in XML: a format and specification for documents allowing them to be both human and machine readable.

HTML consists of a series of elements and describes the structure of a web page. All the elements tell the browser how to display the content. Each element label that piece of content as a “heading”, “paragraph”, “link” etc.

🧰 The DOM

For every webpage, a tree of HTML elements is generated. This tree is called the DOM (Document Object Model), and its structure outlines how the webpage will look and what elements are parents/children/siblings of each other. Whenever you try to reference and modify a certain element, the DOM is searched to find the desired element.

For writing plain HTML, the DOM tree isn’t used much. But, for styling elements with CSS or modifying HTML through JavaScript, the DOM structure is crucial.

📦 What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

Here are some basic HTML Tags:

<h1>, …, <h6> - Headers, where the 1-6 signify different heading levels/sizes
<p> - Paragraph for placing text of a webpage
<div> - Divider element for breaking up different groups of content
<ol>/<ul> - Ordered (123, abc, etc) and Unordered (bullet points) list elements
<li> - List items, nested inside of <ol> or <ul> elements
<a> - Link elements to other pages or websites
<img> - Image elements

🧣 Element Attributes

Inside each HTML element, various information can be stored. Each element may have its own set of attributes that can be utilized and can be read about in its own documentation. The two most common attributes are class and id. These are often used to target specific elements for styling with CSS. More resources:

CSS

Ex: <div class=”containter” id=”nav”>

Classes are often modular, especially if multiple elements of a webpage use the same styling (such as a button), while id’s are unique for each element.

💡

Each element can have any number of classes but only one id. For example:

<button class="button button--large blue"
        id="checkout-button"
        <!-- other attributes as necessary -->>
  Checkout
</button>

What is `<head>`?

Make sure all HTML elements are between the <html> and </html> tags. This way the browser is able to be more efficient and interpret the elements easier.

The <head> element is a container for metadata about the document. Metadata is information about the webpage itself. Elements that go inside the <head> include:

<title> - Defines the title of the element (the name for the tab at the top of the browser)
<style> - Defines style information for an HTML page (styling can be read about more in the
CSS
page)
<link> - Defines the relationship between the current document and an external resource (usually a CSS stylesheet: .css file)
<meta> - Typically used to specify the character set, page description, document author, info for social media previews, and viewport settings.

Scripts Inside HTML

With HTML being very versatile and describing the structure of a webpage, there’s a lot that can be done without the need of external files. The use of the <script> element allows client-side JavaScript to be written inside an HTML file.

The <script> element either contains script statements or points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic content changes.

HTML Structure

This code:

<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<h1>
			My First Heading
		</h1>
		<p>
			My first paragraph.
		</p>
	</body>
</html>

Will result in:

Additional Resources

There’s a lot that goes into HTML and this only scratches the surface of how it works. It is, however, a good start to creating a project. The next step is learning how to style it to have a modern design and implement mock-ups.

HTML Tutorial

CSS

HTML