HTML-CSS-DOM


You’ve seen many different examples of page structures, but we haven’t explored how the browser knows what style to apply and where that style comes from. Let’s take a deeper look at how it all works together. HTML is the language of the Web and it has a specific syntax and rules. You write HTML in a document just like you would regular text, except you follow HTML syntax and rules rather then general grammatical rules. The basic word in the language of HTML is a tag. The browser turns HTML tags into elements that form a tree. It knows how to do that because of the document object model, or DOM, which is a standard convention for representing and interacting with elements in HTML. So, the tree you saw in developer tools was really the DOM tree that the browser built from an HTML document. Each HTML tag creates an element in the DOM that the browser uses to display the page. An element is created from the starting tag to the ending tag, and everything in between is content. The content can be empty, it can be text, or it can be another element. Each tag has a name or type that defines what kind of element will be created. Will it be a paragraph? An image? Or just a document division? Block. Each tag can also have attributes with values. For example, here we have an h1 tag with a class attribute and a value of that attribute of article. The document written in HTML defines the structure and content of the page. To define the style, you have to use another language, CSS. CSS allows you to use a specific syntax and rules to change how elements look on the page, the size of the font, the color, background, borders, position, and on and on. For example, you can use CSS to say all h1 elements that belong to the class article should have the text color dark blue. To tie structure and style together, the HTML document can provide the browser with information on what style to use and where to get it. Since there are specific rules for how these elements work, once you know the language, you can look at the HTML code and get a pretty good understanding of how the page is organized and what it can look like. And it works the other way around too. You can see how a page looks and get an idea of how you can break it down into different elements, which is what we’re going to do next.

Add a Comment

Your email address will not be published. Required fields are marked *