Introduction to HTML

February 05, 2020

This article is a written version of an event hosted by Rithm School, targeted towards women looking to pivot into Software Engineering.

What is HTML?

HTML is a language for the web. It's used to give meaning and structure to the documents (webpages) that we create.

If we think of a finished webpage as the human body, HTML would be the skeleton.

HTML as a language is made up of a series of elements. Each element is made up of tags, content and attributes.

HTML Tags

The tag of an HTML element refers to the bracketed portion (< and >) that surrounds it.

The tagname, or the word that sits between the brackets, classifies what type of element it is.

Below is an example paragraph element that uses a <p> tag:

<p>This is the paragraph content</p>

If the element contains content (as many do), we need to include a closing tag, as we have above.

Closing tags match the opening tag, but include a forward slash before the tag name. These two tags together tell the browser where an element begins and ends.

💡The term markup in markup language just means that it's written in a format that makes it syntactically different than regular text (think "marking up" a document for editing purposes in a red pen). In the case of HTML, this markup is the use of brackets around specific words (i.e., < and >).

When the browser is given an HTML document, it reads the HTML and displays the content according to which elements are present.

We don't see the tags themselves because the browser converts these tags to appear as content on the page for us.

HTML Document Layout

When we refer to the document layout, what we mean is the order and organization of the HTML elements within our file.

We hame a lot of flexibility with the order of the elements we use, but when it comes to the outline of our document, there are a few elements that must come in a specific order.

DOCTYPE

Our very first tag will be our language declaraction.

This declaration tells the browser what language we're writing in so that it can display the content in the way we'd expect:

<!DOCTYPE html>

html

Our HTML element comes next and is considered the "root" (base) of our entire document: it's how we tell the browser where our HTML begins (and ends)!

<html>
  Our HTML will be written here!
</html>

head

Now we've officially started on our HTML section. Think back for a moment to the analogy of the human body.

The <head> element, just like a person (from top to bottom), comes first.

<head> will contain meta information (meta data) about our document. We can think of this meta data like fine-grain details about the document, outside of the elements we're including.

The only tag that we must include is the title of our document.

Using the <title> tag, this text shows up in the browser tab of the webpage:

<head>
  <title>Title of the document</title>
</head>

Other optional tags include: <style>, <link>, <base>, <meta>, <script> and <noscript>.

body

After the <head> comes the <body> of the document.

The document's body will contain all visible content of the page. Most of our elements will live here!

<body>
  The content of our document goes here!
</body>

HTML Elements

We've reached the <body> of our document: the home of all HTML elements that will define our page.

So, what are our options for elements?

Headings

HTML tags that start with h indicate that the text an content within them should be treated as a heading:

<h1>This is a heading!</h1>

Think of the large, bold text (often a title) that comes before a paragraph or body of text in a document (or at the beginning of this section): these are headings.

Heading sizes are determined by the number that follows the h. For example, h1 is the largest heading available and h6 is the smallest (it's the same font-size as the rest of the document).

h1

h2

h3

h4

h5

h6

We can remember this if we associate the number with a priority ranking. h1 tells us that the content within that tag is very important information that the browser should treat as such (by making it the biggest size).

Paragraphs

We saw an example of a paragraph tag used earlier, but the <p> tag is used to separate the text in our document into logical text blocks.

<p>This is a paragraph!</p>
<p>This is another paragraph!</p>

The <p> tag will also give us a little bit of white space afterward, which is what gives the visual separation that we expect of paragraphs.

Links (The Anchor Tag)

Another useful element is our anchor tag, which is used to create links. Links are used to jump from one page to another.

The <a> tag is the first that we've come across that requires the use of attributes. An attribute is an additional piece of information that we provide the tag to allow it to do its job.

In this case, our <a> tag needs to know where to take the user.

We can provide that information with the href attribute:

<a href="https://misscoded.com">Click here!</a>

💡href stands for hypertext reference. It's the address that the user will be taken to if they click on our link!

Images

If we'd like to display an image in our document, we use the <img> tag.

The <img> tag also requires at least one attribute to accomplish its purpose. We need to give it the address of the image file to display!

To provide this address, we use the src (short for source) attribute:

<img src="https://misscoded.com/sample.jpg" />

As you can see above, the <img> tag doesn't have any text content, so we don't need a separate closing tag.

Inline Styling

We can add some style directly to our HTML elements, which is called inline styling.

To do so, we use the style attribute, passing in properties and the values we'd like them set to:

<p style="background-color: pink;">My background is pink!</p>

If we want to set multiple properties, we separate them with semi-colons:

<p style="color: pink; font-size: 15px;">Two styles!</p>

Some common properties we might want to use include: font-size, color (font color), background-color and text-align.

💡Usually our styling will live in a separate CSS file, which is why the term inline styling specifically refers to adding styling directly in our HTML.

Organizing Our Elements

When we add elements to the <body> of our HTML document, often we want to organize them into certain sections.

We have some additional elements that we use specifically for this purpose.

div

The <div> tag (short for division) allows us to divide our page into separate, logical parts according to their meaning and purpose.

It is often a container for elements that are related to one another, or to style a group of elements that are contained within:

<!-- Section about cats -->
<div style="color: pink;">
  <p>I'm a paragraph about cats.</p>
  <p>And I'm also a paragraph about cats!</p>
</div>

<!-- Section about dogs -->
<div style="color: blue;">
  <p>I'm a paragraph about dogs.</p>
  <p>And I'm also a paragraph about dogs!</p>
</div>

section

An alternative to <div> is <section>.

The two can be used for similar purposes, but <section> is often used to define what would be larger areas of clearly different content in our document.

For example, say we have two sections on our home page: latest blog posts and most popular blog posts:

<!-- Section :: Latest Blog Posts -->
<section>
  Here are our latest blog posts!
</section>

<!-- Section :: Popular Blog Posts -->
<section>
  Here are our most popular blog posts!
</section>

Within each section, we could have different divisions (<div>) of elements that further separate each section.

In the case of blog posts, maybe each <div> could represent a blog post preview:

<!-- Section :: Latest Blog Posts -->
<section>
  <div id="blog-post-1">
    <h3>Blog Post #1</h3>
    <img src="sample-blog-img-1.jpg">
  </div>
</section>

<!-- Section :: Popular Blog Posts -->
<section>
  <div id="blog-post-2">
    <h3>Blog Post #2</h3>
    <img src="sample-blog-img-2.jpg">
  </div>
</section>