HTML

HTML (HyperText Markup Language) is the language used to create the web pages you visit every day. It provides a logical way to structure content for web pages. (MDN-Servers, 2016)

A markup language is a computer language that defines the structure and presentation of raw text. Markup languages work by surrounding raw text with information the computer can interpret, "marking it up" for processing. HyperText is text displayed on a computer or device that provides access to other text through links, also known as “hyperlinks”. (Codecademy.com, 2016)

HTML also defines the Document Object Model (DOM), which describes the structure of the page and is like an outline or map of the content within a website. HTML is so important to a website that if the DOM is not coded correctly, it can break the entire website. (Villalobos, 2016)

Additional resources include (Williamson, 2016):

HTML 4 versus HTML 5

The HTML 5 specification isn’t that different from HTML 4. It does introduce a few new elements and what gives user agents clear rules about HTML, how it should be parsed and how errors should be handled.

HTML 5 focuses on building applications, drag and drop, location detection and supporting drawing services. This focus makes HTML 5 more of a platform for developing applications than a markup language. (Williamson, 2016)

The HTML Document

HTML is made up of tags, which are labels that define and separate parts of the markup language into elements. They are comprised of a keyword surrounded by angle brackets <>. The closing bracket is usually prefixed with a slash />. Tags are also referred to as elements.

Boilerplate Code – The basic HTML code required to begin creating a web page is referred to as boilerplate code. Without all of the elements in the boilerplate code, you’ll risk starting without the minimum requirements considered to be best practice.

<!DOCTYPE HTML>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="description" content="A page for exploring basic HTML documents">
  <title>Basic HTML document</title>
  </head>
  <body>
    <h1>Page content</h1>
    <p>The main page content appears inside the <b>body</b> tag. HTML contains several elements that allow you to properly structure and format your content, which we'll cover later.</p>
  </body>
</html>

You will always have the following elements:

  • Document type declaration
  • HTML tag that is an over-arching tag defining an html document.
  • Head region where all of the invisible elements that make the page work will go.
  • Body region where the visible elements go.

(Williamson, 2016)

Doctype Declaration

Document Type Declaration – The DOCTYPE declaration is the first line of code in all HTML documents and tells the browser or user agent which version of HTML that you’ll be using so it knows which version of the syntax to use in parsing. It is triggering something called ‘quirks mode’, which ensures that your page is going to be rendered properly. (Williamson, 2016)

<!doctype html>

HTML tag – All HTML files live within an over-arching html tag. This is the basic tag that defines an html document. (Codecademy.com, 2016)

<html>
  The rest of your web page goes in here!
</html>

Document Head

The head element follows directly after the opening HTML tag and contains information about the document: references to things like external scripts and styles and additional instructions to the browser about how the document should be rendered. (Williamson, 2016) It contains important content that is invisible to the user, but important to the browser. (Codecademy.com, 2016)

<html>
    <head>
    </head>
</html>

Character Set – The metadata tag <meta charset> tells the web browser which character set to use.

<meta charset="utf-8"/>

Title tag – Tells the browser what to display as the page title at the top and tells search engines what the title of your site is. It goes inside <head> tags. Page titles should be descriptive, but not overly verbose. (Codecademy.com, 2016)

<title> Jessica’s Portfolio Site </title>

Best practice is to include the following three components in the <head> element:

  • A meta tag indicating the use of the character set utf-8 immediately inside the head tag. This takes the burden off the web server from trying to figure out which encoding to use.
  • A second meta tag for description and content. This allows search engines and your own indexing solution to identify what your page is about.
  • A title tag that identifies the title of your web page. Without a title tag, your web page can show up in search results as an untitled document, which looks very unprofessional. The content that you include in the <title> tag will show up in the tab of the browser.

The example HTML code below renders the following web page. Notice the title in the tab.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="A page for exploring HTML documents." >
    <title>Basic HTML document</title>
  </head>

  <h1>Example Site</h1>
</html>

HTML title example

(Williamson, 2016)

Document Body

The <body> is where all of the page’s visible content is going to go. It is a sibling of the <head> tag so it is on the same level as the <head> tag and NOT nested inside of it. (Williamson, 2016) It is the container for all of a page's content. It comes after the <head> tag, within the overall <html> tag.

Almost all content belongs inside the <body> tag. The main exceptions are script and <style> tags, as well as the page <title> tag. As you can see in this example, there is a heading, an image, and a link all inside the body tag. The <head> tag contains only external files and the page title. (Codecademy.com, 2016)

<html>
  <head>
    <title>My homepage</title>
    <link rel="stylesheet" type="text/css" href="homepage.css" />
    <script type="text/javascript" src="homepage.js"></script>
  </head>
  <body>
    <h1>Hello, this is a picture of my cat!</h1>
    <img src="cat.jpg" />
    <a href="mailto:cat@codecademy.com">Email my cat</a>
  </body>
</html>

Importance of Order

Best practices and the move towards “mobile first” design dictates that the most important information on the website come first.

SEO (Search Engine Optimization) rules start assigning importance to different sections based on the order in which they appear in the code. And since we can use styling to change how items appear in our design, the HTML code needs to have the most important content at the top.

So once we get past the document and header statements and actually start providing content in the <body>, then we need to start prioritizing the content.

For example, think about a website that looks like this:

Order

The most important content here is the Header and the Article. The sidebars, widgets and footer section are less important. And that’s how we want it to appear in our mobile view as well.

Mobile Order

So when we write the HTML code, it needs to look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Third Grid</title>
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="grid-wrapper">
      <div class="grid-item">Header</div>
      <div class="grid-item">
        <article>
          <h1>Article Title</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur 
            . . .
            laborum ea commodi quam.
          </p>
        </article>
      </div>
      <div class="grid-item">Sidebar</div>
      <div class="grid-item">Sidebar 2</div>
      <div class="grid-item">Widgets</div>
      <div class="grid-item">Footer</div>
  </div>

  </body>
</html>

Content Models

A content model defines the type of content expected inside an element and control syntax rules such as element nesting. Almost every element in HTML belongs to at least one content model.

Prior to HTML5 there were only two content types: block level and inline.

  • Block level elements take up their own line within the flow of the document.
  • Inline level elements basically appear within the flow of other content.

There are now seven content models:

  • Flow – Flow content contains the majority of elements. These are elements that would be included in the normal flow of the document. There are no rules on how flow content has to be displayed. Almost all elements within a document can be considered to be part of the flow of content.
  • Metadata – Metadata content is defined as setting up the presentation or the behavior of the rest of the content. These elements will primarily be found in the head of the document and will contain things like meta tags, no-script tags, script tags, style tags, and the title tag of pages.
  • Embedded – Embedded content is any content that imports other resources into the document like canvas, video, the embed tag.
  • Interactive – Interactive content is any content that’s specifically intended for some type of user interaction like the anchor or link tag, a button, or an audio or video object that have controls.
  • Heading – Heading content defines the header of a section, which can be either explicitly marked up with sectioning elements or it can be applied by the heading content itself. Heading content only contains heading tags (H1 through H6).
  • Phrasing – Phrasing content is the text of the document as well as any elements that are used to markup text within paragraph level structures. It is very similar to what used to be the inline level elements from HTML 4.
  • Sectioning – Sectioning content defines the scope of the headings and footers. These elements will actually create a new section in the document.

(See this interactive link for more information: content categories)

Content model

(WHATWG, 2019)

HTML Elements

A very good resource for a list of HTML elements is on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

The general rule about using HTML elements is that they are formatted like this:

<tagName>Some Content</tagName>

Types of Elements

Elements can be block level or inline.

Block level elements get their own line whether they are written on separate lines or all on one line within the code.

  • Heading <heading></heading>
  • Div containers <div></div>

Inline elements just slip into an existing line without forcing a new line (like italicize, underlining, etc.)

  • Strong <strong></strong>
  • Emphasis <em></em>
  • Span containers <span></span>

(Steele, The Web Developer Bootcamp, 2017)

Basic Elements

Comments - HTML comments are sometimes used in code to explain parts of the markup and are not seen by users in their browsers. Comments begin with <!-- and end with -->. Any characters in between will be treated as a comment.

<!-- This is an HTML comment! -->

Comments also allow the programmer to “comment out” existing code without deleting it. Below is an example of an anchor element that has been “commented out”.

<!-- <a href="#" target="_blank>Codecademy</a> -->

