Блоки

Текст в html

Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.

Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.

Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.

Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.

Строчные элементы обрамляются тегами . .

Для обрамления элементов блочного типа используется пара

.

Браузеры обрамляют div-блоки разрывами строки.

Блок не может располагаться внутри блока .

Пример

    
Первый блок текста
 
Второй блок текста
  

Основные теги форматирования текста

.

Пример

    
Заголовок
первого уровня
 
Заголовок второго уровня
 
Заголовок третьего уровня
 
Заголовок четвертого уровня
 
Заголовок пятого уровня
 
Заголовок шестого уровня
 
Тест абзаца
  

Создайте текстовый файл, как в примере. Сохраните его с расширением html.

Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.

Для создания и редактирования html-страниц подойдёт даже Блокнот. Но я рекомендую использовать Notepad++ или PhpStorm.

Выделение в тексте

Пример

Текст может быть полужирным. Текст может быть курсивом. 
Текст можно подчеркнуть. Текст можно зачеркнуть. 
Текст может быть надстрочным. Текст может быть подстрочным.

Текст может быть полужирным. Текст может быть курсивом.
Текст можно зачеркнуть.
Текст может быть надстрочным . Текст может быть _{подстрочным}.

Цитаты, переменные, адреса

Источник

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Example

This is _subscript and superscript

HTML Formatting Elements

Formatting elements were designed to display special types of text:

• — Bold text
• — Important text
• — Italic text
• — Emphasized text
• — Marked text
• — Smaller text
• — Deleted text
• — Inserted text
• — Subscript text
• — Superscript text

HTML and Elements

The HTML element defines bold text, without any extra importance.

Example

The HTML element defines text with strong importance. The content inside is typically displayed in bold.

Example

HTML and Elements

The HTML element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Example

The HTML element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in with an emphasis, using verbal stress.

Example

HTML Element

The HTML element defines smaller text:

Example

HTML Element

The HTML element defines text that should be marked or highlighted:

Example

Do not forget to buy milk today.

HTML Element

The HTML element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

Example

My favorite color is blue red.

HTML Element

The HTML element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

Example

HTML Element

The HTML _{element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:}

Example

HTML Element

The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1] :

Example

This is ^{superscripted} text.

HTML Exercises

HTML Text Formatting Elements

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

HTML tags for text

HTML is full of lots of different tags for text. These tags let us display text in our HTML documents in the ways we want it to be displayed. Although a basic feature of HTML, there is a lot to learn about these tags. Most tags for text are inline but there are exceptions. When an element is inline, that means by default they have this line of CSS applied to them:

What is an inline element in HTML?

Inline tags for text behave differently than block elements. They do not break the flow of content, and only take up as much space as is necessary. Block elements, on the other hand, tend to take up the full width of a page.

Therefore, HTML tags for text are all inline, since they are used in writing text, and they flow with other inline elements on the page.

Are there any block tags for text?

Some tags we use for text are block elements. This mostly refers to headers and paragraphs, which usually take up an entire line or section on a page. As such, a new paragraph appears below the last paragraph, instead of next to it, as you would expect.

Now that we’ve covered the basics, Let’s look at some of the main inline tags we use for text in HTML, some of which you may not have heard of before.

The header tags

In HTML, we can denote headers using numbered header tags. These are all block elements. The is the biggest tag on the page, while the is the smallest and least important. In modern search engines and when following best practice, the tag usually denotes the title of the page you are on — so you typically only have one .

Here is an example of all the header tags, from most important and biggest, to least important and smallest:

h1>Heading 1h1> h2>Heading 2h2> h3>Heading 3h3> h4>Heading 4h4> h5>Heading 5h5> h6>Heading 6h6> 

The p tag

This tag is a block tag for text, used to denote a paragraph. A paragraph in HTML usually has some margin, to separate it from other paragraph tags. An example is shown below:

The list tags: ul , ol and li

If we want to make a list in HTML like the example below, we use list tags:

There are two types of list — ol , or ordered lists, and ul , or unordered lists. Essentially, ordered lists have numbers, and unordered lists have standard bullet points.

Within ol and ul lists, you have li elements, which refer to list items. All 3 are block elements. Two examples are shown below:

ul>  li>Hi thereli>  li>I am a listli> ul> ol>  li>Hi thereli>  li>I am a listli> ol> 

The blockquote tag

The blockquote tag is, as the name suggests, a block element. It let’s us create quotes. This is often combined with figcaption for the caption, cite for who is cited, and figure , to encapsulate everything, to create a fully fledged quote. Here is an example of all that in action:

figure>  blockquote>  I am HTML figcaption>HTML, from cite>HTML in actioncite>figcaption> blockquote>figure> 

The result looks like this:

The em tag

The em tag is used to make text emphasised or italic. Here is an example of how that looks. In code, we write it like this:

em>An emphasised piece of textem> 

The strong tag

The strong tag is used to make text bold. Here is an example of how that looks. It looks like this in code:

strong>An emphasised piece of textstrong> 

The br tag

This element makes a line break anywhere you like. It looks like this in code:

The i tag

This element makes text underlined It looks like this in code:

The code tag

The strong tag is used to make text bold. Here is an example of how that looks. It looks like this in code:

strong>An emphasised piece of textstrong> 

The code tag

This element highlights a piece of code on the page. It is styled like below:

The pre tag

This element denotes text that shouldn’t have any line breaks. If you keep typing, this element will stop the text from breaking at any point, instead overflowing. An example is shown in the code element below. The text keeps going, even though it reaches the end of the container:

pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum mi nec ipsum feugiat, sagittis vulputate diam pretium. Praesent aliquam viverra tempor. Curabitur consectetur bibendum ultricies. Pellentesque vel efficitur sapien. Vivamus non turpis accumsan, semper quam sed, viverra diam. Mauris arcu elit, tempus eget elementum id, laoreet finibus erat. In nec diam commodo, accumsan turpis at, blandit risus. Sed eget ligula purus. Maecenas non commodo eros. Curabitur viverra felis vitae nisl hendrerit, at vestibulum erat luctus. Pellentesque consequat ipsum mi, ut aliquam enim viverra in.pre> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum mi nec ipsum feugiat, sagittis vulputate diam pretium. Praesent aliquam viverra tempor. Curabitur consectetur bibendum ultricies. Pellentesque vel efficitur sapien. Vivamus non turpis accumsan, semper quam sed, viverra diam. Mauris arcu elit, tempus eget elementum id, laoreet finibus erat. In nec diam commodo, accumsan turpis at, blandit risus. Sed eget ligula purus. Maecenas non commodo eros. Curabitur viverra felis vitae nisl hendrerit, at vestibulum erat luctus. Pellentesque consequat ipsum mi, ut aliquam enim viverra in.

The button tag

This element lets us create a button. An example is shown below, along with the code:

button>I am a buttonbutton> 

The s tag

This tag represents a striked through piece of text, like this. It can be written in code like this:

Источник