Website Basic web Pages

Website basic web pages(most important)

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.

In this chapter, we’ll build our first web page. It’ll look like crap because it won’t have any CSS attached to it, but it will serve as a thorough introduction to the HTML elements that web developers work with on a daily basis.

As you work your way through the examples, try to approach them as a more hands-on version of a WYSIWYG editor like Google Docs or Microsoft Word. We’ll be working with all the same types of content (headings, paragraphs, lists, etc), we’ll just be defining them a little bit more explicitly with HTML.

setup

Let’s get started by creating a new project with Atom called basic-web-pages. Then, make a new file called basics.html in that folder. This HTML file represents a single web page, and it’s where we’ll put all our code for this chapter. If you’re not already set up with Atom, be sure to read the Introduction for this tutorial series.
Remember that the basic workflow for web developers is to edit HTML in their text editor and view those changes in a web browser, so this is exactly what you should be doing for each section of this chapter.

structure of a web page

Add the following HTML markup to our basics.html file. This is what you’ll start with for every single web page you’ll ever produce. Typically, you would use a templating engine of some sort to avoid re-typing the redundant parts, but for this tutorial, we’ll be focusing on the raw HTML.

<!DOCTYPE html>

<html>
<head>

</head>
<body>

</body>
</html>
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.

Then, 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.

unordered lists

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:

<h2>Lists</h2>

This is how you make an unordered list:

<ul>
<li>Add a "ul" element (it stands for unordered list)</li>
<li>Add each item in its own "li" element</li>
<li>They don't need to be in any particular order</li>
</ul>
After adding this markup to the <body> element (underneath the existing content), you should see a bulleted list with a dedicated bullet for each <li> element:

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:

<ul>
Add a "ul" element (it stands for unordered list)
</ul>
Instead, you should wrap that paragraph with <li> tags:


<ul>
<li>Add a "ul" element (it stands for unordered list)</li>
</ul>
How do we know that <ul> only accepts <li> elements and that <li> allows nested paragraphs? Because the Mozilla Developer Network (MDN) says so. MDN is a superb HTML element reference. We’ll try to cover as much as we can about how to use basic HTML elements in this tutorial, but whenever you’re not sure about a particular element, do a quick Google search for “MDN <some-element>”.
ordered lists

With an unordered list, rearranging the <li> elements shouldn’t change the meaning of the list. 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 Lists section of basics.html:

This is what an ordered list looks like:

<ol>
<li>Notice the new "ol" element wrapping everything</li>
<li>But, the list item elements are the same</li>
<li>Also note how the numbers increment on their own</li>
<li>You should be noticing things is this precise order, because this is
an ordered list</li>
</ol>
When you reload the page in your browser, you’ll notice that the browser automatically incremented the count for each <li> element. In Hello, CSS, we’ll learn how to change what type of numbers get displayed.
emphasis (italic) elements
So far, we’ve only been working with “block-level elements” (also called “flow content”). 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, is a block-level element, while 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:

<h2>Inline Elements</h2>

Sometimes, you need to draw attention to a particular word or
phrase.
The part wrapped in tags should render as italics, as shown below. Notice how only part of a line has been affected, which is characteristic of inline elements. In the CSS Box Model chapter, we’ll discover how inline and block elements can have a dramatic impact on the layout of a page.

Just in case it hasn’t sunk in yet, it’s really important that you properly nest your HTML elements. It’s easier to mess up the order of tags when you’re using multiple inline elements, so make sure to double-check that your markup never looks like this:


This is some emphasized text
strong (bold) elements
If you want to be more emphatic than an tag, you can use . It’s an inline element just like , and looks like this:

Other times you need to strongly emphasize the importance

of a word or phrase.
It should be rendered in bold text, like so:

To draw even more attention your a span of text, you can nest a element in an element (or vice versa). This will give you text that is both strong and emphasized:

And sometimes you need to shout!

As the example text suggests, this is effectively the typographic equivalent of shouting. Have a read through the Web Typography chapter before going too crazy with the bold and italic fonts.

structure versus presentation

You might be wondering why we’re using the terms “emphasis” and “strong” instead of “italic” and “bold”. That brings us to an important distinction between HTML and CSS. HTML markup should provide semantic information 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 and 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, was replaced with , 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 and .

As we’ll discover in Hello, CSS, we can alter the browser’s default rendering of the and elements. This furthers the point that we shouldn’t call it out as italicized or bold text in the HTML—that’s something for CSS to decide.
empty html elements
The HTML tags we’ve encountered so far either wrap text content (e.g., ) or other HTML elements (e.g., <ol>). That’s not the case for all HTML elements. Some of them can be “empty“ or “self-closing”. Line breaks and horizontal rules are the most common empty elements you’ll find.

line breaks

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:

<h2>Empty Elements</h2>

Thanks for reading! Interneting should be getting easier now.

Regards,

The Authors
The newline after Regards in the above snippet will be transformed into a space instead of displaying as a line break:

This behavior may seem counter intuitive, but web developers often set their text editor to limit line length to around 80 characters. As a programmer, it’s easier to manage code this way, but having each of the newlines show up in the rendered page would severely mess up the intended page layout.

To tell the browser that we want a hard line break, we need to use an explicit element, like this:

Regards,

The Authors
The 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 tag. Each one you use should still convey meaning—you shouldn’t use it to, say, add a bunch of space between paragraphs:

This paragraph needs some space below it...

So, I added some hard line breaks.
As discussed in the previous section, this kind of presentational information should be defined in your CSS instead of your HTML.

horizontal rules

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:

<h2>Empty Elements</h2>

Thanks for reading! Interneting should be getting easier now.

Regards,

The Authors

<hr/>

P.S. This page might look like crap, but we'll fix that with some CSS
soon.
One of the themes for this chapter has been the separation of content (HTML) from presentation (CSS), and <hr/> is no different. Like and , it has a default appearance (a horizontal line), but once we start working with CSS, we’ll be able to render it as more space between sections, a decorative accent character, or pretty much anything else we want.

Like , <hr/> should carry meaning—don’t use it when you just want to display a line for the sake of aesthetics. For that, you’ll want to use the CSS border property, which we’ll discuss in a few chapters.

Another way to think about the <hr/> element is that it carries less significance than the separation created by a new heading element, but more significance than a new paragraph.

optional trailing slash

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 and <hr> tags):