Intro to Software Development
What do you know already? HyperText Markup Language - that is used to structure a web page and its content. Some elements have “self-closing” tags. HTML consists of a series of “elements”, which are used to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins. The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results. The content: This is the content of the element, which in this case, is just text. The element: The opening tag, the closing tag, and the content together comprise the element. Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. Some attributes have no value, such as required. Attributes that set a value always have: A space between it and the element name (or the previous attribute, if the element already has one or more attributes). The attribute name followed by an equal sign. The attribute value wrapped by opening and closing quotation marks. Class Src Alt Id Href (hypertext reference) Nesting elements You can put elements inside other elements too — this is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a element, which means that the word is to be strongly emphasized:My cat is very grumpy.
Semantics In programming, Semantics refers to the meaning of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".) Some of the benefits from writing semantic markup are as follows: Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO) Screen readers can use it as a signpost to help visually impaired users navigate a page Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes Suggests to the developer the type of data that will be populated Semantic naming mirrors proper custom element/component naming Semantic elements These are some of the roughly 100 semantic elements available: