Mind Diary – HTML And CSS Are Hard: Basic Web Pages

Basic Web Pages

The first step of developing a web page is creating an HTML document with properly marked up content.

By "marking up" your raw content with HTML tags, you "tell" web browsers how you want different parts of your content to be displayed.

Marking up content is the first step of web development

The Basic Workflow for Web Developers:

They edit HTML in their text editor.
They view changes in a web browser.

Structure of a Web Page:



                      <!DOCTYPE html>
                    

                      <html>
                    

                        <head>
                    

                          <!–– Metadata goes here ––>
                    

                        <⁄head>
                    

                        <body>
                    

                          <!–– Content goes here ––>
                    

                        <⁄body>
                    

                      <⁄html>

First, we need to tell browsers that this is an HTML5 document with the <!DOCTYPE html> line. It is just a special string that web browsers look for when they try to display our web page.

Then, our entire web page needs to be wrapped in <html> tags, which consist of an "opening tag" and a "closing tag".
Everything inside of these two tags is called an "element".

Inside of the <html> element, we have two more elements called <head> and <body>:

The <head> contains all of its metadata, like the page title, any CSS stylesheets, and other things that are required to render the page.
The <head> element includes the bulk of the HTML markup which represents the visible content of the page.

Notice:
In HTML any line that starts with <!‐‐ and ends with ‐‐> is a comment and it will be completely ignored by the browser.
Comments are useful for documenting your code and making notes to yourself.

Page Titles:

One of the most important pieces of metadata is the <title> element. Web browsers display this in the tab for your page, and Google displays it in search engine results.

Indentation:

Indenting nested elements is an important best practice that makes your HTML easier to read for other developers (or for yourself if you come back 5 months from now and want to change some stuff).

Headings:

Headings are the primary way to mark up different sections of your content.

Selecting relevant headings is essential for a high‐quality web page because they define the outline of your web page seen by both humans and search engines.

Headings are like titles, but they are visible on the web page. HTML provides six levels of headings, and the corresponding elements are:
<h1>, <h2>, <h3>, … , <h6>.

Typically, the first heading on a page should be an <h1>. It is also very common for the first <h1> element to match the <title> of the document.

By default, web browsers render less important headings in smaller fonts.

lists:

Whenever you surround a piece of text with HTML tags, you add a meaning to that text.

Thus, wrapping content in <ul> tags tells a web browser that it should be rendered as an "unordered list".

To define individual items in that list, you wrap them in <li> tags:
<ul> elements should only contain <li> elements.

Rearranging the <li> elements of an unordered list might not change the meaning of the list. However, if the sequence of the list items does matter, you should use an "ordered list" instead.

To create an ordered list, we simply change the parent <ul> element to <ol>.

The difference between an unordered list and an ordered list is significant to web browsers, search engines, and, of course, human readers.

Step‐by‐step procedures like recipes, instructions, and even tables of contents are good examples for ordered lists, while an unordered list is better for representing item inventories, product features, pro⁄con comparisons, and navigational menus.

Block‐Level and Inline Elements:

Block‐level elements, such as <p>, are always drawn on a new line, while an inline element, like <em> or <strong>, for example, can affect only a part of a line.

Structure vs. Presentation –
The Distinction Between HTML and CSS:

HTML markup provides semantic information about your content – defining the structure of your document.
CSS provides the presentational information of a web page, i.e. its appearance.

Empty HTML Elements:

There are "empty" or "self‐closing" HTML elements, e.g. <br> (a line break) and <hr> (a horizontal rule).

The <br> element is useful for formatting text, e.g. a poem or lyrics. It tells the web browser to insert a line break, like this:



                    <p>Regards,<br>The Authors<⁄p>

Optional Trailing Slash:

The trailing slash (⁄) in all empty HTML elements is entirely optional.

Thus, a line break or a horizontal rule could be written either like this:
<br> and <hr>
or this:
<br⁄> and <hr⁄>

It does not really make a difference which convention you choose. But, pick one, and stick to it for the sake of consistency.

Summary:

This is always the first step in the web development process:

You need to:

Define what you want to say (HTML).

before:

Defining how you want to say it (CSS).