What is HTML?
HTML stands for HyperText Markup Language and is the standard language for structuring web pages. A HTML document is essentially a series of elements, each with an identify tag. These tags give meaning to HTML elements. Some examples include paragraphs, headings, and lists. HTML only provides page structure thus it is often used alongside other technologies like CSS and JavaScript that provide styling and interactivity.
HTML Elements
What is a HTML element? Well to answer that question lets look an example:
<p>Hello World</p>
This is an example of a paragraph element. This element is composed with an opening tag <p>, a closing tag </p>, and the content Hello World. As you may have noticed the opening tag is composed of the element name (in this case p for paragraph) enclosed in angle brackets. The closing tag is similar to the opening tag but contains a forward slash following the opening angle bracket. The content goes in between the opening and closing tags and can include other elements or, in this case, text.
Elements can also have attributes like in the example below:
<p class="greeting">Hello World</p>
This example is similar to the previous but it has class="greeting" in the opening tag. In this case class is the attribute and "greeting" is the value. Attributes like this one provide more information about the element that we don't want to appear. This information is useful when using JavaScript and CSS to select elements, and for making web pages more accessible as it is used by screen readers to identify content.
We need more than just the paragraph element to create a web page. Below are a few common HTML elements with a short explanation:
<html> - This is the root element and thus contains all other elements.
<head> - Contains information about the page like the title and links to imported files like CSS.
<body> - Contains all the visible content on the page.
<h1> - <h6> - Headings ranging from 1 to 6 with 1 being the highest level and one typically used for the main title.
<p> - Defines a paragraph.
<a> - The anchor element is used to define links. The href attribute contains a link to another resource, usually a URL.
<div> - A generic block level element often used to group elements or when there isn't a more descriptive element to use.
<span> - A generic inline element often used to style a portion of inline content.
<title> - Defines the documents title that typically displays in the browsers title bar or tab. It is a required element and can only be defined once.
<article> - Defines an article.
<img> - Defines an image. The attribute src is used to define the path to an image. The attribute alt is used to give a short description of an image. Though optional, the alt attribute should always be used as it will display when an image doesn't load and used by screen readers to identify an image. This improves user experience and accessibility.
<ol> <ul> <li> - Used to define lists. <ol> defines an ordered list, <ul> defines an unordered list, and <li> individual list items.
There are many more but this should be enough to get you started.
Simple Example
Now that we understand what HTML is let's look at a simple example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Heading</h1>
<p>paragraph</p>
<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>
</body>
</html>
The first tag we see here is <!DOCTYPE html> which is a required declaration that tells the browser the document type is HTML. Following that we have the root html tag with the attribute lang="en". Here the lang attribute sets the language to English with the value en. The language attribute can be defined in any element but should always be defined in the html tag. Defining the language of your content allows you to style it differently based on the language.
Next we have the head element and it contains two meta elements and the title element. The first meta tag contains the attribute charset="UTF-8". This simply specifies the character encoding of the document. While the browser will define the character encoding if this is omitted HTML does not. So it's important to include it to ensure your page displays correctly. The character encoding UTF-8 is used as it provides access to almost all characters and symbols. The second meta tag contains the attributes name="viewport" and content="width=device-width, initial-scale=1.0". These collectively define the viewport based on the device width. I won't get into the details here, but these attributes are necessary to style a page differently based on the device width.
The body tag is last and contains heading, paragraph, and ol elements.
That completes the basic structure of a HTML document.
Thank you for reading!
Top comments (0)