Start with an overview of HTML, and then get a review of HTML terminology, syntax, and the document object model.
- [Instructor] Before we jump into CSS, let's start with a quick review of HTML. HTML is used to define the structure of a webpage and the meaning of the content to the browser. Using semantic HTML helps with accessibility and search engine optimization. It also effects how you write the CSS, since they are closely related together. Front end web development refers to the languages that run in the browser. While these three languages work together, they're each responsible for something different.
With each new version, features are added or removed, and syntax rules also change. These standards are maintained by the World Wide Web Consortium. You can find all the documentation, guidelines, and recommendations for HTML and CSS on their website at w3.org. And here are some other specific resources about the latest HTML5 features and changes. The Mozilla developer network has some information about the video and audio content.
There has also been the addition of new semantic HTML5 elements for defining your content, and HTML5 Doctor is a great resource to learn about the changes. Let's do a review of some HTML terminology and syntax. Getting a grasp on the terms makes it easier to ask clearer questions and find answers. Elements are the components that define page objects, such as paragraphs and links. Tags are used to define these elements, using angled brackets wrapped around the tag name.
They usually come in pairs and wrap the content to give meaning to it. The opening tag is added at the beginning of the element, and the closing tag, with the addition of a forward slash, marks the end. There are some exceptions to this rule. Void elements don't have closing tags and don't wrap any content, because they are the content. But, there aren't many void elements, and here's the full list. Visit the W3C for more information about each tag.
Some void elements can be used on their own, and others require additional information. For example, the HR tag creates a horizontal rule, which looks just like a line, and is often used to separate blocks of text and does not require any other information. Images, on the other hand, requires two attributes. A source attribute to link to and load the image file, and the alt attribute, to provide a short description about the image for screen readers.
You may have also seen void elements written with a forward slash at the end of the tag. This is one of those HTML5 syntax changes. It was required in the previous version, XHTML, but is no longer needed. HTML5 is actually backwards compatible, so if you leave it in, that works as well. There are many different attributes used to provide additional information. They always follow the format of attribute name equals the value contained in single or double quotes.
The values vary depending on the attribute. Another common one is the HREF attribute, used to add the address for the link reference. You can also have more than one attribute per tag. It doesn't matter what order you put them in, just be sure to separate them with a space. We'll be looking at a few more attributes, specifically for CSS, in the upcoming lessons. The document object model represents the tree-like structure that is created when writing HTML.
Each element is an object, which makes up the document, hence the name, document object model. Elements are often nested, meaning the tags are written inside of other tags. This creates relationships resembling a family tree. Branches of ancestors, descendants, parents, children, and sibling nodes. Understanding this model is necessary for writing CSS. And here's a little pro tip.
Use white space and indentation to visually show which elements are nested. This is just a short example, but indentation will make the code easier to read as your pages get longer and longer.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property