Ok, so the introduction 'What is HTML' already mentioned HTML tags and elements. So, let's first take a quick recap, then a closer look at tags and elements, and finally attributes will be introduced.
You can think of an HTML element and its tag(s) as a container for holding a specific type of content. They mark up a part of the content and define a specific meaning for it.
Tags are meant to be semantic, not presentational. Nonetheless, browsers apply a set of default styles to the content corresponding to the tag.
You learn more about styles and CSS, directly after creating your own website.
For example, the following tags are used to assign a specific role to a section of text, which also instructs the browser to apply a particular default styling: The <h1> tag ('h' for heading) is used for the biggest headline, <h2> tag for smaller headlines, etc., until <h6> for the smallest one. The <p> tag is used for paragraphs (so the browser puts space before and after a paragraph). Yet another example is the <blockquote> tag for literally quoting someone. A <citation> tag can be added to give appropriate credit to the author(s).
There are also tags that are not concerned with text and instead display other types of content. For example the <img /> tag for images and <video> for videos.
HTML is case-insensitive, so in theory <video>,<VIDEO> or even <vIdEo> are fine. But it is recommended to write HTML in lower case like this: <video>. Consistently writing in lower case is easier to read and a convention most developers follow.
As already explained in the introduction 'What is HTML' we inform the the browser about the content type by wrapping special characters around the content. You saw a few examples above with the shape of <sometag>, but that was only half the truth.
So, where does the content go?
The content is enclosed inside of two tags. An opening tag like <p> and a closing tag like </p>. The content comes between the two tags. Though, the closing tag is not always required by the browser, it is still highly recommended to provide a closing tag for every opening tag.
Notice that a forward slash (/) is used before the tag name to indicate it as a closing tag. This slash is required for closing tags! It's a common beginner error to forget it!
Also, keep in mind that the order of these special characters is important! Don't change the pointy brackets. >p< is not correct, neither is <p>some text<p/>!
The combined sequence of opening tag, content, and closing tag is known as an HTML element. Below is an image that shows a typical HTML element and its surrounding HTML tags (h1 tags)
Shows an heading element as an exemplary HTML element. The element consists of a <h1> tag (opening tag), the text 'Largest Heading' and the closing tag </h1>.
Some HTML elements only consist of a single tag, a so called self-closing tag or void element. Such elements are typically used to insert or embed something in the page. For example the line break element looks like this <br />, a horizontal line like this <hr /> and an image tag like this:
<img src="bunny.jpg" />
Notice the / forward slash symbol right before the end of the tag. Nowadays, the slash is not required for modern browsers, but you can still use it to indicate a self-closing tag.
Since there is only one tag, there is basically no space to place content. Therefore attributes are use to attach additional information to a tag. In the image tag above an attribute is used to specify which image file should be displayed.
Attributes
An attribute consists of a name some special characters and a value:
- attribute name
= equals sign- attribute value surrounded by double quotes
"..."
So, for the image example from above the whole attribute is src="bunny.jpg", the attribute name is src and the attribute value is bunny.jpg.
Keep in mind that you have to put a space around attributes. This would not work: <imgsrc="surprisedpikachu.jpg"/>. There is no space between the tag name img and the attribute name src!
Another example is an anchor tag which is used to link to a web page:
<a href="roadmappy.com">Link to Roadmappy</a>
In this example, 'Link to Roadmappy' would be displayed as a link on the screen and roadmappy.com would be the destination URL the browser navigates to when clicking the link.
Understanding image file referencing and web page linking is crucial to avoid broken links and missing images. However, this course doesn't cover it, yet. Here are some terms for your own research:
- hot linking external images vs. hosting them yourself
- relative vs. absolute paths
-
relative: slash with one dot in front (
./something) or no slash and no dot
(something) vs. two dots ../something
-
absolute: leading with hostname
roadmappy.com/something vs. slash
without dot
/something
One last thing I want to mention: You can make comments in the HTML code which won't be displayed by the browser. You start a comment with <!--, write something in-between and end the comment with -->
<p>This will be displayed in the browser.</p>
<p>This is visible as well</p>
Most Common Elements
There are many more commonly used elements. Instead of tediously mentioning every element, you can look them up yourself in one of the following references:
Elements by category:
Next Steps: Nesting Elements
Now, that we covered the most important concepts about HTML elements you are basically ready to write your first lines of HTML code. The only thing left that you need to know is about nesting elements inside of each other.
Side Note
Pointy brackets are also known as 'arrow bracket', 'angle bracket' as well as 'less than' and 'greater than' signs.
The text file and data exchange format XML is similar to HTML and other than HTML XML is case-sensitive.