Heading tags – Heading elements like <h1>, <h2>, <h3>, ... allow you to use six levels of document headings, ranging from largest to smallest, breaking up the document into logical sections. The first level <h1> is sued for main headings and all the remaining five are smaller and used for subheadings.

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

This is a header!

Paragraph – One of the most common tags in HTML - it denotes a paragraph of text. It often has other elements nested inside of it, such as <img/>, <a>, <strong> and <em>.

<p>This is paragraph text!</p>

This is a paragraph.

Hyperlink tags – Hyperlinks (or just links) are defined by the anchor <a> tag and take the user to another webpage when they click on it. The most common attribute used with links is href, which tells the browser where the link goes. By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.
<a href="http://google.com">Link to Google</a>

Link to Google

Note: In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5, the <a> tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink. (Converse, 2015)

Link elements – Connect your document to a related resource (very different from hyperlinks, which take you to another webpage when you click on them). Links appear only in the head section of a document so they do not alter the content, but only the presentation. Links are most commonly used to connect to a stylesheet, script, favicon, or alternate format of the page such as an RSS feed or PDF.

<link type="text/css" rel="stylesheet" href="styles.css" />

Nesting Elements

You can nest tags within other tags to form a hierarchy. This creates a parent-child relationship among nested tags.

Children – An element that is an immediate descendent of another element or nested within another element is called a child. These become useful when using CSS child selectors and pseudo-elements.

<ul id="parent">
  <li id="child">I'm a child of parent!</li>
</ul>

Lists – HTML supports two kinds of lists: ordered lists and unordered lists. Items within each individual list have its own tag and the code indention signifies the relationship between parent and child elements.

  1. Unordered Lists - Unordered lists are just lists whose items are denoted with bullet points.

    <ul>
  <li>Dish soap</li>
  <li>Kitty litter</li>
  <li>Tomato sauce</li>
</ul>

  2. Ordered Lists - Ordered lists' items are denoted with numbers.

    <ol>
  <li>First item!</li>
  <li>Second item!</li>
  <li>Last item!</li>
</ol>

Many developers use unordered lists to create menus because there’s a natural hierarchy in nesting unordered lists. (Converse, 2015)

Navigation Links – The <nav> tag defines a set of navigation links. Not all links should be inside a <nav> element, only links that intended for use as the major block of navigation links (like a menu). Note: The <nav> tag is new in HTML5. (Converse, 2015)

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Basic Formatting – You can easily format text to be bold, italic, or underlined using simple formatting tags. 

  This text is <strong>bold</strong>, <em>italicized</em>, and <u>underlined</u>.

This text is bold, italicized, and underlined.

Semantic Formatting – These tags are similar to the previously mentioned formatting tags which have fallen out of favor. The difference is that these tags have semantic value (meaning). <em> is used for something that you wish to emphasize and <strong> is used for something that is important.

With both of these elements, you can convey the level of emphasis or importance with nesting. The more times that you nest the element within itself, the higher the magnitude of the text it contains.

<p><strong><strong>Warning:</strong>Acid can cause severe burns</strong> </p>

Warning: Acid can cause severe burns

Note: The bold and italic tags are being deprecated and we should use strong and emphasis instead.

  • Use <strong></strong> in place of <b></b>.
  • Use <em></em> in place of <i></i>.

Images – The <img> element embeds an image into your HTML. Always found with the 'src' attribute, which tells the browser where to find the image. Note that the <img/> tag is self-closing and has a forward slash at the end, which is required for a self-closing element.

<img src='mylocalimage.jpg' alt='text to display if file not found'/>

Images as Links – You can turn an image into a link by wrapping that element with an anchor element.

<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="#" alt="A red prickly pear fruit"/></a>

Videos – The <video> element embeds a video into the webpage. The <video> element uses the following attributes:

  • width and height: Set the size of the screen that displays the video.
  • controls: Adds play, pause and volume control.
  • source src: Sets the URL of the video to play.
  • type: Specifies different video formats.

Attribute values (except for controls) must be enclosed in quotes as shown below.

<video width="320" height="240" controls>
  <source src="video-url.mp4" type="video/mp4">
</video>

