Projects People Resources Semesters Blog About
💻

HTML

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

When an webpage a tree is generated of all HTML elements present. This tree is called the DOM (the Document Object Model) and its structure outlines how the webpage will look and what elements are parents/children of each other. Whenever you try to reference and modify a certain element the DOM is searched to find the element that’s being searched for.

For writing plain HTML the DOM tree isn’t used much, but for styling elements using CSS or modifying HTML through JavaScript code 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>

Basic HTML Tags:

<h1>-<h5> - Headers where the 1-5 describe different heading sizes

<p> - Paragraph element for placing text of a webpage

<div> - Divider element for breaking up different groups of content

<ol>/<ul> - Ordered and Unordered list elements

<li> - List items, nested inside of <ol> or <ul> elements

<a> - Link elements to other pages or websites

<img> - Image elements

image

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 to specify what styling to use

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

Classes can be more modular especially if multiple elements of a webpage use the same styling while id’s are more unique for each element.

What is <head>?

Make sure all HTML elements are between the <html> & </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. Other elements that go inside the <head> are:

<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 stylesheet)

<meta> - Is typically used to specify the character set, page description, keywords, author of the document, 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 it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

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:

image

Additional Resources

There’s a lot that goes into HTML and this only scratches the surface on how it works, but it’s 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.