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.
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.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here...
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
<a> - Link elements to other pages or websites
<img> - Image elements
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
id to specify what styling to use
<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.
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.
<head> element is a container for metadata about the document. Metadata is information about the webpage itself. Other elements that go inside the
<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 either contains script statements, or it points to an external script file through the
<html> <head> <title>Page Title</title> </head> <body> <h1> My First Heading </h1> <p> My first paragraph. </p> </body> </html>
Will result in:
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.