HTML: Basic elements
Last updated
Last updated
HTML defines the content of every web page on the Internet. By “marking up” your raw content with HTML tags, you’re able to tell web browsers how you want different parts of your content to be displayed. Creating an HTML document with properly marked up content is the first step of developing a web page.
Add the following HTML markup to our basics.html file.
First, we need to tell browsers that this is an HTML5 web page with the<!DOCTYPE html> line. This is just a special string that browsers look for when they try to display our web page, and it always needs to look exactly like it does above.
htmlThen, our entire web page needs to be wrapped in <html> tags. The actual <html> text is called an “opening tag”, while </html> is called a “closing tag”. Everything inside of these tags are considered part of the <html>“element”, which is this ethereal thing that gets created when a web browser parses your HTML tags.
Inside of the <html> element, we have two more elements called <head> and <body>. A web page’s head contains all of its metadata, like the page title, any CSS stylesheets, and other things that are required to render the page but you don’t necessarily want the user to see. The bulk of our HTML markup will live in the <body> element, which represents the visible content of the page. Note that opening up our page in a web browser won’t display anything, since it has an empty <body>.
Also notice the HTML comment syntax in the above snippet. Anything that starts with <!-- and ends with --> will be completely ignored by the browser. This is useful for documenting your code and making notes to yourself.
title One of the most important pieces of metadata is the title of your web page, defined by the aptly named <title> element.
Try updating our basic.html file’s <head> to match the following:
When you reload the page in your browser, you should still see an empty page, but you’ll also see Interneting Is Easy! in the browser tab:
The <p> element marks all the text inside it as a distinct paragraph. Try adding the following <p> element to the body of our web page:
Headings are like titles, but they’re actually displayed on the page. HTML provides six levels of headings, and the corresponding elements are: <h1>, <h2>, <h3>, … , <h6>. The higher the number, the less prominent the heading.
The first heading on a page should typically be an <h1>, so let’s insert one above our existing <p> element. It’s very common for the first <h1> element to match the <title> of the document, as it does here:
Headings are the primary way you mark up different sections of your content. They define the outline of your web page as both humans and search engines see it, which makes selecting relevant headings essential for a high-quality web page.
Whenever you surround a piece of text with HTML tags, you’re adding new meaning to that text. Wrapping content in <ul> tags tells a browser that whatever is inside should be rendered as an “unordered list”. To denote individual items in that list, you wrap them in <li> tags, like so:
The HTML specification defines strict rules about what elements can go inside other elements. In this case, <ul> elements should only contain <li>elements, which means you should never ever write something like this:
Instead, you should wrap that paragraph with <li> tags:
If the sequence of list items does matter, you should use an “ordered list” instead. To create an ordered list, simply change the parent <ul> element to <ol>. Append the following content to the Listssection of basics.html:
When you reload the page in your browser, you’ll notice that the browser automatically incremented the count for each <li> element.
The difference between an unordered list and an ordered list might seem silly, but it really does have significance to web browsers, search engines, and, of course, human readers. It’s also easier than manually numbering each list item.
The other major type of content is “inline elements” or “phrasing content”, which are treated a little bit differently. Block-level elements are always drawn on a new line, while inline elements can affect sections of text anywhere within a line.
For instance, <p> is a block-level element, while <em> is an inline element that affects a span of text inside of a paragraph. It stands for “emphasis”, and it’s typically displayed as italicized text. Try adding a new section demonstrating emphasized text to our example web page:
The part wrapped in <em> tags should render as italics, as shown below.
If you want to be more emphatic than an <em> tag, you can use <strong>. It’s an inline element just like <em>, and looks like this:
It should be rendered in bold text, like so:
To draw even more attention your a span of text, you can nest a <strong>element in an <em> element (or vice versa). This will give you text that is both strong and emphasized:
HTML markup should provide semanticinformation about your content—not presentational information. In other words, HTML should define the structure of your document, leaving its appearance to CSS.
The pseudo-obsolete <b> and <i> elements are classic examples of this. They used to stand for “bold” and “italic”, respectively, but HTML5 attempted to create a clear separation between a document’s structure and its presentation. Thus, <i> was replaced with <em>, since emphasized text can be displayed in all sorts of ways aside from being italicized (e.g., in a different font, a different color, or a bigger size). Same for <b> and<strong>.
HTML condenses consecutive spaces, tabs, or newlines (together known as “whitespace”) into a single space. To see what we’re talking about, add the following section to our basics.html file:
The newline after Regards in the above snippet will be transformed into a space instead of displaying as a line break:
To tell the browser that we want a hard line break, we need to use an explicit <br/> element, like this:
The <br/> element is useful anywhere text formatting matters. Haiku, music lyrics, and signatures are just a few examples where it might come in handy.
However, be very careful not to abuse the <br/> tag. Each one you use should still convey meaning—you shouldn’t use it to, say, add a bunch of space between paragraphs:
The <hr/> element is a “horizontal rule”, which represents a thematic break. The transition from one scene of a story into the next or between the end of a letter and a postscript are good examples of when a horizontal rule may be appropriate. For instance:
The trailing slash (/) in all empty HTML elements is entirely optional. The above snippet could also be marked up like this (note the lack of / in the <br> and <hr> tags):
It doesn’t really make a difference which convention you choose, but pick one and stick to it for the sake of consistency.
