HyperText Markup Language (HTML)


Basic HTML Document Structure

Important Links

  1. Excellent tutorials for learning to code in HTML1
  2. All the HTML Elements from the W3C School
  3. How to obtain public server space for your web pages.


The following terms are used when talking about HTML encoding:2
element or tag
attribute
value
tags, attributes, and values, using oXygen's color scheme

An HTML document lives in your publicly accessible server space a link to the term's definition in the form of code.3 However, when someone navigates to your page, any of the browsers they use automatically transforms them into what looks like a web page. The styling of your web page is achieved by the css code's rendering of the HTML elements. Here, the css is to be found inside the <style> tag nested in the HTML document's <head>the body element has a margin, but nothing else is styled:

An image of HTML code, and the same code as rendered by a web browser



The most basic elements of an HTML document, in the code view, are:

<!DOCTYPE html> is called the document declaration: it tells the browser to use the software inside it for displaying HTML.

The most basic elements of an HTML document, code view


The open and close "html" tags,
<html></html>
open and close the whole document.

An HTML document has two main parts, visible in the image above right:

<head> </head><body> </body>



Anything in the "head" element is information for the browser software, not something people see, with one exception. The title tag nested inside the open-and-close head tags appears on the tab in people's browsers:

web tab
<head>
<title>title for browser tab</title>
</head>



Anything in the "body" element will be seen when people visit your web site using your URL or web address. In HTML, the "h" stands for "header," and so the codes "h1" "h2" "h3" "h4" etc. determine the size of the text from largest to smallest. "p" is a paragraph tag.4 body element or tag with elements or tags inside browser view



That basic code appears in a browser looking like a web page, albeit an ugly one! The basic HTML document, user's view



Web designers style their pages by using "CSS" code, which stands for Cascading StyleSheets. CSS can be a separate document, or the code can be used inside the HTML "head" tag, inside an element (between tags) called "style": style tag, inside the head



To the right, you can see that I have told the browser to make red the font of text inside <h3> elements (any and all of them). CSS code inside an HTML page for making font red



Now, my web page looks like this (to the right) in browsers: web page with a red header element



Inside the <style> element, the code switches from HTML to CSS code: an HTML element (here, h3) that is followed by two curly brackets that open { and close } the list of properties (here, color) to be applied to that element's appearance in a browser. Each property (color) is followed by a colon that introduces a value (red) for that property, and then closes with a semi-colon. css tags inside the style element element, property, value


All the CSS properties and values are listed and explained by the W3C Schools, and Zen Garden CSS offers beautiful examples of how css code can be used (which you can copy and use yourself, offering credit to the original coder). The Digital Editions textbook offers a tutorial on CSS.

Commonly used HTML 5 tags:


Back to the top

Home

Notes

1. W3C Schools provide excellent tutorials and reference materials for many kinds of coding including HTML 5. The She Codes Foundation offers classes but also answers questions for free.link out Among the many HTML textbooks, I recommend David DuRocher's HTML / CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering the Fundamentals of Modern Web Design, published by ClydeBank Medialink out which offers many "QuickStart" guides for coding; Julie C. Meloni's HTML, css, and JavaScript: All in One in Pearson Education's Sams Teach Yourself Series, latest edition, 2019.link out Jon Duckett's HTML & CSS: design and build websites (Indianapolis, IN: Wiley, 2014) is a beautiful book well worth having for its sense of design. See also the css portion of this website for a full explanation.  Back

2. For a full discussion of these terms, pleases see the Introduction's Basic Overview of Digital Editing and the dictionary of Digital Editing Terms. Back

3. See also the discussion of File Structure in the SetUp section of this textbook. Back

4. A full list of tags is available from the W3C School. Back