Google Play badge

hypertext markup language


Hypertext Markup Language (HTML)

HTML stands for Hypertext Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. HTML can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Foundation of the Web

At its core, the internet is a vast network of computers connected globally. The primary way we interact with this network is through the World Wide Web (WWW), a system of interlinked hypertext documents accessed via the internet. At the heart of the WWW are web pages, which are documents written in HTML. HTML provides the basic structure of sites, which is then enhanced and modified by other technologies like CSS and JavaScript.

HTML Documents Structure

An HTML document is structured according to a set of nested tags, which are elements enclosed in angle brackets. These tags tell the web browser how to display the content. An example of a simple HTML document structure is:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>This is a Heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

This code defines a basic webpage with a title, a heading, and a paragraph of text.

HTML Elements and Tags

HTML documents are made up of HTML elements. Each element is represented by a start tag, some content, and an end tag. The start and end tags of an element are identical, except that the end tag includes a forward slash before the element name.

For example, the <code><p></code> tag encloses a paragraph of text, and it is structured as follows:

<p>This is an example paragraph.</p>

Different elements serve different purposes. For instance:

Attributes

HTML elements can have attributes that provide additional information about the elements. Attributes are placed within the start tag of an element and are often given in name/value pairs like <code>name="value"</code>.

For example, to embed an image, we use the <code><img></code> tag with the <code>src</code> (source) attribute to specify the URL of the image:

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

The <code>alt</code> attribute provides alternate text for the image if it cannot be displayed.

Links and Navigation

The use of the <code><a></code> tag creates hyperlinks, which are foundational to the interconnectedness of the Web. A hyperlink can link to another web page, a different section on the same page, or even a downloadable file. For example:

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

This creates a link to <code>https://example.com</code>.

Lists

HTML provides elements for creating lists. There are two primary types of lists:

Each item in the list is enclosed within the <code><li></code> (list item) tag.

HTML5

HTML5 is the latest evolution of the standard, introducing many new features that reflect modern needs for multimedia and interactive documents. These include new structural elements (<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code>), graphic elements (<code><canvas></code> for drawing, <code><svg></code> for scalable vector graphics), and media elements (<code><audio></code> and <code><video></code>).

Semantic HTML

Semantic HTML refers to the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages. Rather than merely defining how elements look or behave (that's a job for CSS and JavaScript), semantic HTML accurately describes the structure and the type of content. For example, an <code><article></code> tag indicates that the content inside is an article, while a <code><nav></code> tag signifies a navigation menu.

Using semantic HTML improves the accessibility and searchability of web content, making it more usable and discoverable.

Conclusion

HTML is a cornerstone technology of the World Wide Web, providing the basic structure for web pages. Through the use of tags, attributes, and elements, HTML allows for the creation of structured documents. By understanding and employing HTML, one can create a wide range of content accessible on the web, from simple text documents to complex interactive multimedia experiences. As the foundation for web development, mastery of HTML is essential for anyone looking to design or develop for the web.

Download Primer to continue