Line breaks – This tag is used in a block of text to force a line break. This is to be used for things which are a single paragraph, but where this formatting is necessary such as poems or addresses. To separate paragraphs, separate each paragraph into a separate element instead. The resulting element on a web page will look like:

<p> Some text <br/> that spans two lines </p>

Divisions and Sections – The <div> and <section> tags are block level containers that allow you to group different elements together. This allows later reference to them for styling or other purposes.

<div class="groupone">
  <h1>Group One</h1>
  <p>I want to be together in group one.</p>
</div>

Span – The <span> tag is an inline container that works similar to <div> except that it allows you to group things within the same line.

Forms – Forms are how you collect information from users. We use tags such as <input> and <label> to help guide the user through what you are needing from them. And you can write simple validations to make sure the data they are entering is in the correct format. Forms are the front end and won't work until you have some back-end logic written to do something with the data.

Forms

The <form> tag is the shell or container around all of the input types.

  • Action - the URL to send form data to
  • Method - the type of HTTP request (GET is to retrieve and POST is to send)

The <input> tag allows user to input data through various means and controls. The “type” attribute determines the type of input.

Form inputs

Labels let us add captions to input items in our forms. There are two formats:

  1. Labels with the inputs within the label tags

    <form action="/sign-in-url" method="POST">
  <label>Username: <input type="text"></label>
  <label>Password: <input type="password"></label>
</form>

  2. Labels with the inputs outside the label tag, but identified with the for and id attributes

    <form action="/sign-in-url" method="POST">
  <label for="username">Username:</label>
  <input id="username" type="text">
  <label for="password">Password:</label>
  <input id="password" type="text">
  <button>Login</button>
</form>

HTML allows for some simple validations such as presence validations like making sure that at required field is completed. (Note: Not all browsers will handle this.) Validations are the rules that are enforced on the user's input.

Form input validation

Tables – Tables in HTML consist of several special tags working together. The hierarchy looks like this:

  • Table tag (<table>)
    • Table Header (<thead>)
      • Column Labels (<th>)
    • Table Body (<tbody>)
      • Table Row 1 (<tr>)
        • Row Details for each Column (<td>)
      • Table Row 2 (<tr>)
        • Row Details for each Column (<td>)
      • Table Row 3 (<tr>)
        • Row Details for each Column (<td>)

An example of a table is shown below:

Code:

<table border="1">
  <thead>
    <th>Number</th>
    <th>Color</th>
    <th>Country</th>
  </thead>
  <tr>
    <td>250</td>
    <td>Red</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>100</td>
    <td>Blue</td>
    <td>France</td>
  </tr>
</table>

Result:

Number Color Country
250 Red USA
100 Blue France

(Portilla, 2017)

HTML Attributes

Attributes provide even more information about an element’s content. They live directly inside of the opening tag of an element and are made up of the following two parts:

  1. The name of the attribute.
  2. The value of the attribute.

There are two different types of attributes: informative and functional.

  • Informative attributes give extra information about the element.
  • Functional attributes do something or cause a behavior within the element (like a link). (Williamson, 2016)

Class Attribute - HTML elements can have one or more classes, separated by spaces. You can style elements using CSS by selecting them with their classes.

<div class="big-box yellow-box">This is a big yellow box.</div>

ID Attribute - An HTML element can have an id attribute to identify it. id elements should always be unique to that single element, and each element should never have more than one id.

<div id="my-box">This is my box! Put your text in some other box.</div>

Target Attribute – The target attribute specifies that a link should open in a new window. This is helpful in that it allows your site to stay open (rather than disappear) when users click on a link.

For a link to open in a new window, the target attribute requires a value of _blank. The target attribute can be added directly to the opening tag of the anchor element, just like the href attribute.

<a href="https://www.google.com target="_blank">Go to Google!</a>

ALT Attribute – The alt attribute is applied specifically to the <img> element to support visually impaired users by providing a description of the image. This lends itself to screen reading software that reads the description out loud. Additionally, if an image fails to load, the user can mouse over the area originally intended for the image and read a brief description of the image. Note: If the image on the web page is not one that conveys any meaningful information to a user (visually impaired or otherwise), the alt attribute should not be used.

<img src="#" alt="A field of yellow sunflowers" />

An excellent reference for Attributes is on the MDN website: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

. .
Back to top Forward to CSS ==>