As we have heard, the internet is made up of a stupid amount of text documents that are all linked together. This linkage, or hyper-linkage, creates the web that we navigate the internet on. When we engage with the internet, we are essentially reading these text documents via a web browser, like Chrome or Safari. Browsers are software that opens text files and renders the content for us to read, view and interact with. The text files that the browsers read are called HTML, HyperText Markup Language. This page you are reading right now is HTML. HTML is nothing more than a document of plain text with the file extension .html
HTML outlines the structure of the content on a web page. HTML outlines the order of content elements, which elements come first and last, the order of things on the page. HTML doesn’t facilitate the presentation of the content. It doesn’t describe how elements look, how much spacing there is between elements or what the colour of an element is. When building a website we try to keep the content seperate from presentation.
CSS or Cascading Style sheets do the work of styling the look, feel, and presentation of a webpage. We will look at that shortly.
HTML describes the content of web pages
- HyperText Markup Language is the main language for web pages.
- HTML is the basic building-blocks of webpages.
- A HTML document is a plain text document with the file extension .html
- HTML is written using tags, enclosed in angle brackets, like <html>Some content here</html>.
- To write HTML you need nothing more than a plain text editor, TextEdit on OSX, Notepad on Windows and a web browser like Chrome.
- A web browsers reads HTML documents and renders them into web pages. The browser does not display HTML tags, but uses the tags to interpret the content of the page.
Tags, Attributes and Elements – The stuff that makes up HTML
The basic structure of an HTML document is made of tags, which surround content and apply meaning to it.
- A HTML tag consists of an opening and a closing tag. Ie: <body></body>
- A tag can include Attributes.
- Attributes appear inside the opening tag and their value is always inside quotation marks. Ie: <img width=”729″>
- Tags mark the beginning and end of an element.
- Elements are the bits that make up web pages.
- Everything that is in-between and including the <body> and </body> tags is the body element.
Mozilla HTML element reference list
A list of all the HTML elements, which are created using tags. A helpful reference when searching for the best element for your needs.
Basic HTML document structure
The structure of a HTML document consists of a doctype, a html tag, a head tag and a body tag. The doctype declares the version of html. The HTML tag wraps all the content of the page and is the root element of the page. The head tag contains important elements of the html document that aren’t displayed in the browser window, like a page title and other meta information. Everything that is displayed in the browser viewport is declared inside the body tag. The body tag is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Here is an example of a basic html document structure.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p>My second paragraph.</p>
<p>My third paragraph.</p>
</body>
</html>
HTML’s elements
Here is a rundown of HTML and some of it’s various elements. These notes are written in HTML. I’ve put them together in an online HTML writing tool called Codepen. I talk through these notes in the video proceeding.
Writing your first HTML
Ok, let’s get writting some HTML. In the following video, I take you through writing your first HTML tags. I’ll also talk about using Codepen. Codepen is an online code editor, learning environment, and community for web development. We will be using it a lot, so sign up for an account right now. So head over to Codepen and make your first pen.
The design we will be working with is a very simple news article page. I created the mock-up in Adobe XD. You can see the preview here.
Here is the completed project including all HTML elements. We will look at styling these elements in an upcoming video.
