Web_Dev_Grad

HTML is the foundational language of the web, used to structure and display content on webpages. The web document structure is defined through elements such as headings, paragraphs, lists, links, images, and more. THe key point here is that HTML defines the structure of the webpage.

HTML forms the backbone of web development, combined with CSS (for styling) and JavaScript (for interactivity). Web browsers interpret HTML documents to render them as visible web pages. The combination of these languages has enabled the explosive growth of the internet, transforming how information is shared, communicated, and accessed worldwide.

In this section on HTML I will outline typical elements, Semantic HTML elements that describe their purpose such as <article> or <header> , and examples, culminating in a usable HTML page template that will help you hit the ground running with building your own webpage.

Browsers interpret elements in a document as instructions for displaying content. These elements define structure and formatting, such as marking text as a heading, paragraph, bold, list, or table. Despite the complexity of modern web applications, they are still built on this fundamental structure and even web pages created in 1991 remain fully functional in today's browsers.

HTML documents are plain text files saved with a .html extension and consist of elements and attributes. They can be edited with any text editor and run in any browser. For all things HTML and for a full description of things that I barely scratch the surface of on this site, I highly recommend the W3Schools HTML documentation. HTML and CSS: Design and Build Websites by Jon Duckett is also an excelent resource if you prefer a textbook (like I do).

HTML elements are HTML code inside of tags. These are angled brackets and are used by HTML to describe the structure of pages. Elements are usually made up of two tags, an opening and a closing tag but generally speaking, people use the terms element and tag interchangeably. The characters within the tags indicate their purpose such as <p> for paragraph. Elements structure and define your content on a webpage by instructing the browser on how different parts of the page should be interpreted and displayed. By using tags, developers can specify headings, paragraphs, links, images, and other elements that make up a webpage's content and layout. Without tags, a webpage would appear as plain, unformatted text, lacking the structure needed for readability and functionality.

Most HTML elements use both an opening and a closing tag. The opening tag signals the beginning of an element, while the closing tag marks its end. The browser reads these tags and applies the appropriate formatting or behaviour to the enclosed content. For example, a paragraph element is written as

<p>This is a paragraph.</p>

Where <p> is the opening tag and </p> is the closing tag. However, some elements are self-closing, meaning they don't require a separate closing tag. These elements typically represent standalone content, such as images or line breaks. For example, the <img> tag, used to display images, is written as

<img src="image.jpg" alt="Description">

and the line break tag, is simply <br>. Older versions of HTML required a slash (/) before the closing of self-closing elements (like <br/>), but this is no longer necessary in modern HTML.

HTML elements can be placed inside, or nested within, one another. Nested elements are generally put on a new line and tabbed in for clarity when reading the code. The general syntax of nesting an element b inside an element a is:

<a>
    Start of content A 
        <b>content B</b>
    end of content A.
</a>

A good example of where this seems obvious is if you want to highlight a word or phrase in a paragraph by making it bold, whilst leaving the rest of the paragraph as normal. To achieve this you can start the paragraph element until you get up to the word that you want to bold, start the <em> element, write the word, end the </em> element and then continue the rest of the paragraph. This will look like:

<p>
    This is the start of a paragraph but this next bit will be 
        <em>emphasised</em>
    , but not the rest of the paragraph
</p>

Elements that are nested immediately inside of another element have the relationship of a parent and child. In the above example the <em></em> element is the child of the <p></p> element. If there were other child elements of the <p></p> element, these would be sibling elements to the <em></em> element. If the <em></em> element had any child elements of it's own, these would be grandchild elements of the <p></p> element. See, HTML is all about building a big happy family.

Elements in HTML can have attributes that provide additional information about the element, affecting its behavior or appearance. Attributes are placed within the opening tag of an element and typically consist of a name and a value separated by an equals sign. The value is the setting for the attribute and is enclosed by double quotation marks. This syntax is generally:

<element attribute="value">Content</element>

These may seem confusing at first, but they give an extra layer of functionality to our elements such as:

• Describe properties of an element that aren't visible in the content but are essential for functionality. For example an src attribute for an <img> tag specifies the image file path and an alt attribute giving a description of the image for screen readers:

  <img src="image.jpg" alt="A beautiful sunset">
  

• Modifying the behaviour of an element. For example giving an anchor element a destination by providing a href attribute and ensuring that it opens in a new tab by using the target attribute:

  <a href="https://www.example.com" target="_blank">Visit Example</a>
  

Comments in code are amazing. They are little snippets of ideas, descriptions or reminders that the computer does not read and are purely there for informing us; the developers. With HTML, I tend to put descriptive comments above each section describing what's inside or to highlight particular points of interest. In HTML comments are added by wrapping your comment in <!-​- -​->

<!--This is a comment-->
<!--
    This is a 
    multi line
    comment
-->

You will often want to target specific elements in your HTML files. This can be to add some CSS styling to them, add some functionality by selecting them with JavaScript, or to hyperlink to that specific part of the page. There are two ways of doing this; you can assign an element an id attribute or a class attribute.

<div id="header">This is the header</div>

Classes are used to group multiple elements together. For instance if you have style rules for a set of paragraphs, you can target all of these whilst leaving other paragraphs untouched by giving them the same class, so this is great to use when you are applying reusable styles across different parts of your website.

<p class="descriptive-text">This is one paragraph</p>
<p class="descriptive-text">This is another paragraph with the same class</p>

Multiple classes can be applied to the same element by putting them in a space separated list as the class attribute value.

<p class="green-text blue-underline">Paragraph with the green-text and blue-underline classes</p>

IDs, being unique, can only take one value.

For best practice, IDs and classes should start with a letter, not include any spaces (as these are used for separating classes when applying multiple classes) and except from starting with one, they can have numbers, hyphens, and underscores. Technically they can also include periods but these can be confused with class selectors in CSS, and colons but these can conflict with CSS or XML. For consistency I use all lower case letters with hyphens instead of spaces, and some numbering such as e xample-class or example-class-2.

Every HTML document begins with

<!DOCTYPE html>

This lets the browser know which version of HTML the document is written in, making sure that the page is rendered properly in your browser. In particular, <!DOCTYPE html> is used to define the document as an HTML5 document, the latest version of the HyperText Markup Language.

This declaration is important because it triggers "standards mode" in modern web browsers, where they follow current web standards. Without it, browsers might switch to "quirks mode," where older rendering behaviours are used, potentially causing layout issues or inconsistent display across different browsers.

This may look concise to those of you familiar with older versions of HTML such as HTML 4.01 which required an additional Document Type Definition, which is not required for HTML5, making it a cleaner and more straightforward DOCTYPE declaration.